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-8/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
'我正在开发一个电商小程序首页，需要设计一个清晰的产品展示区和流畅的购物流程，你能帮我规划一下界面层级和布局吗？'，它会分析你的需求，提供视觉焦点建议、信息流布局方案，并可能建议关键组件的设计规范。或者，你可以说：'根据这份低保真线框图，帮我制定一套颜色、字体和间距的设计规范。'
介绍
UI设计指南Skill旨在解决开发者在将设计稿转化为实际代码前，对视觉方向、界面层级、布局决策、设计规范和原型缺乏明确指导的问题。它帮助用户在动手编码前，明确设计意图和实现细节，避免因理解偏差导致的返工。
使用时，开发者或设计师只需向AI描述项目需求、设计目标或遇到的视觉难题，该Skill便能提供专业的界面设计指导，包括但不限于布局建议、组件选择、视觉层次构建、设计规范制定以及原型草图的构思。
该Skill非常适合前端开发、全栈开发和UI设计师，尤其是那些需要快速验证设计可行性、确保UI实现与设计稿一致，或在缺乏专业设计师支持时仍需保证界面质量的团队成员。
使用建议是，在项目早期或UI评审阶段积极使用，以便尽早发现问题。注意事项是，它主要提供设计层面的指导和思路，不直接生成可运行的代码，最终实现仍需开发者完成。
核心特点
专注于UI实现前的设计决策与规范制定环节，提供从视觉方向到具体布局的完整设计指导，而非简单的代码生成或组件库推荐。它弥合了设计稿与代码实现之间的理解鸿沟。
注意事项
不适合需要直接生成可运行前端代码或进行复杂视觉艺术创作的场景。
常见问题
这个Skill能直接生成UI代码吗？
不能，它主要提供设计指导、布局建议和规范制定，帮助您理清思路，但代码实现需要您或开发团队完成。
适合用来做高保真视觉设计吗？
更适合做设计决策、规范制定和原型构思，对于追求极致视觉细节和艺术风格的高保真设计，仍需专业设计工具和设计师。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/ui-design-guide-x-8/raw/index.md 读取 ui-design-guide 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/ui-design-guide-x-8/raw/index.md（查看排版版本）