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