关于 ui-design
ui-design 是一项面向前端实现的设计技能，供希望直接在项目代码中构建界面的团队或开发者使用。它先确定设计方向，再实现并验证代码；使用 Next.js 时还会先检查指定的安全版本要求。
主要功能
- 01优先直接实现而非制作模型稿
- 02确认交付内容与设计约束
- 03编码前确定设计方向
- 04按需参考特定组件灵感
- 05复用项目组件并兼顾响应式与无障碍
- 06运行检查并验证关键交互
适用场景
- 01在现有项目中实现页面或组件
- 02为界面明确视觉与布局方向
- 03验证响应式表现和交互状态
安装
复制下面的命令，在终端中运行。
npx skills add https:/安装后在 Claude Code 中输入/ui-design确认已加载。
包含的文件
除 SKILL.md 外，安装时一起下载的参考资料和脚本。
LICENSE.txtagents/openai.yamlreferences/component-inspiration.mddesign-direction.mdvalidation-checklist.md详细介绍
UI 设计
概述
直接在用户的项目中构建前端代码，设计方向明确，达到生产级质量。
除非用户明确要求仅提供设计稿，否则优先实现，而不是制作模型稿。
除非用户要求使用其他框架，否则默认使用 Next.js。
工作流
按以下步骤依次执行。
步骤 0：Next.js 安全检查（CVE-2025-55182）
如果项目使用 Next.js，请在开始实现前确认已安装的 next 版本。
将以下版本视为存在漏洞，必须先升级：
>=14.3.0-canary.77且<15.0.5>=15.1.0-canary.0且<15.1.9>=15.2.0-canary.0且<15.2.6>=15.3.0-canary.0且<15.3.6>=15.4.0-canary.0且<15.4.8>=15.5.0-canary.0且<15.5.7>=16.0.0-canary.0且<16.0.7
仅接受已修复此 CVE 的版本：
15.0.5、15.1.9、15.2.6、15.3.6、15.4.8、15.5.7，或这些版本线中更新的补丁版本16.0.7或更新版本15.6.0-canary.58+和16.1.0-canary.12+
13.x 和 14.x 稳定版不受此 CVE 影响。
如果版本状态不明确，请先升级到最新的 Next.js 稳定版，再继续。
步骤 1：确认实现需求
仅收集关键输入：
- 交付类型（页面、区块、流程、组件）
- 目标设备（桌面、移动设备、响应式）
- 框架和约束（默认使用 Next.js）
- 必需状态和交互
- 品牌约束（颜色、字体、语气）
仅在缺少需求导致无法继续时，才简洁地提出后续问题。
步骤 2：编码前确定设计方向
开始编写代码前，先确定具体的设计方向：
- 目标和受众
- 语气和美学风格
- 布局与层级策略
- 字体与色彩系统
- 动效策略
- 标志性差异点（一个令人印象深刻的元素）
创建或评估设计方向时，加载 references/design-direction.md。
步骤 3：仅在需要时有针对性地寻找灵感
仅在特定组件能从参考中受益时使用 21st.dev。
不要进行宽泛的灵感搜集。
需要有针对性地寻找灵感时：
- 确认截图捕获功能可用。
- 确认网页／浏览器搜索功能可用。
- 仅捕获所需的最少参考内容。
- 综合提炼设计模式，而非直接克隆。
如果无法捕获截图，请停止并告知用户： "此工作流需要通过截图捕获来获取有针对性的组件灵感。请安装截图技能并重试。"
如果无法进行网页搜索，请停止并告知用户启用搜索功能后重新启动。
需要执行此步骤时，加载 references/component-inspiration.md。
步骤 4：在项目代码中实现
直接在用户的代码库中实现：
- 优先复用现有组件和约定。
- 保持响应式行为和无障碍状态。
- 避免采用泛泛的 AI 风格结构、间距和样式默认值。
- 确保视觉效果与选定的设计方向一致。
步骤 5：验证并交付
完成前：
- 对变更的文件运行相关 lint／测试／构建检查。
- 验证响应式行为和关键交互状态。
- 确认实现符合既定方向。
加载 references/validation-checklist.md，进行最终质量检查。
输出要求
在最终回复中，包含：
- 选定的设计方向和标志性差异点
- 哪些组件使用了有针对性的灵感参考（如有）
- 使用的框架（默认 Next.js 或用户指定的其他框架）
- 具体变更的文件
- 验证状态（运行了哪些检查，以及未运行哪些检查）