Back to Details

design-system-aware

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Design System Aware Code Generation

支持设计系统感知的代码生成

When writing or editing React/Next.js frontend code in this project, follow these rules:

在本项目中编写或编辑React/Next.js前端代码时，请遵循以下规则：

Before Writing Code

编写代码前

Check if
```
design-tokens.json
```
exists at the project root.
If it exists, read it and use it as the source of truth for all design decisions.
Check the
```
components
```
section before creating any new component — reuse what exists.

检查项目根目录下是否存在
```
design-tokens.json
```
文件。
如果该文件存在，读取并将其作为所有设计决策的唯一可信来源。
创建任何新组件前先检查
```
components
```
目录——复用已有的组件。

Token Usage

令牌使用规范

All colors, spacing, font sizes, shadows, and border radii must come from
```
design-tokens.json
```
.
Never hardcode design values. No raw hex colors, no magic number padding or margins.
Use the project's styling approach as specified in
```
styling_approach
```
.

所有颜色、间距、字体大小、阴影、圆角数值都必须来自
```
design-tokens.json
```
。
禁止硬编码设计数值。不要直接写十六进制颜色，不要使用无意义的魔数作为内边距或外边距。
按照
```
styling_approach
```
中指定的方案使用项目的样式处理方式。

Component Reusability

组件可复用性要求

If a UI pattern appears more than once, extract it into a reusable component.
New components must be props-driven. No hardcoded content inside components.
Compose complex UI from small pieces: a
```
PageHeader
```
uses
```
Heading
```
+
```
Breadcrumbs
```
+
```
ActionBar
```
.

如果某个UI模式出现超过一次，将其抽离为可复用组件。
新组件必须是props驱动的。组件内部不能有硬编码的内容。
用小组件组合出复杂UI：例如
```
PageHeader
```
由
```
Heading
```
+
```
Breadcrumbs
```
+
```
ActionBar
```
组合而成。

SOLID

SOLID原则

Single Responsibility: One component, one job.
Open/Closed: Extend via props and composition, not source modification.
Interface Segregation: Don't bloat props. Split if needed.
Dependency Inversion: Depend on props and hooks, not concrete implementations.

单一职责原则：一个组件只负责一项功能。
开闭原则：通过props和组合实现扩展，不要修改原有源码。
接口隔离原则：不要让props过于臃肿。必要时进行拆分。
依赖倒置原则：依赖props和hooks，而非具体的实现逻辑。

DRY

DRY原则

Shared logic → custom hooks.
Shared layout → layout components.
Shared styles → design tokens.
No copy-paste between components.

公共逻辑 → 自定义hooks。
公共布局 → 布局组件。
公共样式 → design tokens。
禁止在组件之间复制粘贴代码。