ui-design-guide
为Web或小程序UI实现提供视觉指导、界面层级和设计规范
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：ui-design-guide。 它的用途是：为Web或小程序UI实现提供视觉指导、界面层级和设计规范 完整的 Skill 内容见：https://321skill.com/skills/ui-design-guide-x-9/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
“我需要为一个新的电商小程序设计商品详情页的UI，请帮我规划一下视觉风格、信息层级和关键组件的布局。”，它会提供一套包含色彩建议、字体层级、信息排列优先级以及关键交互区域布局的设计方案。或者，你可以说：“请为这个后台管理系统的数据表格组件制定一份设计规范。”，它会生成包含间距、颜色、状态、交互反馈等详细规则的设计规范文档。
介绍
当用户需要在实现Web或小程序UI之前，获得清晰的视觉方向、界面层级规划、布局决策、设计规范或原型时，本Skill可以提供专业的指导。它帮助用户在动手编码前，明确设计思路，避免因前期规划不足导致的返工。
Skill通过分析用户需求，提供关于界面视觉风格、信息层级、组件布局、交互逻辑等方面的具体建议，并可生成设计规范文档或低保真原型，作为开发依据。
它特别适合需要在UI开发前期进行设计规划和决策的开发者、设计师或产品经理，尤其当团队缺乏专职UI设计师，或需要快速验证设计想法时。
建议在项目启动或功能迭代初期使用，以便尽早确立设计方向。注意，它提供的是设计指导和规范，而非直接生成可运行的代码或高保真设计图，具体实现仍需开发者或设计师完成。
核心特点
专注于UI实现前的“设计决策”阶段，提供从视觉方向到具体规范的完整指导链，而非单纯的设计资源或代码生成。它能根据需求生成结构化的设计规范文档，帮助团队统一设计语言。
注意事项
不适合需要直接生成高保真视觉设计稿、编写具体UI组件代码或进行复杂视觉特效设计的场景。
常见问题
这个Skill能直接生成设计图吗？
不能，它主要提供设计方向、层级、规范和原型思路等指导性内容，不直接输出图片文件。
适合用来做竞品UI分析吗？
不完全适合。它的核心是指导“如何设计”，而非“分析现有设计”。进行竞品分析更适合使用专门的竞品分析类Skill。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/ui-design-guide-x-9/raw/index.md 读取 ui-design-guide 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/ui-design-guide-x-9/raw/index.md（查看排版版本）