ui-design-guide
Web/小程序界面设计规范与原型指导
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：ui-design-guide。 它的用途是：Web/小程序界面设计规范与原型指导 完整的 Skill 内容见：https://321skill.com/skills/ui-design-guide-x-4/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
'我们正在设计一个面向年轻人的二手书交易小程序首页，需要展示推荐书籍、我的书架和搜索入口，请给出视觉层次和色彩方案。' 它会输出包含布局分区、主色/辅助色建议、字体大小层级、卡片组件样式以及空状态说明的完整设计规范，约300字，并附带设计令牌（如主色#FF6B35、圆角8px等）。
介绍
UI Design Guide 是一个专注于为 Web 和小程序提供视觉方向、界面层次、布局决策、设计规范及原型方案的 AI 技能。它解决的是开发前的设计模糊问题：当团队对界面风格、信息优先级、交互细节缺乏明确共识时，该技能能快速输出结构化的设计建议，帮助你从文字描述或需求文档过渡到可落地的视觉方案。
使用方式非常直接：只需描述你想要实现的功能页面或设计目标（例如“一个面向年轻人的电商首页”或“后台管理系统的数据看板”），AI 会依次给出布局建议、色彩方案、字体层次、组件规范以及关键交互说明。你也可以要求它生成设计令牌（Design Tokens）或直接输出 Sketch/Figma 风格的规范文档。
适合 UI 设计师、产品经理、前端开发人员以及需要快速验证界面方案的项目经理。尤其适用于团队缺乏专职设计师或设计资源紧张的场景，能够节省反复沟通和修改的时间成本。
注意：该技能不直接生成可交互的原型文件或代码，而是提供文字描述+结构化的设计规范。建议结合 Figma 或 Sketch 等工具进行视觉落地，同时注意针对特定平台（如 iOS、Android、微信小程序）时需额外补充平台相关的设计指南。
核心特点
不同于其他仅生成界面布局的 AI 技能，本技能会输出完整的设计系统（色彩、字体、间距、组件状态），并强调信息层级与用户决策路径，适合需要统一设计语言的团队。
注意事项
不适用于已有完整设计稿后的微调或动效细节设计，也不直接生成可交互的原型文件。
常见问题
这个技能能直接生成 HTML/CSS 代码吗？
不能，它输出的是设计规范文字描述和结构化的设计令牌，不包含代码实现。
它支持哪些平台的设计？
主要面向 Web 和小程序，但也可用于移动端 App 的界面设计，建议额外注明平台限制。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/ui-design-guide-x-4/raw/index.md 读取 ui-design-guide 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/ui-design-guide-x-4/raw/index.md（查看排版版本）