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-7/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
'我正在开发一个社区团购小程序的主页，需要清晰展示商品、团长信息和下单入口，请帮我规划一下界面层级和布局。'，它会引导你思考核心功能模块的优先级，提出几种典型的布局方案（如卡片流、网格布局），并给出关键元素的视觉权重和间距建议，帮助你形成初步的设计规格。
介绍
UI设计指南Skill专注于解决开发者和设计师在项目初期面临的视觉方向不明确、界面层级混乱、布局决策困难等问题。它能在编写具体代码之前，为用户提供一套清晰的设计思路和视觉规范。
使用时，用户只需向AI描述其项目目标、目标用户或现有设计草稿，该Skill便会引导用户思考并输出界面层次结构、布局方案、设计规格说明，甚至生成可交互的原型概念，帮助将抽象需求转化为具体的视觉框架。
该Skill特别适合前端开发、全栈开发和UI设计师，尤其是那些需要快速验证界面可行性或缺乏专业设计支持的技术人员。它能在产品经理、设计师和开发者之间架起沟通的桥梁，确保视觉设计意图被准确理解。
建议在项目需求分析阶段或功能迭代设计初期使用。需要注意的是，它提供的是设计指导和规范，而非直接生成可用的设计源文件（如Figma或Sketch文件），最终实现仍需依赖专业设计工具或开发工作。
核心特点
与通用设计工具或代码生成Skill不同，它专注于设计前期的“决策”过程，通过结构化引导帮助用户明确视觉方向、信息层级和布局规范，填补了从需求到具体设计稿之间的空白。
注意事项
不适合需要直接生成高保真视觉设计稿或完整前端代码的场景。
常见问题
这个Skill能直接生成设计图吗？
不能，它主要提供设计方向、层级和规范的文字或结构化描述，帮助你理清思路，而非输出图片文件。
适合用来做竞品UI分析吗？
不完全适合。它的核心是指导“设计决策”，而非“分析”。对于竞品分析，建议使用专门的竞品分析或市场调研类Skill。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/ui-design-guide-x-7/raw/index.md 读取 ui-design-guide 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/ui-design-guide-x-7/raw/index.md（查看排版版本）