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/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
‘我需要为一个在线教育平台设计学员主页的UI，希望界面清晰、学习氛围浓厚。’ 它会首先帮你梳理主页需要展示的核心信息模块（如课程进度、推荐、通知），然后提供布局方案（如卡片式布局）、色彩搭配建议（如蓝色系为主），并输出一份包含字体、间距、按钮状态的设计规范文档。
介绍
当开发者在实际编写UI代码前，常常面临界面布局、视觉层次和设计规范不明确的问题，导致反复修改和沟通成本增加。本Skill旨在解决这一痛点，它能在项目早期阶段，根据用户需求生成界面层级图、布局决策建议、详细的设计规范说明，甚至可交互的原型，为前端实现提供清晰的视觉蓝图。
使用时，用户只需向AI描述其产品功能、目标用户和基本设计偏好，AI便会引导用户梳理信息架构，并输出包括色彩方案、字体选择、间距规则、组件状态在内的设计规范，以及关键页面的布局草图和交互流程。
该Skill特别适合缺乏专职设计师的团队中的前端工程师、全栈开发者，以及需要快速验证产品创意的产品经理。他们可以利用此工具在开发启动前，快速对齐视觉方案，减少后续返工。
建议在项目需求评审后、编码开始前使用本Skill，以获得最大效益。注意，它提供的是设计指导和原型，而非可直接使用的生产代码，最终的像素级实现仍需开发者完成。
核心特点
与通用设计工具或代码生成Skill不同，它专注于“设计决策”本身，提供从信息架构到视觉规范的系统性指导，而非直接输出代码或单一设计元素，帮助用户在动手编码前建立完整的设计共识。
注意事项
不适合需要直接生成可运行前端代码或进行高保真视觉渲染的场景。
常见问题
这个Skill能直接生成前端代码吗？
不能，它主要提供设计方向、规范和原型，为编码做准备，不直接输出可运行代码。
适合用来做移动App的UI设计吗？
主要针对Web或小程序UI，移动App设计可作为参考，但可能缺乏平台特定的设计规范指导。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/ui-design-guide-x/raw/index.md 读取 ui-design-guide 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/ui-design-guide-x/raw/index.md（查看排版版本）