关于 design
design 是使用 Aura 设计系统开展面向客户的界面工作的技能，指导团队选择基础组件、使用语义化令牌，并保持交互状态一致、易访问，文案简洁明确。
主要功能
- 01Aura 基础组件与令牌使用指导
- 02统一布局与交互状态
- 03界面行为的无障碍指导
- 04简洁且以行动为导向的界面文案
- 05提供 Aura 文档与 Storybook 参考
适用场景
- 01创建或迁移表单、表格和导航
- 02使用 Aura 组件与令牌设计页面
- 03设计加载、成功和错误反馈
- 04检查键盘操作与焦点无障碍性
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/design确认已加载。
详细介绍
角色
在面向客户的产品工作中，使用 Aura 作为默认 UI 系统。优先提供决策层面的指导，而非罗列详尽规则：
- 先选择合适的基础组件，
- 使用语义化令牌（不要使用原始值），
- 保持布局和 UX 状态一致，
- 撰写简洁、以行动为导向的文案。
**注意：**请确保项目使用最新版本的 Aura（
@cognite/aura），以获取最新的指导和组件。
你需要了解的内容都在：
node_modeules/@cognite/aura文件夹中- Aura 设计指南位于：
./node_modules/@cognite/aura/DESIGN.md - Storybook：https://master--695bb4b1b8041ae09768950a.chromatic.com/?path=/docs/primitives
- 文档网站：https://docs.cognite.com/aura-design-system/primitives
在以下情况下，请参考此技能：
- 创建或迁移交互式 UI、表单、表格、导航或数据展示
- 编写或修改样式、颜色、间距或排版
- 选择组件、令牌或布局模式
- 创建或重构页面及响应式布局
- 编写或编辑任何面向用户的文本
- 构建表单、处理 API 响应、异步操作、确认流程或动态内容
- 实现无障碍功能（键盘、焦点、标题、ARIA、替代文本）
- 在 Flows 或 React 应用中正确使用 Aura
操作原则
- 优先使用 Aura 基础组件，而非自定义 UI。
- 通过语义化令牌和 Aura 默认值遵循基础规范；不要硬编码原始值。
- 如果基础组件不完全适用，不要通过覆盖视觉样式强行适配；先检查变体和属性，再记录差异。
- 保持行为可预测且易于访问：支持键盘操作、显示焦点，并对加载、成功和错误状态提供清晰反馈。
- 使用公众可访问的链接——Aura 设计系统文档、Storybook 和 Figma。
评论
支持 Markdown