关于 ns-frontend-design
ns-frontend-design 是用于构建或改进具有鲜明风格的生产级界面的前端技能。它引导开发者结合项目设计背景，处理视觉层级、响应式状态、实现和无障碍检查。
主要功能
- 01审查现有界面与项目规范
- 02应用设计简报和视觉令牌
- 03设计响应式布局与界面状态
- 04实施范围明确的前端改动
- 05检查键盘访问、对比度与动效
适用场景
- 01创建新页面或组件库
- 02改版现有界面
- 03将设计简报应用于界面
- 04构建 React 分析界面
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/ns-frontend-design确认已加载。
包含的文件
除 SKILL.md 外，安装时一起下载的参考资料和脚本。
evals/evals.jsonreferences/anti-slop.mdchecklist.mdreact-analytics-ui.md详细介绍
前端设计
交付别具一格、可用于生产环境的 UI——避免千篇一律的模板风格。
会话启动
参阅 ../ns-harness/references/session-boot.md。阅读 .nextstage-harness/rules/architecture-rules.md，以及适用时的分层前端规则。
需要加载的上下文
| 文件 | 时机 |
|---|---|
docs/context/design-brief.md | 始终先检查——设计令牌、字体排印、动效 |
docs/context/stack-confirmed.md | 框架和 CSS 方案 |
.nextstage-harness/rules/*frontend* | 项目约定 |
references/react-analytics-ui.md | React 技术栈，以及 KPI、图表、时间线、表格、数据来源和警报 |
如果缺少 design-brief.md，请根据架构规则推断技术栈，并在开展大规模 UI 工作前针对品牌方向提出一个有针对性的问题。
当技术栈为 React 且工作涉及仪表盘或分析 UI 时，请在实施前阅读 references/react-analytics-ui.md——默认图表库：Recharts。
适用场景
- 新建页面、布局或组件库
- 更新现有屏幕的视觉设计
- 使设计简报与设计保持一致，或应用设计令牌
- 减少“泛化的 AI UI”（紫色渐变、千篇一律的卡片网格）
工作流
- 审查——截取屏幕截图或阅读代码库中现有的 UI 模式；注明所用框架（React、Vue、Blade 等）。
- 确定方向——应用
design-brief.md，或确立精简的设计方向（字号层级、间距、强调色、动效程度）。 - 设计——布局、层级、状态（悬停、焦点、空状态、错误）和响应式断点。
- 实施——尽量减少差异；遵循项目的文件结构和命名方式。
- 验证——键盘焦点、对比度，以及对减少动态效果设置的支持。
参阅 references/anti-slop.md 和 references/checklist.md。
原则
- 每个屏幕只需一个鲜明的视觉创意——不要同时追逐所有潮流。
- 通过字体排印体现层级——不要只依赖颜色。
- 让动效服务于目的——用微交互提供反馈，而非循环装饰。
- 默认保证无障碍——使用语义化 HTML、标签和焦点环。
与 ns-spec-driven 的集成
从 SDD 面向用户的技能调用时，将范围限定在 UI 任务内——不要扩展到需求或任务生成。
禁止事项
- 后端 API 设计或数据库架构
- 在 MR 门禁环节中取代
ns-reviewer - 忽略项目现有的 CSS/组件约定
评论
支持 Markdown