create-design-system
Skill to use if user asks you to create a design system or UI kit
Skill by aiatelie
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/aiatelie-create-design-system
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: not checked yet.
What's inside
- Skill name
create-design-system- Description
- Skill to use if user asks you to create a design system or UI kit
- License
- MIT
- Instructions
- 22 lines in SKILL.md · view on GitHub
Files (1)
- SKILL.md
SKILL.md (first lines)
# Create design system
> ⚠️ **STUB** — this is a working theory of the skill body. Replace as the implementation is refined.
## What we know about it
- It's the skill to invoke when the user asks for a design system or UI kit.
- The skill pairs with an asset-registration mechanism that groups outputs into: **Type, Colors, Spacing, Components, Brand** — that's the section taxonomy this skill produces against.
## Working theory of the body (to be replaced)
1. Ask questions (typography direction, palette mood, scale, density, what components are in scope).
2. Produce a tokens file (`tokens.css` or similar) with CSS custom properties for: type scale, color ramps, spacing scale, radii, shadows.
3. Produce one HTML preview file per group (Type, Colors, Spacing, Components, Brand), each registered with `register_assets({ asset, group, viewport })`.
4. Build an index page that pulls them all together.
5. Tweakable knobs for the primary token values so the user can riff.
## TODO
- Replace this stub with the real skill body once captured.From aiatelie/ai-atelie, MIT.
More from aiatelie/ai-atelie
- 0.542score
frontend-design
aiatelie
Aesthetic and convention guide for editing AI Atelie's own chrome — the editor, canvas frame, toolbars, sidebars, dialogs, settings, projects screen.
SkillCFreshness: C★ 11Claude Code +9 - 0.542score
design-critique
aiatelie
Run a structured anti-slop audit on the design just produced before declaring done.
SkillCFreshness: C★ 11Claude Code +9 - 0.542score
design-md-author
aiatelie
Read or write a Google-spec DESIGN.md at the project root — the cross-tool aesthetic spec that grounds every prompt in this project.
SkillCFreshness: C★ 11Claude Code +9 - 0.542score
semantic-commit
aiatelie
Draft a Conventional Commits 1.0.0 message for the AI Atelie repo.
SkillCFreshness: C★ 11Claude Code +9 - 0.542score
canvas-sync
aiatelie
Keep the canvas surface coherent across its three places — the canonical starter at `mcp/starters/DesignCanvas.jsx`, the byte-identical demo copy at…
SkillCFreshness: C★ 11Claude Code +9 - 0.542score
cuj-guardian
aiatelie
Run and triage AI Atelie's Critical User Journey (CUJ) for every PR — the single end-to-end test that proves a user can open the app, create a project, drive…
SkillCFreshness: C★ 11Claude Code +9 - 0.539score
interactive-prototype
aiatelie
Build a clickable, hi-fi prototype of a product or flow — not a wireframe, not a static mock.
SkillCFreshness: C★ 11Claude Code +9 - 0.539score
ship-task
aiatelie
Take an AI Atelie task — issue, ticket, or ad-hoc ask — all the way from description to merged-ready PR.
SkillCFreshness: C★ 11Claude Code +9 - 0.539score
animated-video
aiatelie
Timeline-based motion design — animated explainer-style HTML artifacts where time advances and elements enter or exit on a schedule.
SkillCFreshness: C★ 11Claude Code +9 - 0.539score
design-aesthetic-presets
aiatelie
Pick one of eleven named aesthetic directions before writing any code, then execute it with discipline.
SkillCFreshness: C★ 11Claude Code +9 - 0.539score
export
aiatelie
Export a selected element from the canvas as PNG, JPEG, OGraf bundle, Lottie, or video.
SkillCFreshness: C★ 11Claude Code +9 - 0.538score
verify-with-playwright
aiatelie
Drive a real browser against AI Atelie's running dev server to verify a change works, and capture screenshots + video as PR evidence.
SkillCFreshness: C★ 11Claude Code +9
Signals
- Stars
- 11
- Forks
- 0
- Open issues
- 40
- Last commit (this folder)
- May 6, 2026 (5 months ago)
- Last release
- Jun 3, 2026 (4 months ago)
From GitHub (fetched Oct 24, 2026).
Details
- License
- MIT
- Repository
- github.com/aiatelie/ai-atelie
- First seen
- Oct 24, 2026
- Last checked
- Oct 24, 2026
- Source
- GitHubgithub-graphql
Same skill elsewhere
Copies of this SKILL.md published by others; search shows only one of them.
More from aiatelie
- 0.542score
semantic-commit
aiatelie
Draft a Conventional Commits 1.0.0 message for the AI Atelie repo.
SkillCFreshness: C★ 11Claude Code +9 - 0.542score
frontend-design
aiatelie
Aesthetic and convention guide for editing AI Atelie's own chrome — the editor, canvas frame, toolbars, sidebars, dialogs, settings, projects screen.
SkillCFreshness: C★ 11Claude Code +9 - 0.542score
design-critique
aiatelie
Run a structured anti-slop audit on the design just produced before declaring done.
SkillCFreshness: C★ 11Claude Code +9 - 0.542score
canvas-sync
aiatelie
Keep the canvas surface coherent across its three places — the canonical starter at `mcp/starters/DesignCanvas.jsx`, the byte-identical demo copy at…
SkillCFreshness: C★ 11Claude Code +9 - 0.542score
cuj-guardian
aiatelie
Run and triage AI Atelie's Critical User Journey (CUJ) for every PR — the single end-to-end test that proves a user can open the app, create a project, drive…
SkillCFreshness: C★ 11Claude Code +9 - 0.542score
design-md-author
aiatelie
Read or write a Google-spec DESIGN.md at the project root — the cross-tool aesthetic spec that grounds every prompt in this project.
SkillCFreshness: C★ 11Claude Code +9
Cite this page
create-design-system skill. Agent Mart. https://agentmart.dev/skills/aiatelie-create-design-system (last updated 2026-10-24)