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-2/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
'我需要为一个在线教育APP设计课程详情页，请提供视觉方向、页面层级和布局建议，重点突出课程大纲和购买按钮。' 它会输出页面结构从上到下：课程标题、讲师信息、课程大纲折叠区、价格与购买按钮、学员评价、相关推荐，并给出每个模块的间距、字体大小、色彩对比等指南，最后建议使用红色按钮突出立即购买。
介绍
解决什么问题：当你需要为Web或小程序界面设计提供视觉方向、界面层级、布局决策、设计规范或原型参考时，这个Skill能帮你快速梳理设计思路，避免从零开始。它基于最佳实践和常见设计模式，输出结构化的页面布局、组件摆放、色彩搭配、字体层级等指南，帮助团队在设计阶段快速对齐方向。
怎么用：直接描述你的需求，例如“设计一个电商详情页，强调促销信息”或“为管理后台优化表单布局”。Skill会输出包含页面骨架、关键元素位置、间距规则、交互提示等内容的文本指南，可导出为设计文档或直接用于协作文档。你可以继续追问细节，如“按钮放在左上角还是右上角？”来完善设计决策。
适合谁：UI设计师、产品经理、前端开发人员，以及任何需要快速获得界面设计方向的人。无论是从零开始的新项目，还是对现有界面进行重构，都能从中获得结构化建议。
使用建议：将输出作为设计讨论的起点，结合具体项目需求（品牌色、用户研究数据）进行调整。建议配合Figma、Sketch等设计工具使用，将指南中的层级和布局转化为实际线框图。对于复杂页面，可以分模块多次提问，逐步细化。
核心特点
与直接生成UI代码或图片的技能不同，这个Skill专注于提供设计决策背后的逻辑和规范，输出的是可读的结构化指南而非最终产物，帮助设计师和开发者在动手前就界面层次、布局优先级达成共识。
注意事项
不适合直接生成高保真UI图片或可交互的原型，需要配合设计工具进行视觉实现。
常见问题
这个Skill和Figma插件有什么区别？
Figma插件直接在设计工具内操作，而这个Skill以文本形式输出设计指南，可跨工具使用，也适合在文档、会议中作为设计讨论的依据。
输出结果可以直接用于开发吗？
输出的是设计规范和建议，不是代码。但你可以根据指南中的层级关系和组件描述，直接作为前端开发的参考。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/ui-design-guide-x-2/raw/index.md 读取 ui-design-guide 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/ui-design-guide-x-2/raw/index.md（查看排版版本）