design-system-starter
构建无障碍设计系统
团队经常会创建不一致的 UI，因为令牌、组件和无障碍规则没有一起定义。此技能为产品团队之间可复用的设计系统提供了一个实用的入门框架。
下载技能 ZIP
在 Claude 中上传
前往 设置 → 功能 → 技能 → 上传技能
开启并开始使用
Agent 可读资源
当 AI Agent、爬虫或脚本需要干净上下文、而不是读取完整页面时，请使用这些链接。
测试它
正在使用“design-system-starter”。 我需要一个用于 SaaS 仪表板的设计系统基础。
预期结果:
- 一份令牌计划，涵盖中性色、品牌色、反馈色、间距、排版、圆角和层级决策。
- 一份组件清单，从按钮、输入框、标签、卡片、模态框、表格和导航开始。
- 一份文档大纲，包含每个组件的用法、变体、props、无障碍说明和示例。
正在使用“design-system-starter”。 在发布前审查我们的组件检查清单。
预期结果:
- 一份按优先级排序的审计，覆盖令牌、组件状态、无障碍、文档、测试、主题化和发布治理。
- 一份发布阻塞项、后续改进项以及设计和工程团队责任范围的列表。
正在使用“design-system-starter”。 帮助我设计一个主题切换器模式。
预期结果:
- 一种主题方案，使用语义化令牌、用户偏好持久化、系统偏好检测和无障碍控件标签。
- 关于在组件、焦点状态和对比度要求中测试浅色和深色模式的指南。
安全审计
低风险Static analysis reported many high-risk patterns, but context review found documentation examples, Markdown code fences, relative imports, design token color values, and public reference URLs. No malicious intent, credential access, command execution, data exfiltration, or prompt injection evidence was found. The only notable behavior is a benign example that stores a theme preference in localStorage.
低风险问题 (5)
质量评分
你能构建什么
启动产品设计系统
为新的产品 UI 创建初始令牌层级、组件清单和文档计划。
标准化前端组件
使用 React 模板和示例来统一组件 API、变体、无障碍和样式约定。
审计现有 UI 库
应用检查清单来识别缺失的令牌、薄弱的文档、无障碍缺口和治理问题。
试试这些提示
帮助我为一个 Web 应用定义一个入门级设计令牌结构。包括颜色、排版、间距、圆角和阴影。
使用设计系统入门框架，为我的产品仪表板提出原子、分子、组织体和页面模板。
审计这些计划中的组件是否存在 WCAG 2.1 AA 问题。重点关注对比度、键盘导航、标签和 ARIA 使用。
评估我当前的组件库，并为令牌、组件 API、主题化、文档和治理制定迁移计划。
最佳实践
- 从语义化令牌开始，这样品牌变更就不需要重写组件。
- 为每个组件记录无障碍行为，包括键盘支持和屏幕阅读器预期。
- 清晰地对变更进行版本管理，并在团队采用破坏性更新前提供迁移说明。
避免
- 不要在每个组件内部直接硬编码品牌颜色。
- 不要发布缺少禁用、加载、焦点、错误和空状态的组件。
- 不要在实现完成后把文档视为可选项。