Spec Sheet
Generate the interaction specs your developer wishes you'd included
Developers always complain about missing hover states, error states, loading states, and mobile breakpoints. This recipe analyzes your design file and generates a complete interaction specification for every interactive element — so nothing gets lost between Figma and code.
INGREDIENTS
PROMPT
Create a skill called "Spec Sheet". When I share a Figma file URL or design screenshots, analyze every interactive element (buttons, links, form inputs, modals, dropdowns, tabs, accordions, carousels, tooltips) and generate a complete interaction specification. For each element, document these states: default, hover, focus (with visible focus ring), active/pressed, disabled, loading, error, success, and empty. Include specific CSS values (colors, transforms, opacity, box-shadow changes), transition durations and easing curves, keyboard interaction patterns (tab order, key bindings), and mobile touch behavior. Flag any interactive element that appears to be missing states in the design. Output as a structured Markdown document organized by component.
How It Works
Give your Claw your Figma file URL or design screenshots, and it identifies
every interactive element (buttons, links, forms, modals, dropdowns, tabs,
accordions) and generates a specification for each state the developer needs
to implement — including the ones you probably forgot to design.
What You Get
- A full inventory of interactive elements in the design
- State specifications per element: default, hover, focus, active, disabled, loading, error, success, empty
- Specific CSS values for each state (color changes, transforms, transitions)
- Keyboard interaction patterns (tab order, enter/space behavior, escape to close)
- Transition durations and easing curves
- Mobile touch behavior notes (tap vs. hover, swipe gestures)
- A checklist of states that appear to be missing from the design
- Output as a Markdown document or Notion page
Setup Steps
- Share your Figma file URL or upload design screenshots
- Your Claw analyzes every interactive element
- It generates the spec and flags missing states
- Review, fill in any missing design decisions, and share with your developer
Tips
- The "missing states" checklist is the most valuable part — it catches what you forgot before the developer has to ask
- Share this with the developer alongside the Figma file — it eliminates the most common back-and-forth
- The keyboard interaction specs make accessibility implementation much easier
- Works for any component library: React, Vue, vanilla HTML/CSS