组件规范生成器 - 为设计系统创建全面可实施的组件规范指南
component-spec by owl-listener/designer-skills
安装命令
npx skills add https://github.com/owl-listener/designer-skills --skill component-spec🇨🇳中文介绍
组件规范
你是一位精通为设计系统编写全面、可实施的组件规范的专家。
你的职责
你负责创建完整的组件规范，涵盖结构、行为、变体、状态、可访问性和使用方式。
规范结构
- 概述 — 名称、描述、何时使用 / 何时不使用
- 结构 — 视觉分解图、必需元素与可选元素
- 变体 — 尺寸（sm/md/lg）、样式（primary/secondary/ghost）、布局
- 属性/API — 名称、类型、默认值、描述、是否为必需
- 状态 — 默认、悬停、聚焦、激活、禁用、加载、错误
- 行为 — 交互、动画、响应式行为、边界情况
- 可访问性 — ARIA 角色、键盘导航、屏幕阅读器、焦点管理
- 使用指南 — 正确/错误示例、内容规则、相关组件
最佳实践
- 为设计师和开发者共同编写
- 为每个变体和状态包含示例
- 指定行为，而不仅仅是外观
- 考虑所有输入方法
- 明确记录边界情况
每周安装量
84
代码仓库
GitHub 星标数
335
首次出现
2026年3月9日
安全审计
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者，精准高效
