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-3/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
“请为我的健身App设计一个‘运动记录’页面，包含运动类型选择、计时器、卡路里估算、进度条，输出设计规范。” 它会生成一个完整的UI设计稿，包括页面布局、颜色配色、字体大小、间距规范，并提供可复用的设计令牌（如颜色变量、间距变量），方便前端直接使用。
介绍
解决什么问题：UI设计指南Skill专注于为Web和小程序项目提供视觉方向、界面层级、布局决策、设计规格和原型。当你需要从零开始设计界面，或希望快速获得专业的设计规范时，它能够根据你的需求生成完整的UI设计稿，包括色彩、字体、间距、组件样式等设计令牌，确保设计一致性和可交付性。
怎么用：你只需描述你的产品类型、目标用户、核心功能或页面需求，比如“设计一个电商App的商品列表页，风格清新简约”，它就会输出包含布局草图、色彩方案、字体层级、交互说明的完整设计文档。你还可以要求它输出设计令牌（如CSS变量）或Figma/Sketch格式的导出建议。
适合谁：UI设计师、产品经理、前端开发人员。设计师可以快速获取灵感；产品经理可以验证功能布局；前端开发可以依据设计规范直接编码。
使用建议：建议在项目初期或界面迭代时使用，可以提供足够详细的上下文（如品牌色、竞品参考）以获得更精准的设计。注意它生成的是设计指南而非高保真交互原型，复杂交互需要进一步细化。
核心特点
与同类UI设计工具相比，它不仅能生成视觉布局，还能输出结构化的设计系统（如颜色、字体、间距、组件状态），并可直接用于Web和微信小程序等具体平台，减少从设计到开发的转换成本。
注意事项
不适合生成高保真可交互原型或复杂动效设计，需要手动实现细节。
常见问题
能生成Figma或Sketch文件吗？
目前输出为设计规范文档和CSS变量，可手动导入设计工具。
支持小程序设计吗？
支持，你只需指定平台（如微信小程序、支付宝小程序），它会生成符合平台规范的设计。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/ui-design-guide-x-3/raw/index.md 读取 ui-design-guide 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/ui-design-guide-x-3/raw/index.md（查看排版版本）