Field guide / sub-domain
12
sources in this field
Updated July 16, 2026
Current thesis
The shortest path to orientation.
Design with Claude Code operates through a 3-layer harness: Skills (expertise via Impeccable, Emil Kowalski, Interface Design), Agent Canvases (Paper with code-native HTML/CSS, Pencil with 6-agent swarm mode), and Inspiration tools (Variant Style Dropper, Mobbin). The 2026-Q2 inflection is Claude Design (Anthropic Labs, Opus 4.7 vision, research preview on Pro/Max/Team/Enterprise) becoming first-party, generating prototypes/slides/one-pagers conversationally and rendering HyperFrames motion design videos in 2 prompts. The markdown design-spec pattern is consolidating: Google's Design.md format captures typography, colors, spacing in one file agents reference; the leverage move is extracting existing brands' (Linear, Stripe, Vercel) design language into your own design.md, then pointing modular skills at it for unified touchpoints. Refero's 2,000 DESIGN.md files fix agent-generated UI ugliness at its root—agents had never seen good design. Multimodal input (video of target UI) outperforms text prompts by capturing interaction patterns and spacing. Lamina Labs' SDK renders animated whiteboard explainers in seconds; Codex's one-shot AI image generation replaces click-through prototyping. shadcn/cli v4 signals the component ecosystem is building explicit agent-workflow support. Skills controlling output format (not just execution) represent a new agent-customization category.
Evidence board
Claims worth carrying forward01Design.md is Google's open-source markdown format that encodes a brand's full design language (typography, colors, spacing) in one file. Attaching it to any agent prompt ensures every generated artifact—landing page, app, deck—inherits the same visual DNA without per-prompt re-specification.
02The recommended workflow: don't build a design system from scratch. Clone the design language of a brand you admire (Linear, Stripe, Vercel), extract it into a Design.md using ChatGPT or Claude, then layer specialized skill files on top (landing page skill, mobile skill, motion skill) that all reference the same Design.md.
03The critical failure mode in AI-assisted UI work: one screen looks polished, everything else looks generic. Design.md's structural fix is centralizing the aesthetic contract in one file so every subsequent generation—regardless of medium or agent—stays consistent.
04Build a second-brain capture habit for design inspiration: save visual references from the real world and web, then reference them when prompting new builds. Taste is developed through accumulated examples, not downloaded via a single prompt.
05Claude Code skill for HTML iteration: clone the repo, build an HTML page, ask CC to make it interactive. CC launches a localhost server, accepts in-browser comments, updates the page, then tours you through the changes — Google Docs-style iteration for static HTML outputs.
06Static HTML as Claude Code's primary output format (reports, explorations, code structure, mockups) is a favored pattern because it externalizes results into a reviewable, shareable artifact outside the terminal context — the comment-skill extends this into a live feedback loop.
07Impeccable (impeccable.style) is a single design skill with 23 commands and curated anti-patterns for frontend design. It works across Cursor, Claude Code, GitHub Copilot, Gemini CLI, and Codex CLI — rated more practically useful than popular alternatives like uiuxpromax.
08The Taste skill workflow uses two components: imagegen-frontend-web (calls GPT Image2 to generate design reference images) + image-to-code (1:1 converts images to web pages). Install both from the Taste skill GitHub repo; the pairing bridges design ideation to production code.
Adjacent fields
Key voices
Latest evidence
GREG ISENBERG
Google's open-source Design.md format captures typography, colors, and spacing in a single markdown file that agents reference to produce consistent outputs. Combined with reusable skill files (landing page, mobile, pitch deck), it creates a design system any AI agent can apply uniformly across all surfaces—replacing the common pattern of polishing one screen while everything else looks generic.
Paras Chopra
A Claude Code skill that enables Google Docs-style commenting on locally served HTML files, letting Claude update outputs live based on in-browser annotations. Bridges the gap between static HTML generation and iterative, visual feedback loops.
Sac
Three tested design skills for Codex/Claude Code that progressively raise UI aesthetic quality: Impeccable (1 skill, 23 commands, anti-patterns), Taste skill (imagegen-frontend-web + image-to-code for 1:1 HTML conversion), and built-in Frontend App Builder (stricter color/icon fidelity, more engineering-oriented pipeline).
Nico Bailon
Nico Bailon built the open-source Claude/Codex agent skill 'grill-for-unknowns,' merging Matt Pocock's grilling/grill-with-docs skills with Thariq's four-quadrant 'Finding Your Unknowns' framework (known knowns, known unknowns, unknown knowns, unknown unknowns). The skill and its source article detail concrete techniques—blindspot passes, brainstorm/prototype cycles, interviews, source-code references, implementation notes, and post-implementation quizzes—for reaching shared understanding with an AI coding agent before and during implementation, producing durable artifacts (ADRs, launch packets, CONTEXT.md) instead of leaving alignment buried in chat.
Thariq
Thariq (@trq212) outlines a framework and set of concrete techniques for working with Claude Fable, centered on the idea that output quality is bottlenecked by the user's ability to identify and communicate their own 'unknowns' (gaps between their prompt/context and the actual work). He details pre-, during-, and post-implementation techniques—blind spot passes, brainstorms/prototypes, interviews, references, implementation plans/notes, pitches, and quizzes—illustrated with example prompts and a real case study from editing the Fable launch video.
Bin Liu
> (1/n) ok - it's official > > Claude Design can create HyperFrames videos, natviely
rLLM
> https://t.co/Dl67Q7wMgx - The rLLM project has released a new version, which includes updates to the [[claude]] architecture, design, and ecosystem - The new release introduces support for [[voice-tools]] and [[physical-ai]] integrations, enabling new use cases for the [[claude]] language model
klöss
> https://t.co/p2ldwjt7kj - Claude can assist with a variety of tasks, including [[b2b-growth]], [[brand-and-design]], and [[physical-ai]] — as demonstrated by the linked example of Claude interacting with the physical world through a camera feed - The tweet showcases Claude's ability to understand
Cody Schneider
> gtm engineering today > > "hey claude build me this"
Manthan Gupta
> https://t.co/em8mMn8bhj - The tweet provides a link to a detailed overview of Claude, an AI agent with a diverse set of capabilities including [[claude/architecture]], [[claude/design]], [[claude/ecosystem]], [[claude/settings]], [[claude/voice]], and [[claude/workflow]]. - The overview discusses