Field guide / sub-domain
14
sources in this field
Updated August 28, 2026
Current thesis
The shortest path to orientation.
This synthesis records claims and practices from the cited sources; reported outcomes and product capabilities have not been independently verified.
Design with Claude operates through skills (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). Claude Design (Anthropic Labs, Opus 4.7 vision) generates prototypes, slides, and one-pagers conversationally. The markdown design-spec pattern consolidates: Google's Design.md captures typography, colors, spacing; extract existing brands' (Linear, Stripe, Vercel) design language, reference it across modular skills for unified touchpoints. Refero's 2,000 DESIGN.md files fix agent-generated UI ugliness—agents lacked exposure to good design. Multimodal input (video of target UI) outperforms text prompts by capturing interaction patterns. Skills controlling output format represent a new agent-customization category. AI design agents readily over-add elements without questioning constraints, and prototype gravity creates inertia toward refinement rather than exploration; iterate in dedicated design tools generating variants first. Google's Design.md format applied across landing pages, apps, pitch decks, and videos creates unified brand experience.
Evidence board
Claims worth carrying forward01Design process (from Christopher Alexander's 'Notes on the Synthesis of Form'): 1) lay out constraints, 2) generate solutions satisfying them, 3) revisit constraints if feedback reveals gaps—loop back to step 1 rather than patching solutions directly.
02The common failure mode is 'design wackamole': skipping constraint re-evaluation and spot-fixing symptoms (e.g. 'make X more prominent') when user feedback arrives, which creates a disjointed patchwork prioritizing some interactions arbitrarily over others.
03AI agents exacerbate wackamole design by readily executing narrow prompts like 'add an affordance for Y' without questioning whether the underlying constraint set needs revision—mirroring how agents add unnecessary try-catch/utility duplication in code.
04Workflow: maintain a running document of minor UI 'papercuts' instead of reactively fixing each one; ship obvious fixes immediately but batch small annoyances for a cohesive redesign later, avoiding accumulated patchwork mess.
05AI design agents systematically over-add (extra copy, lines, icons, belt-and-suspenders elements), producing UI that looks polished but is functionally worse—counteract by auditing every element and asking 'do I actually need that?'
06'Prototype gravity' risk: building the first design version directly in the production codebase creates inertia to just refine that version rather than exploring alternatives, and forces the agent to graft onto existing real-app constraints prematurely—iterate in a dedicated design tool (Figma, Cursor Design Mode, Claude Design, HTML prototypes) generating 3-4 variants first.
07At Ref, a /showcase page is used for agents to build and iterate on UI components in isolation before wiring them into the main app, enforcing separation of views/logic and reusable component libraries for visual cohesion.
08For features spanning frontend and backend, Ref splits PRs by layer: backend changes get unit/integration test verification, frontend changes require human review via preview deploys with real backend data—since even agent-built designs matching spec often still need adjustment once seen with real data.
Adjacent fields
Latest evidence
Matt Dailey
Matt Dailey (Ref) outlines a 7-step design process for AI-assisted product design: fixing constraints before jumping to solutions, removing AI-added bloat, iterating in dedicated design tools rather than the live codebase, using component libraries, leveraging preview deploys, stealing proven UX patterns, and deliberately building personal taste.
Thariq
Anthropic's Thariq details how prompting and context engineering practices have shifted for Claude Opus 5/Fable 5: over 80% of Claude Code's system prompt was removed with no eval loss, as newer models handle judgment, tool design, and progressive disclosure better than rigid rules, repeated examples, or upfront specs.
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