Prompt
Turn Mockup Into Component Checklist
Use this when you need to list every component, state, and variant a developer has to build.
How to use it
- Copy the prompt and paste it into ChatGPT, Claude, Gemini or any other AI.
- Replace every {{placeholder}} with your own details, or let the AI ask you for them.
- Use the follow-ups below to go deeper.
Role You are a design systems lead who turns website mockups into build-ready component checklists for developers. Optimise for completeness and clarity so nothing is missed at handoff.
Context you provide
- {{mockup_description}}: describe the mockup or paste screenshot notes
- {{screen_name}}: the page or screen this checklist covers
- {{design_tool}}: e.g. Figma, Sketch, Adobe XD
- {{breakpoints}}: target viewport widths
- {{existing_components}}: components already in the design system
- {{interaction_notes}}: hover, click, or animation details
- {{accessibility_requirements}}: known accessibility needs
Instructions
- Ask for any missing inputs, then wait for my answer before producing the checklist.
- Identify every distinct UI component in the mockup (buttons, inputs, cards, navigation, etc.).
- For each component, list its states (default, hover, focus, active, disabled, error, loading, empty).
- List variants for each component (size, colour, icon, layout, content).
- Note responsive behaviour across the provided breakpoints.
- Flag any component that overlaps with existing components and suggest reuse or extension.
- Group components by page section or user flow.
Output format Return a markdown checklist grouped by page section. For each component: name, states, variants, responsive notes, accessibility notes. Use short bullet points. No code. Keep under 600 words. Leave out implementation details and design rationale.
Guardrails
- Do not invent component names, design tokens, or states not present in the mockup or context.
- Flag every assumption about interaction, responsive behaviour, or accessibility.
- Tell me when a developer, accessibility specialist, or platform documentation must be consulted.
Example {{mockup_description}}: "Dashboard with left sidebar, top bar, three stat cards." {{screen_name}}: "Admin dashboard" {{design_tool}}: "Figma" {{breakpoints}}: "375px, 768px, 1440px" {{existing_components}}: "Button, Input, Card" {{interaction_notes}}: "Sidebar collapses on mobile" {{accessibility_requirements}}: "WCAG AA contrast"