agentmods.dev

02-设计规范

02-设计规范 is a skill for Codex from xcodethink/open-claude-code-skills. It costs 201 tokens per session (1,605 once invoked), scanned A, original, MIT.

A set of standards for designing public web interfaces, including layout, colors, typography, interaction states, animation, and accessibility.

In plain words
What is it for?
Use it when creating or restyling landing pages, product pages, sign-in screens, marketing pages, pricing pages, or other public-facing UI. It also provides checks for accessibility and visual quality.
Why use it?
It gives developers consistent design values and interaction patterns, reducing guesswork and common usability problems such as missing loading or focus states.

Skill for Codex

Written for Codex: agents/openai.yaml present.

not rated 2repo 2mo ago A scan 201 tokens original MIT

Good fit Use it when creating or restyling landing pages, product pages, sign-in screens, marketing pages, pricing pages, or other public-facing UI. It also provides checks for accessibility and visual quality.

Compare 6 skills from other repositories ↓
Install with agentmods
npx agentmods add skills/xcodethink/open-claude-code-skills/02
View source ↗ xcodethink/open-claude-code-skills
Install

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.

Any agent
npx skills add xcodethink/open-claude-code-skills --skill 02
Clone the repo
git clone --depth 1 https://github.com/xcodethink/open-claude-code-skills

Made for: Codex.

Wrote 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.

agentmods badge for 02-设计规范

README.md
[![agentmods](https://agentmods.dev/badge/skills/xcodethink/open-claude-code-skills/02/github.svg)](https://agentmods.dev/skills/xcodethink/open-claude-code-skills/02)
Your own site
<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/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.

agentmods 80×15 button for 02-设计规范

Your own site · 80×15
<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="Reviewed on agentmods" width="80" height="20"></a>
Per session 201 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 1,605 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. A grade says what 26 rules found in the file — not that it is safe.
Origin original No closer match found in the catalogue.
Token cost

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.

ModelPer sessionOnce invoked
Fable 5.1 $0.00201 $0.01605
Opus 5.5 $0.00080 $0.00642
Sonnet 5.5 $0.00040 $0.00321
Haiku 4.5 $0.00020 $0.00161

Measured 1mo ago against content hash 7c348f9aaf54, method: parsed. Prices are Anthropic first-party input rates as of 2026-10-07, from the pricing page.

Security

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 1mo ago.

The scan reads SKILL.md. This mod also ships 1 executable file (品牌视觉/工具/render.sh), listed below but not scanned — reading those needs a real analyzer, not pattern matching.

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.

skills/02-设计规范/SKILL.md · 108 lines

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 模板 + 质量门禁） ★★★

Read the full file on GitHub · 108 lines

Files

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.

Changes

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.

  1. 1mo ago First seen · 108 lines · 201 tokens per session scan A 7c348f9aaf54

Subscribe to this mod's changes

02-设计规范 is a skill published in the GitHub repository xcodethink/open-claude-code-skills (2 stars, last pushed 2mo ago), licensed MIT. It adds 201 tokens to every session and 1,605 once invoked, about $0.0008 per session on Opus 5.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.

CSS and stylingClaude CodeDesign and UXFrontendai-agentsai-codingcoding-standardsdeveloper-toolsengineering-standards
Related

Other skills, from other repositories

frontend-design

Generates distinctive, production-grade frontend interfaces and artifacts (React, Vue, HTML/CSS). Prioritizes bold aesthetics, unique typography, and motion to avoid generic designs. Use when building websites, landing pages, dashboards, posters, or when the user requests to style, beautify, or create visually…

irahardianto/awesome-agv · 67 tokens

ui-web

Web UI - glassmorphism, Tailwind, dark mode, accessibility.

alinaqi/maggy · 17 tokens

frontend-ui-ux-system

A company-level guide for designing web interfaces and user experiences. It covers visual styles, design tokens (named values for colors, spacing, and typography), layout, interaction, accessibility, motion, and review checks.

hashgraph-online/awesome-codex-plugins · 60 tokens

accessibility

Use when making a web UI conform to WCAG 2.2 Level AA — axe-core or Lighthouse a11y violations, keyboard operability, focus management, ARIA roles/names/live regions, contrast, tap-target size. NOT palette or visual intent (that is design), NOT test-runner setup (that is testing-web), NOT LCP/page-speed (that is…

ericrisco/rsc-harness · 86 tokens

gsap

Expert guidelines for building high-performance animations with GSAP (GreenSock Animation Platform).

Mindrally/skills · 19 tokens

ring:validating-ux-completeness

Validating that UX specifications are complete before technical design: a read-only checklist over wireframes, states, responsive behavior, accessibility, and component-library alignment, emitting a DESIGN VALIDATED / NEEDS REVISION verdict to design-validation.md. Standalone utility — run after a product-designer…

LerianStudio/ring · 113 tokens