AI Blocks › Design things people love
Design token builder
Give it your brand colours and fonts. Get design tokens, component notes, responsive sizes and a developer handoff.
Design token builder 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 · MIT licence · Made by Alireza Rezvani
Made by Alireza Rezvani. See the original on GitHub; we copied it as it is, with its licence.
What it does
A full set of design tokens built from one brand colour, with the files your developers can drop straight into code. It saves the hand work of picking shades, sizes and gaps that all need to fit together. The skill runs in four passes. First, it turns your brand colour and style (modern, classic or playful) into a palette, a type scale and a spacing scale on an 8-point grid, and exports them as JSON, CSS variables or SCSS. Second, it sets up a component structure. Third, it works out responsive breakpoints. Fourth, it writes a handoff note. It also checks colour pairs against WCAG contrast rules. It uses small Python scripts, so it needs a place to run code.
You give it
- Your main brand colour as a hex code
- A style choice: modern, classic or playful
- Fonts you want to use (optional)
- The output format you need, such as JSON, CSS or SCSS
- Brand guide (optional)
You get
- A colour palette with contrast checks
- A type scale and an 8-point spacing scale
- Token files in CSS, SCSS or JSON
- Responsive breakpoint values
- A developer handoff note
Use it when
- You have one brand colour and need a whole palette that passes contrast checks.
- Your developers keep asking for exact spacing and type sizes you never wrote down.
- You are setting up a design system for a new product and want a clean starting point.
- You need CSS or SCSS variables that match what is in your design file.
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 run code.
Workflows that use it
- Give developers a complete component brief
- Write design rules, check colours and hand developers a spec
- Monthly design consistency review