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 agentmods add skills/echovic/boss-skill/design-systemnpx skills add echoVic/boss-skill --skill design-systemgit clone --depth 1 https://github.com/echoVic/boss-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/echovic/boss-skill/design-system)<a href="https://agentmods.dev/skills/echovic/boss-skill/design-system"><img src="https://agentmods.dev/badge/skills/echovic/boss-skill/design-system.svg" alt="Measured on agentmods" 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 | $0.00030 | $0.02919 |
| Opus 5 | $0.00015 | $0.01460 |
| Sonnet 5 | $0.00006 | $0.00584 |
| Haiku 4.5 | $0.00003 | $0.00292 |
Grade A, and why
ui-designer/design-system 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 4d 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 — 249 lines — stays where its author put it; the contents beside it link to each section on GitHub.
设计系统规范
适用场景
在开始具体的页面和组件设计前，需要先建立统一的设计系统，确保整个产品的视觉和交互一致性。
设计系统的价值
- 一致性：确保产品各部分视觉和交互统一
- 效率：设计师和开发者使用统一的设计语言，减少沟通成本
- 可维护性：修改设计token即可全局更新
- 可扩展性：新功能可以快速复用现有组件
设计系统组成
1. 颜色系统
品牌色
| 名称 | 色值 | 用途 | 示例场景 |
|---|---|---|---|
| Primary | #3B82F6 |
主要操作、强调 | 主按钮、链接、选中状态 |
| Primary-hover | #2563EB |
主色悬停态 | 按钮悬停 |
| Primary-active | #1D4ED8 |
主色按下态 | 按钮按下 |
| Primary-light | #DBEAFE |
主色浅色背景 | 标签背景、高亮区域 |
中性色
| 名称 | 色值 | 用途 |
|---|---|---|
| Gray-900 | #111827 |
标题文字 |
| Gray-800 | #1F2937 |
重要文字 |
| Gray-700 | #374151 |
正文文字 |
| Gray-600 | #4B5563 |
次要文字 |
| Gray-500 | #6B7280 |
辅助文字 |
| Gray-400 | #9CA3AF |
占位文字 |
| Gray-300 | #D1D5DB |
边框、分割线 |
| Gray-200 | #E5E7EB |
浅边框 |
| Gray-100 | #F3F4F6 |
背景 |
| Gray-50 | #F9FAFB |
浅背景 |
| White | #FFFFFF |
卡片背景、主背景 |
语义色
| 名称 | 色值 | 用途 | 背景色 |
|---|---|---|---|
| Success | #10B981 |
成功状态 | #D1FAE5 |
| Warning | #F59E0B |
警告状态 | #FEF3C7 |
| Error | #EF4444 |
错误状态 | #FEE2E2 |
| Info | #3B82F6 |
信息提示 | #DBEAFE |
颜色使用原则：
- 主色用于主要操作和强调，不要滥用
- 中性色用于文字和背景，建立清晰的层次
- 语义色用于状态反馈，保持一致性
- 确保颜色对比度符合WCAG AA标准（≥4.5:1）
2. 字体系统
字体家族
/* 无衬线字体（主要） */
--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
"Helvetica Neue", Arial, "Noto Sans", sans-serif;
/* 等宽字体（代码） */
--font-mono: "SF Mono", Monaco, "Cascadia Code", "Courier New", monospace;
字体层级
| 层级 | 字号 | 行高 | 字重 | 用途 | CSS 变量 |
|---|---|---|---|---|---|
| Display | 48px | 1.1 | 700 | 大标题、落地页 | --text-display |
| H1 | 32px | 1.2 | 700 | 页面标题 | --text-h1 |
| H2 | 24px | 1.3 | 600 | 区块标题 | --text-h2 |
| H3 | 20px | 1.4 | 600 | 小标题 | --text-h3 |
| H4 | 18px | 1.4 | 600 | 卡片标题 | --text-h4 |
| Body | 16px | 1.5 | 400 | 正文 | --text-body |
| Body-sm | 14px | 1.5 | 400 | 辅助文字 | --text-body-sm |
| Caption | 12px | 1.4 | 400 | 说明文字、标签 | --text-caption |
字体使用原则：
- 标题使用较大字号和较重字重，建立层次
- 正文使用16px，确保可读性
- 行高保持1.4-1.6，确保舒适阅读
- 不要使用过多字号，保持简洁
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.
- 4d ago First seen · 249 lines · 30 tokens per session scan A 2450618e2d9d
ui-designer/design-system is a skill published in the GitHub repository echoVic/boss-skill (553 stars, last pushed 4d ago), licensed MIT. It adds 30 tokens to every session and 2,919 once invoked, about $0.0002 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-30.
Other skills, from other repositories
large-workspace-handling
To partition large workspaces (100+ files) into scoped subagent tasks when context is insufficient.
example-skill
Example skill template used for the CreateHub template. You should never use this skill directly as it is just a template made to be updated.
bmad-github-story-dev
Set up a git worktree/branch (or reuse the current one) and run BMAD dev-story end-to-end: auto-commits per task, PR creation, label updates. Use when the user invokes the SD menu code in bmad help, or asks to start implementing the next ready story, or asks to begin dev on a story.
bmad-github-story-sync
Reconcile GitHub state with BMAD files — detect merged PRs, mark stories done in sprint-status.yaml and story files, sync GitHub labels, and clean up worktrees and branches. Use when the user invokes the SS menu code in bmad help, or asks to sync BMAD with GitHub, or just merged a PR and wants BMAD updated.
bmad-github-story-create
Sync GitHub state then plan the next story end-to-end via the BMAD create-story flow. Detects blocking dependencies via GitHub labels and updates the GitHub issue label to ready. Use when the user invokes the SC menu code in bmad help, or asks to plan/create the next story, or asks to start the next BMAD story.
bmad-github-story-review
Run BMAD adversarial code review on the current story branch and push fixes. Does NOT mark the story done — the user merges the PR on GitHub. Use when the user invokes the SR menu code in bmad help, or asks to code-review the current story, or asks for an adversarial review of the open story PR.