ui-design-guide
提供UI设计规范与视觉方向指导
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：ui-design-guide。 它的用途是：提供UI设计规范与视觉方向指导 完整的 Skill 内容见：https://321skill.com/skills/ui-design-guide-x-6/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
'我需要为餐饮外卖小程序设计首页，要求简洁清新，突出菜品推荐和快速下单入口。' 它会输出界面层级布局（顶部搜索、中部轮播、下方菜品分类）、色彩系统（主色#FF6B35、辅色#F5F5F5）、组件规范（按钮圆角12px、卡片阴影），并给出首页原型布局图。
介绍
解决什么问题：在开发Web或小程序前，UI设计师和产品经理常面临缺乏统一视觉方向、界面层级混乱、布局决策困难等问题。本Skill通过提供结构化的设计指南，帮助用户快速建立界面层次、确定布局逻辑、制定设计规范，并生成可交付的原型，避免返工和沟通成本。
怎么用：用户只需描述项目类型（如电商小程序、管理后台）和设计需求（如品牌色、目标用户），AI会根据指南库输出包括色彩系统、间距网格、组件样式、页面层级、交互原型在内的完整设计建议。支持交互式调整，例如修改主色或增加功能模块，即可实时更新规范。
适合谁：主要面向UI设计师、产品经理、前端开发人员，尤其是需要快速搭建界面视觉方案或统一团队设计语言的场景。求职者也可用于制作作品集原型。
使用建议：建议先明确项目核心功能与用户画像，再使用本Skill生成设计初稿。对于复杂交互或动效，需结合原型工具进一步细化。注意本Skill不涉及代码实现，需配合开发团队完成最终落地。
核心特点
本Skill专注于Web和小程序界面的视觉方向与设计规范，提供从色板、排版到组件状态的一站式指南，而非单一布局建议或通用设计原则。
注意事项
不适合需要完整后端逻辑或复杂交互动画的代码实现场景。
常见问题
如何生成符合品牌调性的设计规范？
提供品牌色值、目标用户和行业关键词，AI会自动匹配色彩系统、字体风格和组件样式，并生成可导出为设计令牌的规范文档。
能否直接输出可用的Figma设计稿？
本Skill输出为文本描述和可视化布局建议，不直接生成Figma文件，但可配合Figma插件或手动导入设计令牌快速搭建。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/ui-design-guide-x-6/raw/index.md 读取 ui-design-guide 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/ui-design-guide-x-6/raw/index.md（查看排版版本）