Claude: Design

3-layer design harness: Skills + Canvas + Inspiration: An engineer's framework for shipping design without being a designer. Skills transfer expertise, canvases give agents a surface, inspiration trains the eye. Applicable to any domain, not just design. (from design without designing neethanwu)

Impeccable (@pbakaus) catches AI design anti-patterns: 20+ commands — /audit, /polish, /animate, /typeset, /arrange. Targets overused fonts, gray-on-color text, pure blacks, nested cards. /delight is the standout command that upgrades overall product feel. (from design without designing neethanwu)

Interface Design (@Dammyjay93) solves cross-session memory: Stores design specs (spacing grids, color palettes, depth strategies, component patterns) in a persistent system.md file that loads automatically. Same pattern Brain uses with CLAUDE.md. (from design without designing neethanwu)

Paper (@paper) — design IS code: Canvas built on real HTML/CSS, not proprietary format. Exposes MCP tools with full read/write access. No translation layer between design and code. Used as source of truth alongside building the product. (from design without designing neethanwu)

Pencil (@tomkrcha) — agent swarm mode for design: Up to 6 agents on one canvas simultaneously — one on typography, another on layout, a third propagating the design system. Git-diffable .pen format, versioned like code. (from design without designing neethanwu)

Variant (@variantui) Style Dropper transfers visual DNA: Point at any design, it absorbs the color palette, typographic rhythm, and spatial density, then transfers it. Exports as React code or prompts for coding agents — bridges inspiration to implementation. (from design without designing neethanwu)

Full design tool stack: Impeccable (quality), Emil Kowalski (animations), Interface Design (persistent specs), UI Skills/@ibelick (baseline accessibility/motion), Paper (code-native canvas), Pencil (versioned design), Variant (inspiration + code export). (from design without designing neethanwu)

Multimodal input (video of a UI) produces better results than text prompts because it captures interaction patterns, spacing, animation, and component relationships that are hard to articulate in words (from video to ui claude workflow)

shadcn/cli v4 introduces "shadcn/skills" as a first-class concept, signaling that the component library ecosystem is building explicit support for AI coding agent workflows (from shadcn cli v4 skills)

shadcn is explicitly targeting coding agent users as a primary audience for CLI tooling, indicating that component library adoption is increasingly driven by agent-assisted development (from shadcn cli v4 skills)

A Figma-like visual editor for Claude Code lets users select front-end elements visually and apply edits through Claude Code, collapsing the design-to-code workflow; 2.6K likes signals strong demand for visual editing layers on AI coding tools (from figma for claude code)

The "Visual Explainer" skill transforms Claude Code output from terminal text into rich HTML pages with consistent design via reference templates and CSS pattern library, addressing the cognitive load of reading dense agent output (from visual explainer agent skill)

Skills that control output format (not just task execution) represent a new category of agent customization — shaping how the agent communicates, not just what it does (from visual explainer agent skill)