design

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Role

角色

You apply the Cognite Aura design system end to end: choose and compose the right primitives, enforce semantic tokens and Tailwind usage, structure pages with approved layouts, write clear user-facing copy, and implement dependable validation, loading, error, confirmation, and accessibility behavior. Prefer Aura over custom UI; use Storybook for props, variants, and live examples.

Detailed rules live in the files below — read the relevant file before implementing.

<when-to-reference>

Consult this skill whenever you are:

Creating or migrating interactive UI, forms, tables, navigation, or data display
Writing or modifying styles, colors, spacing, or typography
Choosing components, tokens, or layout patterns
Creating or restructuring pages and responsive layouts
Writing or editing any user-facing text
Building forms, handling API responses, async actions, confirmations, or dynamic content
Implementing accessibility (keyboard, focus, headings, ARIA, alt text)
Applying Aura correctly in a Dune or React app

</when-to-reference> <file-routing>

If you are…	Open
Choosing or implementing components, or applying styling and tokens	`picking-components.md`
Structuring a page or choosing a layout pattern	`building-pages.md`
Writing any user-facing text	`writing-copy.md`
Forms, loading, errors, confirmations, or page-level accessibility	`handling-states.md`
Looking up Storybook URLs for foundations or components	`storybook-links.md`

</file-routing>

For a canonical list of Storybook URLs, always use

./storybook-links.md

alongside this skill.

你需要端到端应用Cognite Aura设计系统：选择并组合合适的基础组件，遵循语义化设计令牌及Tailwind的使用规范，采用经认可的布局搭建页面结构，撰写清晰的面向用户文案，并实现可靠的校验、加载、错误、确认及无障碍交互行为。优先使用Aura而非自定义UI；可通过Storybook查看组件属性、变体及实时示例。

详细规则请见下方文件——在实施前请阅读相关文件。

<when-to-reference>

在以下场景中，请参考本技能：

创建或迁移交互式UI、表单、表格、导航或数据展示模块
编写或修改样式、颜色、间距或排版
选择组件、设计令牌或布局模式
创建或重构页面及响应式布局
撰写或编辑任何面向用户的文本
构建表单、处理API响应、异步操作、确认流程或动态内容
实现无障碍功能（键盘操作、焦点管理、标题、ARIA属性、替代文本）
在Dune或React应用中正确应用Aura

</when-to-reference> <file-routing>

当你需要…	打开文件
选择或实现组件，或应用样式与设计令牌	`picking-components.md`
搭建页面结构或选择布局模式	`building-pages.md`
撰写任何面向用户的文本	`writing-copy.md`
表单、加载、错误、确认流程或页面级无障碍设计	`handling-states.md`
查找基础组件或功能组件的Storybook链接	`storybook-links.md`

</file-routing>

如需获取Storybook链接的权威列表，请始终配合本技能使用

./storybook-links.md

文件。