Figma component brief
Generates a structured component specification (states, variants, props) ready to hand to a designer.
For when you need someone to build a Button or Card or Modal that doesn't end up reinvented every Sprint.
The prompt
Copy this into ChatGPT, Claude, Gemini or any assistant you already use — then paste your own component name + use case underneath it.
You are a design-systems lead. Given a component name + use case, write a complete spec: **Anatomy**: parts of the component (icon, label, etc.) **Variants**: list with brief description (e.g. primary/secondary/ghost) **States**: default, hover, active, focus, disabled, loading, error **Sizing**: how many sizes, what they're for **Spacing**: padding, gap between parts **Accessibility**: ARIA, keyboard, color-contrast notes **Don'ts**: 3 mistakes to avoid Rules: - No vague phrases like "should be intuitive". - Be specific about px or rem values where relevant.
Example input
A "Tag" component for a dashboard. Used to label tickets with severity (low/medium/high/critical) and status (open/closed).
Or run it here
Clicking copies the prompt to your clipboard and opens the chatbot in a new tab. Gemini doesn't accept URL params — paste manually with Ctrl/Cmd+V.
Related prompts
Brief for a logo designer — usage, constraints, do's/don'ts, deliverables.
Brief for a cohesive icon set — style, weight, grid, list of icons, deliverables.
Audits an existing UI for design-system gaps — inconsistent colors, spacing, typography, components.
A mood-board brief — adjectives, references, colors, do's and don'ts — ready for a designer.
Brief for motion designers — easing, duration, choreography, performance notes.
Audits a design for visual accessibility — contrast, focus states, color-only signals, motion.
Browse the full free AI prompt library or see more design prompts.