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/xcodethink/open-claude-code-skills/02npx skills add xcodethink/open-claude-code-skills --skill 02git clone --depth 1 https://github.com/xcodethink/open-claude-code-skillsWrote 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/xcodethink/open-claude-code-skills/02)<a href="https://agentmods.dev/skills/xcodethink/open-claude-code-skills/02"><img src="https://agentmods.dev/badge/skills/xcodethink/open-claude-code-skills/02.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.00201 | $0.01605 |
| Opus 5 | $0.00101 | $0.00803 |
| Sonnet 5 | $0.00040 | $0.00321 |
| Haiku 4.5 | $0.00020 | $0.00161 |
Grade A, and why
02-设计规范 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 — 108 lines — stays where its author put it; the contents beside it link to each section on GitHub.
设计规范 — UI/UX 标准应用库
定位： 这不是建议，是强制标准。所有 AI 输出的 UI 代码必须符合这套规范。 数据来源： Material Design 3 / Ant Design 5 / Tailwind CSS / Apple HIG / Shopify Polaris / IBM Carbon / shadcn-ui
开发 UI 时的必读流程
第一步：确认基础参数
→ 读取 DesignTokens-标准值.md（间距/字体/颜色/圆角/阴影/按钮尺寸/z-index）
- 所有数值必须从这个文件取，不允许凭感觉写
第二步：确认交互模式
→ 读取 交互模式-完整版.md（表单/导航/弹窗/Toast/数据展示/响应式/反馈）
- 每种交互有标准方案和精确 Tailwind 类，直接复用
第三步：确认动效
→ 读取 动效标准库.md（缓动/时长/入场/滚动/悬停/加载/页面转场/keyframes）
- 每种动效有 Framer Motion 和 Tailwind 代码，直接复制
第四步：质量自检 ★ 必须执行
→ 读取 质量自检清单.md
- P0 项全部通过才能交付
- 常见违规：按钮过大、没有 hover、没有 loading、顶格摆放
补充参考（按需）
- 选库选型 →
UI选型标准.md - 项目布局 →
布局模式/对应文档 - 基础交互 →
交互模式/对应文档（简版，完整版见交互模式-完整版.md） - 配色 →
色彩和字体.md（60/30/10 配色 + 对比度速查） - 无障碍 →
无障碍规范.md（WCAG 2.1 AA 完整清单） - 品牌写作 →
写作和品牌规范.md - 品牌 logo / wordmark / favicon / brand mark →
品牌视觉/（含 Anthropic/Stripe/Vercel/Cohere 真实 SVG 拆解、商业级标准、反模式清单、构造方法论、SVG 技术手册、品牌 brief 模板、质量门禁。做 logo 之前必读，否则会重蹈业余覆辙） - 设计系统 →
DESIGN-SYSTEM.md - 设计执行标准 →
UI_DESIGN_STANDARD.md
核心铁律（始终生效，不读详细文档也必须遵守）
尺寸铁律
按钮高度：admin h-8(32px)~h-9(36px) / landing h-9~h-10(40px) / Hero CTA h-12(48px) 最大
按钮文字：text-sm (14px)，禁止 text-base 或更大
按钮宽度：inline-flex，禁止 w-full（登录页除外）
输入框：与按钮等高
触摸目标：移动端 ≥ 44×44px
间距铁律
基础单位：4px grid
标准值：p-1(4) / p-2(8) / p-3(12) / p-4(16) / p-6(24) / p-8(32) / p-12(48)
页面边距：px-4(移动) / px-6(平板) / px-8(桌面)
区块间距：py-12 ~ py-24
禁止：随意数值如 p-[13px]、p-[17px]
动效铁律
用户触发动画 ≤ 300ms
最长动画 ≤ 500ms（Hero 特效除外）
所有可交互元素必须有 hover + focus 状态
必须支持 prefers-reduced-motion
禁止 linear 缓动（进度条除外）
完成度铁律
异步操作 → 必须有 loading 状态
列表/表格 → 必须有空状态
错误 → 必须有用户可见的提示
表单 → 必须有验证反馈
弹窗 → 必须有入场/退场动画
Emoji 铁律
正式页面禁止 emoji 做图标 → 用 Lucide/Heroicons SVG
仅允许：聊天内容、Toast 告警、内部工具提示
文件清单
| 文件 | 内容 | 优先级 |
|---|---|---|
DesignTokens-标准值.md |
间距/字体/颜色/圆角/阴影/断点/组件尺寸/z-index 精确值 | ★★★ |
动效标准库.md |
缓动/时长/入场/滚动/悬停/加载/转场 完整代码 | ★★★ |
交互模式-完整版.md |
表单/导航/弹窗/Toast/数据展示/响应式 完整标准 | ★★★ |
质量自检清单.md |
P0/P1/P2 三级检查项 + 常见违规速查 | ★★★ |
UI_DESIGN_STANDARD.md |
设计哲学 + 开发前清单 + 技术栈规范 | ★★☆ |
DESIGN-SYSTEM.md |
完整设计系统文档 | ★★☆ |
色彩和字体.md |
配色分布 + 对比度速查 + 风格预设 | ★★☆ |
UI选型标准.md |
组件库/图表/表格/图标选型 | ★☆☆ |
无障碍规范.md |
WCAG 2.1 AA 完整清单 | ★☆☆ |
写作和品牌规范.md |
品牌叙事 + 像素人形象 | ★☆☆ |
布局模式/ |
各平台布局标准 | ★☆☆ |
交互模式/ |
基础交互模式（简版） | ★☆☆ |
品牌视觉/ |
logo / wordmark / favicon 全套规范（商业级标准 + 反模式 + 构造方法论 + SVG 技术手册 + 真实参考库 + brief 模板 + 质量门禁） | ★★★ |
What ships with it
38 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.
- agents/openai.yaml 882 B
- DESIGN-SYSTEM.md 65 KB
- DesignTokens-标准值.md 24 KB
- SKILL.en.md 5.6 KB
- UI_DESIGN_STANDARD.md 26 KB
- UI_DESIGN_SUPPLEMENT.md 13 KB
- UI选型标准.md 3.4 KB
- 交互模式-完整版.md 43 KB
- 交互模式/列表交互.md 11 KB
- 交互模式/删除确认.md 127 B
- 交互模式/加载和反馈.md 9.4 KB
- 交互模式/表单交互.md 127 B
- 动效标准库.md 33 KB
- 区块模板库.md 67 KB
- 品牌视觉/README.md 5.5 KB
- 品牌视觉/SVG技术手册.md 10 KB
- 品牌视觉/参考库/anthropic-logo.png 8.8 KB
- 品牌视觉/参考库/anthropic-logo.svg 1.9 KB
- 品牌视觉/参考库/cohere-logo.png 3.7 KB
- 品牌视觉/参考库/cohere-logo.svg 5.3 KB
- 品牌视觉/参考库/stripe-logo-revised-2016.png 10 KB
- 品牌视觉/参考库/stripe-logo-revised-2016.svg 1.8 KB
- 品牌视觉/参考库/vercel-logo-black.png 11 KB
- 品牌视觉/参考库/vercel-logo-black.svg 1.1 KB
- 品牌视觉/参考库/索引.md 5.2 KB
- 品牌视觉/反模式清单.md 9.6 KB
- 品牌视觉/品牌brief模板.md 8.1 KB
- 品牌视觉/商业级标准.md 6.0 KB
- 品牌视觉/工具/render.sh 1.0 KB runs code
- 品牌视觉/构造方法论.md 11 KB
- 品牌视觉/质量门禁.md 5.7 KB
- 布局模式/web-管理后台.md 8.1 KB
- 形态UI标准库/README.md 4.2 KB
- 无障碍规范.md 10 KB
- 视觉特效库.md 85 KB
- 色彩和字体.md 3.1 KB
- 行业预设库.md 63 KB
- 质量自检清单.md 3.4 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.
- 4d ago First seen · 108 lines · 201 tokens per session scan A 7c348f9aaf54
02-设计规范 is a skill published in the GitHub repository xcodethink/open-claude-code-skills (2 stars, last pushed 29d ago), licensed MIT. It adds 201 tokens to every session and 1,605 once invoked, about $0.0010 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
frontend-design
Designs, builds, or refactors user-facing web or application interfaces with deliberate visual direction, typography, color and spacing tokens, content hierarchy, responsive behavior, accessible interaction states, and real rendered-surface verification. Use for pages, components, dashboards, landing pages, design…
design
Use for UI, UX, visual hierarchy, frontend-design judgment, references, redesigns, and design critique when the user's Emulo taste should guide the task. Do not use for unrelated execution or marketing/social writing alone.
design-system
Dotbot CRT/retro-futuristic design system: tokens, components, patterns, and anti-patterns for the control panel UI.
using-design-system
Ensures consistent use of X-components design system instead of Material3 when working on feature UI code. Automatically activates for Composable functions in feature modules or when user mentions UI/screens/components.
factory-design
Design-system discipline distilled across builds. Semantic token vocabulary (name intent, not palette position), CSS variables bridged into Tailwind, dark/light as a variable swap, single- vs two-layer token systems, component primitives as token consumers, when to promote a repeated utility cluster into a primitive…
design-conventions
Scan the current TS/React project's existing UI layer and write .claude/design-conventions.md — a project-specific visual design convention file that rules/typescript.md loads before UI work. Use when starting UI work in an existing project, when design conventions have drifted, or when --refresh is passed to merge in…