The prompt
You are a design systems documentarian creating the component specification
for a CLAUDE.md file. This documentation will be used by AI coding assistants
(Claude, Cursor, Copilot) to generate consistent UI code.
## Context
- **Token system:** [Paste or reference Phase 2 output]
- **Component to document:** [Component name, or "all components from inventory"]
- **Framework:** [Next.js + React + Tailwind / etc.]
## For Each Component, Document:
### 1. Overview
- Component name (PascalCase)
- One-line description
- Category (Navigation / Input / Feedback / Layout / Data Display)
### 2. Anatomy
- List every visual part (e.g., Button = container + label + icon-left + icon-right)
- Which parts are optional vs required
- Nesting rules (what can/cannot go inside this component)
### 3. Props Specification
For each prop:
- Name, type, default value, required/optional
- Allowed values (if enum)
- Brief description of what it controls visually
- Example usage
### 4. Visual Variants
- Size variants with exact token values (padding, font-size, height)
- Color variants with exact token references
- State variants: default, hover, active, focus, disabled, loading, error
- For EACH state: specify which tokens change and to what values
### 5. Token Consumption Map
Component: Button
├── background → button-bg-${variant} → color-brand-${shade}
├── text-color → button-text-${variant} → color-white
├── padding-x → button-padding-x-${size} → spacing-{n}
├── padding-y → button-padding-y-${size} → spacing-{n}
├── border-radius → button-radius → radius-md
├── font-size → button-font-${size} → font-size-{n}
├── font-weight → button-font-weight → font-weight-semibold
└── transition → motion-duration-fast + motion-ease-default
### 6. Usage Guidelines
- When to use (and when NOT to use — suggest alternatives)
- Maximum instances per viewport (e.g., "only 1 primary CTA per section")
- Content guidelines (label length, capitalization, icon usage)
### 7. Accessibility
- Required ARIA attributes
- Keyboard interaction pattern
- Focus management rules
- Screen reader behavior
- Minimum contrast ratios met by default tokens
### 8. Code Example
Provide a copy-paste-ready code example using the actual codebase's
patterns (import paths, className conventions, etc.)
## Output Format
Markdown, structured with headers per section. This will be directly
inserted into the CLAUDE.md file.
How to use this prompt
Copy the prompt above or click an "Open in" button to launch it directly in your preferred AI. You can then customize the wording to match your exact use case — for example replacing placeholders like [your topic] with real context.
Which AI model works best
Claude excels at agent workflows thanks to its long context window (up to 1M tokens) and nuanced instruction-following. ChatGPT has native Actions (tool-calling) built in. Gemini integrates best with Google Workspace data. For autonomous workflows, Claude Sonnet 4.6 is the current sweet-spot for quality and cost.
How to customize this prompt
Adjust the agent's role and constraints to your environment. If the prompt mentions specific tools (search, file I/O, code execution), remove what you don't have and add what you need. Add guardrails: "Always ask for confirmation before writing files." Define success criteria explicitly.
Common use cases
- Building autonomous research assistants for a specific domain
- Creating chatbots with defined personalities and knowledge limits
- Orchestrating multi-step workflows (research → draft → review → publish)
- Defining system prompts for custom GPTs or Claude Projects
- Building agent loops that call tools and self-correct
Variations
Adapt the tone (more casual, more technical), change the output format (bullet points vs. paragraphs), or add constraints (word limits, target audience).
Related prompts