Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx skills add XINGANLIU/design-system-generator-skill --skill design-system-generatorgit clone --depth 1 https://github.com/XINGANLIU/design-system-generator-skillWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/xinganliu/design-system-generator-skill/design-system-generator)<a href="https://agentmods.dev/skills/xinganliu/design-system-generator-skill/design-system-generator"><img src="https://agentmods.dev/badge/skills/xinganliu/design-system-generator-skill/design-system-generator/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<a href="https://agentmods.dev/skills/xinganliu/design-system-generator-skill/design-system-generator"><img src="https://agentmods.dev/badge/skills/xinganliu/design-system-generator-skill/design-system-generator.svg" alt="Reviewed on agentmods" width="80" height="20"></a>What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00139 | $0.02727 |
| Opus 5 | $0.00069 | $0.01363 |
| Sonnet 5 | $0.00028 | $0.00545 |
| Haiku 4.5 | $0.00014 | $0.00273 |
Grade A, and why
design-system-generator scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 10d ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
How it starts
The opening of the file, as written. The whole thing — 257 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Design System Generator / 设计系统生成器
Generate a complete, production-ready design system from minimal brand inputs. 从最少的品牌输入自动生成完整的、可投产的设计系统。
Core Principles / 核心原则
- One Color In → Full System Out: The user only needs to provide a single brand color. Everything else is derived algorithmically.
- OKLCH-First: All colors are generated in the OKLCH color space for perceptual uniformity and superior accessibility.
- W3C Standards: Output follows the W3C Design Tokens specification (
$value/$typeformat). - Zero Dependencies: Generated CSS uses only native custom properties — no preprocessors, no frameworks required.
- Accessibility by Default: All color combinations meet WCAG 2.2 AA contrast ratios (4.5:1 for text, 3:1 for UI elements).
- Progressive Enhancement: Dark mode uses
color-scheme+light-dark()for native OS integration.
Workflow / 工作流
You MUST follow these phases in order. Do NOT skip phases or generate all files at once without user confirmation at each stage.
你必须按顺序执行以下阶段。不要跳过阶段，也不要在未获得用户确认的情况下一次性生成所有文件。
Phase 1: Brand Input Collection / 品牌输入收集
Trigger / 触发: User asks to create a design system, generate a theme, or build brand styles.
Your Task / 你的任务: Collect brand parameters through conversation. At minimum, you need ONE of these:
| Parameter | Required | Default | Example |
|---|---|---|---|
| Brand color | ✅ Yes | — | #6366f1, oklch(55% 0.25 270), indigo |
| Font family | Optional | Inter, system-ui, sans-serif |
"Outfit", "Noto Sans SC" |
| Border radius style | Optional | rounded (8px) |
sharp (2px), rounded (8px), pill (9999px) |
| Density | Optional | comfortable |
compact, comfortable, spacious |
Steps:
- If user gives a color name (e.g., "blue", "coral"), convert it to a hex value first.
- Convert any hex/rgb color to OKLCH using the algorithm in color-system.md.
- Present a summary of all parameters to the user and ask for confirmation.
- If the user says "just use defaults" or gives only a color, proceed with defaults for all optional fields.
What ships with it
9 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.
- references/color-system.md 5.9 KB
- references/component-patterns.md 12 KB
- references/dark-mode-guide.md 6.3 KB
- references/spacing-system.md 4.5 KB
- references/typography-scale.md 4.3 KB
- templates/components.css.tmpl 14 KB
- templates/preview.html.tmpl 18 KB
- templates/tokens.css.tmpl 8.9 KB
- templates/tokens.json.tmpl 6.0 KB
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 10d ago First seen · 257 lines · 139 tokens per session scan A 4fa962a861fa
design-system-generator is a skill published in the GitHub repository XINGANLIU/design-system-generator-skill (1 stars, last pushed 3mo ago), licensed Apache-2.0. It adds 139 tokens to every session and 2,727 once invoked, about $0.0007 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-31.
Other skills, from other repositories
designlang-tokens
Use when styling UI for cal.com — references the extracted design system tokens instead of inventing colors, spacing, or typography.
brandmd
Extract a website's design system into a DESIGN.md file. Use when starting a new frontend project, rebuilding a site, or when the user wants AI-generated UI to match an existing brand.
google-fonts
Google Fonts typography system generator. Suggests single fonts (strict mode) and font pairs (contrast mode) with complete typographic scales following Tailwind Typography rhythm concepts. Generates CSS custom properties, Tailwind config, and embed links. Trigger: "choose a font", "font pairing", "typography system"…
frontend-design
Use this skill when specifying, designing, or documenting UI components, layouts, and design systems for frontend implementation. Trigger phrases: 'design this UI component', 'create a responsive layout', 'spec the CSS for', 'design system for'. Do NOT use for backend development, server-side logic, data engineering…
color-audit
Color-only audit that extracts, evaluates, and recommends improvements for the project's color system. Use when the user asks to audit colors, run a color review or color audit, fix their colors, or work on the color palette or color system.
theme-builder
Build a light/dark theme from scratch or improve an existing one, with a complete surface, text, and interactive color system. Use when the user asks to build or create a theme, use the theme builder, or set up a light and dark theme.