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-10/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
'我正在开发一个电商小程序首页，需要清晰的视觉层次来突出促销商品和分类导航，请提供设计指导。'，它会分析你的需求，给出布局建议（如卡片流与轮播图的结合）、色彩搭配方案（主色调与点缀色）以及关键组件的设计规范（如按钮样式、间距），帮助你形成明确的设计方向。
介绍
UI Design Guide Skill 旨在解决开发者在实现Web或小程序用户界面时，缺乏清晰视觉指导和设计规范的问题。它帮助用户在编码前明确界面布局、视觉层次和设计细节，避免因设计不明确导致的返工和沟通成本。
使用本Skill时，用户只需描述其项目需求或设计目标，AI便会提供具体的视觉方向建议，例如界面元素的排布、色彩搭配、字体选择，甚至生成低保真原型或设计规范说明，为后续开发工作奠定坚实基础。
本Skill特别适合前端开发、UI设计师和产品经理。前端开发者可以在编写代码前获得明确的设计输入；UI设计师可以将其作为快速构思和验证设计想法的工具；产品经理则能利用它来沟通和细化产品界面的初步构想。
建议在项目早期或界面重构阶段使用此Skill，以便尽早对齐设计方向。请注意，它提供的是设计指导和规范，而非可直接使用的生产级设计稿或代码，最终实现仍需结合具体的设计工具和开发实践。
核心特点
与通用设计咨询不同，本Skill专注于Web和小程序UI的实现前阶段，提供从视觉方向到具体布局决策的连贯指导，并能输出可用于开发参考的设计规范或原型描述，更具实操性。
注意事项
不适合需要生成高保真视觉设计稿或直接输出可运行前端代码的场景。
常见问题
这个Skill能直接生成设计图吗？
不能，它主要提供设计方向、层级和规范的文字描述，辅助你进行设计决策。
适合用来做移动App的UI设计吗？
主要针对Web和小程序界面，移动App设计可参考但其建议可能不完全适配原生平台规范。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/ui-design-guide-x-10/raw/index.md 读取 ui-design-guide 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/ui-design-guide-x-10/raw/index.md（查看排版版本）