Immediate result: A token set for colour, type, spacing and radius in JSON and CSS variables, with light and dark values.
Problem it solvesColours and spacing are hard-coded everywhere, so the UI drifts and dark mode is painful.
Brand blue #2563EB, font Inter, 4px spacing grid, dark mode needed
--color-accent: #2563EB (light) / #60A5FA (dark)
Text on accent: #FFFFFF on #2563EB = 5.2:1 ✓
--space-1: 4px … --space-8: 32px
When colours and spacing are hard-coded everywhere, the interface drifts and adding dark mode becomes painful. This skill builds a token set from your brand colours, fonts and spacing grid: primitive scales, semantic tokens for text, surfaces, borders, accents and errors in light and dark themes, and contrast checks for every text pairing. It outputs CSS custom properties and JSON, ready for your codebase or a tokens plugin in your design tool. To use it, paste the skill into your assistant and send your brand colours, fonts and any existing values you use; the reply is laid out as “Primitive tokens”, “Semantic tokens” and “Contrast checks”.
# Skill: Design token generator
You are running the "Design token generator" skill for me. I work as: Design systems designer / front-end. What I need from you: a token set for colour, type, spacing and radius in JSON and CSS variables, with light and dark values.
## When I send you my brand colours, fonts and any existing values I use
1. Create a colour scale for each brand colour.
2. Define semantic tokens (text, surface, border, accent, danger) for light and dark.
3. Check text/background pairs for 4.5:1 contrast.
4. Output JSON and CSS custom properties.
## Reply in this format
- Primitive tokens
- Semantic tokens (light / dark)
- Contrast checks
- CSS variables (code)
- JSON (code)
## Rules
- Report the contrast ratio of every text pair.
- Use only the facts I give you; mark anything you had to assume with [ASSUMPTION].
- If something essential is missing, ask me one short question, then continue.
- No preamble or filler: start with the result.
Confirm you're ready in one line, then wait for me to send my brand colours, fonts and any existing values I use.Then sendYour brand colours, fonts and any existing values you use. For example: Brand blue #2563EB, font Inter, 4px spacing grid, dark mode needed
Upload it to Claude, add it to ChatGPT's Codex app, clone it into Claude Code, or download the SKILL.md for any agent. Full guide with screenshots →
Download the ZIP and upload it in Claude. Claude then uses the skill on its own whenever a request matches.
Download ZIP
OpenAI's Codex app reads the same SKILL.md format. Copy the skill into your Codex skills folder:
$ git -c http.version=HTTP/1.1 clone https://scienceofapps.com/skills/ai-skills.git
$ cp -r ai-skills/design-system-tokens ~/.codex/skills/
Clone the library and copy this skill into your Claude Code skills folder.
$ git -c http.version=HTTP/1.1 clone https://scienceofapps.com/skills/ai-skills.git
$ cp -r ai-skills/design-system-tokens ~/.claude/skills/~/.claude/skills/ for all projects, or .claude/skills/ inside one project.Download the skill file and put it in a folder named after the skill.
Download SKILL.md~/.claude/skills/design-system-tokens/SKILL.md.Repositoryscienceofapps.com/skills/ai-skills.git · all 200 skills, one folder each, plain git over HTTPS
Colours and spacing are hard-coded everywhere, so the UI drifts and dark mode is painful. The skill fixes that: a token set for colour, type, spacing and radius in JSON and CSS variables, with light and dark values.
Copy the skill and paste it as the first message of a new chat, then send your input. To keep it, paste it into a ChatGPT Project or custom GPT, a Claude Project or a Gemini Gem, or upload the SKILL.md file as a Claude Skill.
Send your brand colours, fonts and any existing values you use. If something essential is missing, the skill asks you one short question and then continues.
Yes. It's free to copy, use and adapt, with no sign-up, and works in the free versions of ChatGPT, Claude, Gemini and Copilot.
ProblemResearch starts with a method instead of a question, and the findings don't inform decisions.
Should we add a family plan to our streaming app?
Decision: build a family plan in Q1 or not.
RQ: How do households share accounts today, and what breaks?
Method: 10 household interviews + a survey of 400 subscribers on sharing.
Immediate resultA research plan: decision to inform, questions, method, participants, timeline and outputs.
ProblemImage generators produce generic results from vague prompts, and outputs don't match the brand.
Hero image for a fintech landing page: young Indian professionals, trust, warm
'Two young professionals reviewing a phone at a sunlit Bengaluru café table, warm natural light, shallow depth of field, 35 mm, editorial photo style'
--ar 16:9
Avoid: text, logos, distorted hands
Immediate resultDetailed prompts for Midjourney, DALL·E, Imagen or Firefly with style, composition and negative prompts.
ProblemDevelopers build something different from the design because behaviour and edge cases weren't written down.
Product card: image, title, price, rating, add-to-cart; grid of 4 on desktop
States: default, hover (lift 2 px, 150 ms), out of stock (button disabled, label 'Notify me')
Title: max 2 lines, then ellipsis
Grid: 4 columns ≥ 1200 px · 2 columns < 810 px
Immediate resultHandoff notes covering states, interactions, responsive behaviour, content rules and accessibility.
All 12 design & ux skillsAll 200 skillsRead it in the articleProve it: AI for UX/UI Designers Certification (free test)
60 research-backed principles in 6 categories — what each one means, why it works on the human brain and how to use it on your own screens. Written by Sushant Singh, founder of Science of Apps, who has scaled consumer apps to lacs of users and spent 10+ years leading product across startups and digital businesses in the US, EU & India.
110 real paywalls from top apps, taken apart, rated out of 5 and decoded with the Laws of UX — plus the frameworks, copy and checklists to ship your own. By Sushant Singh, founder of Science of Apps.