design-tokens
Generate or improve a complete design token system covering color, typography, spacing, radius, shadows, and motion.
Skill by Aboudjem
Chalk Labs
Need help deploying design-tokens?
Chalk Labs sets up agents like this inside real teams: connected to your tools, tested on your data, with a human in the loop where it matters.
Install
Works with Claude Code, Claude apps, Codex, Cursor, Gemini CLI, GitHub Copilot, VS Code, OpenCode, Goose, Windsurf. Read the repository before you give any tool access to your data.
npx agentmarket install skill/aboudjem-design-tokens
Asks which of your tools to add it to (Claude Code, Codex, Cursor, VS Code, Windsurf, Gemini CLI, Claude Desktop) and shows the change first. See https://agentmart.dev/cli.
Get the weekly diff
The weekly diff: one email a week with new agent tools, notable updates and grade changes, plus security alerts for tools you follow. Double opt-in, one-click unsubscribe.
About
Use cases: design
Reviews
Write a reviewNo reviews yet. Installed it? Reviews come from verified installers only. How reviews work
Permissions
What this skill can do and what it asks for, from its SKILL.md and code. Checked Nov 1, 2026.
- Tools
- No tools found
- Secrets
- None asked for
- Install scripts
- None found
Network hosts it talks to 1
codeload.github.com· found in install command
Files it touches
~/.claude/skills/design-tokens
What's inside
- Skill name
design-tokens- Description
- Generate or improve a complete design token system covering color, typography, spacing, radius, shadows, and motion. Use when the user asks for design tokens, to generate tokens, or to build a token system.
- License
- MIT
- Instructions
- 34 lines in SKILL.md · view on GitHub
Files (1)
- SKILL.md
SKILL.md (first lines)
# /design-tokens: Generate Design Token System
Generate a complete design token system for the project.
## Usage
```
/design-tokens # Auto-detect brand color, generate full system
/design-tokens #3b82f6 # Generate from specific brand color
/design-tokens --format tailwind # Output as Tailwind config
/design-tokens --format css-vars # Output as CSS custom properties
/design-tokens --format json # Output as JSON tokens
```
## Flow
1. Read existing tokens/theme (if any)
2. Determine brand color (from existing or user input)
3. Generate complete token system with `uiux_generate_tokens`:
- **Color**: primary, secondary, neutral (11 steps), semantic (success/error/warning/info), surfaces (light + dark)
- **Typography**: font, scale (8 steps), line heights, weights
- **Spacing**: 4px base scale (16 steps)
- **Border radius**: 4 steps (sm, md, lg, full)
- **Shadows**: 3 levels (sm, md, lg)
- **Motion**: duration + easing tokens
4. Output in requested format
## Output Formats
- **css-vars**: `:root { --color-primary: ...; }` with dark mode media query
- **tailwind**: `tailwind.config.js` theme extension
- **json**: W3C Design Tokens Community Group format
- **js**: JavaScript module exportFrom Aboudjem/ui-ux-suite, MIT.
More from Aboudjem/ui-ux-suite
- 0.584score
type-audit
Aboudjem
Typography-only audit covering font selection, type scale, readability, hierarchy, and performance.
SkillBFreshness: B★ 7Claude Code +9 - 0.584score
design-compare
Aboudjem
Compare the current design against a reference product or competitor.
SkillBFreshness: B★ 7Claude Code +9 - 0.584score
design-checklist
Aboudjem
Interactive pre-launch design quality checklist.
SkillBFreshness: B★ 7Claude Code +9 - 0.584score
a11y-audit
Aboudjem
Accessibility audit covering WCAG 2.2, contrast, focus, keyboard, screen reader, and touch targets.
SkillBFreshness: B★ 7Claude Code +9 - 0.584score
color-audit
Aboudjem
Color-only audit that extracts, evaluates, and recommends improvements for the project's color system.
SkillBFreshness: B★ 7Claude Code +9 - 0.584score
component-audit
Aboudjem
Component consistency audit covering state coverage, hierarchy, and patterns.
SkillBFreshness: B★ 7Claude Code +9 - 0.584score
design-audit
Aboudjem
Full project design audit that orchestrates all agents, scores across 12 dimensions, and generates a prioritized action plan.
SkillBFreshness: B★ 7Claude Code +9 - 0.584score
design-score
Aboudjem
Quick design score card covering 12 dimensions with the top 5 improvements, in under 2 minutes.
SkillBFreshness: B★ 7Claude Code +9 - 0.584score
flow-audit
Aboudjem
User flow and navigation audit covering information architecture, onboarding, and error states.
SkillBFreshness: B★ 7Claude Code +9 - 0.584score
layout-audit
Aboudjem
Layout and spacing audit covering grid, spacing consistency, density, and responsive behavior.
SkillBFreshness: B★ 7Claude Code +9 - 0.584score
refactor-plan
Aboudjem
Prioritized redesign action plan covering quick wins, medium effort, and major rework.
SkillBFreshness: B★ 7Claude Code +9 - 0.584score
style-direction
Aboudjem
Visual style direction recommendation with current style analysis plus the top 3 directions and implementation guidance.
SkillBFreshness: B★ 7Claude Code +9
Signals
- Stars
- 7
- Forks
- 1
- Open issues
- 0
- Last commit (this folder)
- Sep 2, 2026 (2 months ago)
- Last release
- Sep 3, 2026 (1 month ago)
From GitHub (fetched Oct 24, 2026).
Details
- License
- MIT
- Repository
- github.com/Aboudjem/ui-ux-suite
- First seen
- Oct 24, 2026
- Last checked
- Oct 24, 2026
- Source
- GitHubgithub-graphql
More from Aboudjem
- 0.584score
component-audit
Aboudjem
Component consistency audit covering state coverage, hierarchy, and patterns.
SkillBFreshness: B★ 7Claude Code +9 - 0.584score
design-checklist
Aboudjem
Interactive pre-launch design quality checklist.
SkillBFreshness: B★ 7Claude Code +9 - 0.584score
design-compare
Aboudjem
Compare the current design against a reference product or competitor.
SkillBFreshness: B★ 7Claude Code +9 - 0.584score
a11y-audit
Aboudjem
Accessibility audit covering WCAG 2.2, contrast, focus, keyboard, screen reader, and touch targets.
SkillBFreshness: B★ 7Claude Code +9 - 0.584score
color-audit
Aboudjem
Color-only audit that extracts, evaluates, and recommends improvements for the project's color system.
SkillBFreshness: B★ 7Claude Code +9 - 0.584score
design-audit
Aboudjem
Full project design audit that orchestrates all agents, scores across 12 dimensions, and generates a prioritized action plan.
SkillBFreshness: B★ 7Claude Code +9
Done for you
Rather not set it up yourself?
Chalk Labs scopes, builds and runs agents for your team: the task audit, the eval harness, the integrations and the weekly ops report. Fixed scope, priced before we start.
See how we build AI agents →Read the case studies
Chalk Labs is a two-founder AI and growth studio. We build AI agents, CRMs and MVPs for Web3 and AI companies, and have shipped 50+ product and token launches.
- launches shipped
- 50+
- launches shipped
- media placements
- 500+
- media placements
- founders on every account
- 2
- founders on every account
Press we've placed: Forbes · CoinDesk · Decrypt · Cointelegraph · The Block
Rahil Jain, Co-founder, Chalk Labs. Ex-Goldman Sachs engineer. You talk to the person who builds it.
Get design-tokens running in your business
Tell us what you want to automate. A founder replies within one working day with a plan, not a pitch deck.
Cite this page
design-tokens skill. Agent Mart. https://agentmart.dev/skills/aboudjem-design-tokens (last updated 2026-10-24)