ns-frontend-design

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Frontend Design

前端设计

Ship distinctive, production-grade UI — not interchangeable template aesthetics.

交付独特的生产级UI——而非千篇一律的模板化审美。

Session boot

会话启动

See

../ns-harness/references/session-boot.md

. Read

.nextstage-harness/rules/architecture-rules.md

and layer-specific frontend rules when present.

请查看

../ns-harness/references/session-boot.md

。若存在

.nextstage-harness/rules/architecture-rules.md

及特定于前端的分层规则，请一并阅读。

Context to load

需加载的上下文

File	When
`docs/context/design-brief.md`	Always check first — tokens, typography, motion
`docs/context/stack-confirmed.md`	Framework and CSS approach
`.nextstage-harness/rules/frontend`	Project conventions

design-brief.md

is missing, infer stack from architecture rules and ask one focused question on brand direction before large UI work.

文件	加载时机
`docs/context/design-brief.md`	始终优先检查——包含设计令牌、排版、动效相关内容
`docs/context/stack-confirmed.md`	框架及CSS实现方案
`.nextstage-harness/rules/frontend`	项目约定规范

若

design-brief.md

缺失，请从架构规则中推断技术栈，并在开展大规模UI工作前提出一个聚焦品牌方向的问题。

When to use

使用场景

New pages, layouts, or component libraries
Visual refresh of existing screens
Design-brief alignment or token application
Reducing "generic AI UI" (purple gradients, identical card grids)

新页面、布局或组件库开发
现有界面的视觉刷新
设计简报对齐或设计令牌应用
减少“通用AI生成UI”（如紫色渐变、雷同卡片网格）

Workflow

工作流程

Audit — screenshot or read existing UI patterns in the codebase; note framework (React, Vue, Blade, etc.).
Anchor — apply
```
design-brief.md
```
or establish a minimal direction (type scale, spacing, accent, motion level).
Design — composition, hierarchy, states (hover, focus, empty, error), responsive breakpoints.
Implement — minimal diff; match project file structure and naming.
Verify — keyboard focus, contrast, reduced-motion respect.

See

references/anti-slop.md

and

references/checklist.md

审计——截图或阅读代码库中现有UI模式；记录所使用的框架（React、Vue、Blade等）。
锚定——应用
```
design-brief.md
```
中的规范，或确立基础设计方向（字体层级、间距、强调色、动效等级）。
设计——完成布局构图、层级划分、状态设计（悬停、聚焦、空状态、错误状态）及响应式断点设置。
实现——最小化代码差异；匹配项目文件结构与命名规范。
验证——检查键盘聚焦、对比度、是否遵循减少动效的设置。

请查看

references/anti-slop.md

和

references/checklist.md

。

Principles

设计原则

One strong visual idea per screen — not every trend at once.
Typography carries hierarchy — do not rely on color alone.
Motion with purpose — micro-interactions for feedback, not decoration loops.
Accessible by default — semantic HTML, labels, focus rings.

每个界面一个核心视觉理念——不盲目堆砌所有流行趋势。
通过Typography构建层级——不单独依赖颜色区分层级。
动效服务于目的——微交互用于提供反馈，而非无意义的循环装饰。
默认无障碍——使用语义化HTML、标签、聚焦环。

Integration with ns-spec-driven

与ns-spec-driven的集成

When invoked from the SDD face skill, stay scoped to UI tasks — do not expand into requirements or task generation.

当从SDD face skill调用时，请专注于UI任务——不要扩展至需求编写或任务生成。

Forbidden

禁用场景

Backend API design or database schema
Replacing
```
ns-reviewer
```
for MR gates
Ignoring project CSS/component conventions when they exist

后端API设计或数据库schema
替代
```
ns-reviewer
```
用于MR门禁检查
忽略已有的项目CSS/组件约定