ui-design-guide
为Web或小程序项目提供界面视觉指导与设计规范
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：ui-design-guide。 它的用途是：为Web或小程序项目提供界面视觉指导与设计规范 完整的 Skill 内容见：https://321skill.com/skills/ui-design-guide/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
“我正在开发一个社区团购小程序，需要设计商品列表页和详情页，请提供视觉层次和布局建议。” 它会引导你明确页面核心元素（如商品图、价格、按钮），建议卡片式布局与信息优先级，并给出字号、颜色、间距等基础设计规范，帮助你快速形成可交付开发的界面方案。
介绍
UI设计指南Skill旨在解决开发者在实现用户界面时缺乏明确视觉方向和设计规范的问题。它能在项目初期或迭代阶段，为界面布局、视觉层次和设计细节提供专业指导，帮助团队在编写代码前达成设计共识。
使用时，只需向AI描述你的项目类型、目标用户和大致功能需求，该Skill便会引导你梳理界面信息架构，提供布局建议，并输出关键的设计规范，如色彩、字体、间距等，甚至可以生成低保真原型图作为开发参考。
该Skill特别适合缺乏专职设计师的初创团队、需要快速验证界面方案的产品经理，以及希望提升界面设计一致性的前端开发者。它弥合了产品构想与视觉实现之间的鸿沟。
建议在项目需求基本明确后、进入具体编码前使用。对于追求高度定制化或复杂交互动效的设计，仍需结合专业设计工具或咨询资深UI/UX设计师。
核心特点
与通用设计建议不同，该Skill专注于Web与小程序等数字产品的界面设计，能提供从信息架构到具体设计令牌（Design Tokens）的系统性输出，而非零散的审美建议。
注意事项
不适合需要高保真视觉稿、复杂交互动画或完整品牌视觉体系设计的场景。
常见问题
这个Skill能直接生成可用的设计稿吗？
不能，它主要提供设计方向、规范和低保真原型，用于指导开发，而非替代设计工具生成高保真视觉稿。
适合用来做移动App的UI设计吗？
主要针对Web和小程序界面，移动App设计可参考其原则，但具体规范（如平台组件、交互手势）可能不完全适用。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/ui-design-guide/raw/index.md 读取 ui-design-guide 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/ui-design-guide/raw/index.md（查看排版版本）