claude-design-skill
一个帮助AI在UI设计时保持决策一致性和视觉层级的技能。
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：claude-design-skill。 它的用途是：一个帮助AI在UI设计时保持决策一致性和视觉层级的技能。 完整的 Skill 内容见：https://321skill.com/skills/claude-design-skill-dammyjay93/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
'请帮我设计一个数据监控仪表盘的首页。'，它会先加载或询问你的设计系统偏好（如间距基数、主色调），然后基于这些原则生成具有一致视觉层级的HTML/CSS代码，确保按钮、卡片、图表容器等元素的样式遵循同一套规范。
介绍
该技能旨在解决AI辅助UI开发时设计决策易丢失、不一致的问题。当AI（如Claude Code）进行界面设计时，每次会话都可能产生随机的间距、颜色和组件样式，导致最终界面零散、不专业。
技能通过创建一个.interface-design/system.md文件来记录和保存设计决策，如间距网格、颜色方案、组件规范等。当技能被调用时，它会加载这个系统文件，并基于其中定义的原则来指导后续的UI构建，确保按钮高度、卡片内边距、阴影效果等在整个会话中保持一致。
它特别适合需要构建仪表盘、管理后台、工具类应用等复杂界面的开发者或设计师。对于追求界面统一性和专业度的项目，此技能能显著提升AI产出代码的视觉质量。
建议在项目初期或开始设计新模块时启用该技能，以建立和固化设计系统。请注意，它主要服务于功能性界面，不适用于营销类网站或一次性原型设计。
核心特点
与普通UI设计提示词不同，它通过持久化存储设计系统文件（system.md）来“记忆”设计决策，确保跨会话的一致性；并且当有图像生成工具可用时，能生成视觉方向板和参考图，提供更直观的设计指导。
注意事项
该技能主要针对功能性界面（如仪表盘、工具应用），不适用于营销网站或需要高度创意化视觉表现的设计场景。
常见问题
这个技能能帮我生成设计稿图片吗？
当你的AI工具支持图像生成时，它可以用来探索视觉方向、生成UI参考图或进行涂改分析，但核心是指导代码层面的UI实现。
安装后如何调用？
在支持的AI编码代理（如Claude Code）中，通常可以输入 `/interface-design` 来直接调用该技能。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/claude-design-skill-dammyjay93/raw/index.md 读取 claude-design-skill 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/claude-design-skill-dammyjay93/raw/index.md（查看排版版本）