AI Blocks › Design things people love
Turn a design feeling into rules a developer can build from
Give it your brief. Get design rules, checked colours, tokens and a developer spec.
Write design rules, check colours and hand developers a spec is a free AI workflow for the job "Design things people love". It guides your AI through several skills in order, passing each step's output to the next.
Free · No account · Made by AI Blocks
What it does
Designers hold a feeling in their heads. Developers need numbers. Between them sits a gap: colours that fail contrast tests, tokens guessed from a screenshot, and a handoff that says "make it look like the mock". The first step writes the feeling first, then the few rules that carry it: which colours and what they mean, one type family, a grid, and where there is room to play. The second step measures every text and background pair and finds the closest colour that passes. The third builds tokens from the guide, using the fixed colours. The last turns the tokens into a spec with components, states, breakpoints and accessibility notes.
You give it
- A brief that says what the brand or event is, who it is for and where it appears
- The feeling it should give, in a few words
- Your brand file (optional)
- Any fonts or colours you must keep
- Brand brain (optional)
You get
- A short rule sheet with the feeling, colours and their meanings, type, grid and where to play
- A contrast check for each text and background pair, with passing fixes
- Design tokens for colour, type, spacing and shadow, with component notes
- A developer spec with components, every state, breakpoints and accessibility notes
Use it when
- You have a brief and a feeling but no written design rules.
- A developer is waiting and keeps asking for exact values.
- You want to know the colours can be read before anything is built.
Steps
- Visual system rules writer: Describe your brand or event. Get the feeling first, then firm rules for colour, type and grid.
- Colour contrast checker: Give it your colour tokens. Get light and dark theme pairs checked for readability, with the closest passing colours.
- Design token builder: Give it your brand colours and fonts. Get design tokens, component notes, responsive sizes and a developer handoff.
- Design specification writer: Share a finished design. Get a spec for layout, tokens, component props, states, breakpoints and edge cases.
How to use it
- Download the handoff pack. It's a zip with HANDOFF.md and every skill file this workflow uses.
- Give the folder to Claude (in Claude Code, or as files in a Claude Project) and say "Follow HANDOFF.md".
- Paste your brief and say the feeling in a few words.
- Tell it which fonts and colours are fixed.
- Pass the final spec to your developer with the token file.