AI Blocks › Design things people love
Design specification writer
Share a finished design. Get a spec for layout, tokens, component props, states, breakpoints and edge cases.
Design specification writer is a free AI skill for the job "Design things people love". Give the instructions to an AI assistant that supports the required files and tools, then review its output.
Free · No account · Apache 2.0 licence · Made by Anthropic
Made by Anthropic. See the original on GitHub; we copied it as it is, with its licence.
What it does
A handoff spec that answers a developer's questions before they ask, so a finished design gets built the way you meant it. Nothing is left for them to guess. Give it a Figma link, a screenshot or a plain description. It writes down exact measurements, uses token names such as spacing-md in place of raw pixel values, and lists every component state: default, hover, active, disabled, loading, error and empty. It adds interaction details like timing and easing, then covers content limits, long text, slow connections and missing data. It also covers accessibility: focus order, labels and keyboard use. Each odd choice gets a one-line reason.
You give it
- A Figma link, screenshot or written description of the design
- Your design token names (optional)
- Target breakpoints (optional)
- Any known edge cases (optional)
You get
- A layout and measurement spec
- A table of component states
- Interaction and animation details
- Edge case and content rules
- An accessibility checklist
Use it when
- A design is approved and it is time to pass it to engineers.
- Developers keep building your screens with the wrong spacing or missing states.
- You need to specify how a component behaves on mobile versus desktop.
- You want accessibility needs written down before the build starts.
How to use it
- Add it to your AI once: download it and add the folder to Claude, ChatGPT or Codex as a skill.
- Ask for the job in your own words. Your AI opens the skill when it fits.
- It works best when your AI can open images or Figma links.