UIKit Guidelines
为AI Agent开发者提供UI设计原则与组件库使用指南
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：UIKit Guidelines。 它的用途是：为AI Agent开发者提供UI设计原则与组件库使用指南 详细介绍见：https://321skill.com/skills/uikit-guidelines/ 请根据该页面的说明完成安装。
使用示例
'我正在开发一个数据分析面板的Agent，需要设计一个清晰的数据卡片组件，请根据UIKit Guidelines给出设计建议和React代码示例。'，它会首先解释数据卡片的布局、信息层级和交互反馈原则，然后生成一个包含标题、关键指标、趋势图表和操作按钮的React组件代码框架，并说明如此设计的原因。
介绍
UIKit Guidelines Skill旨在解决AI Agent在生成用户界面时风格不统一、交互体验差、组件使用混乱的问题。它提供了一套标准化的UI设计原则、组件库使用规范和最佳实践，帮助开发者在构建AI应用时快速产出高质量、一致性的界面。
使用方式非常直接，开发者可以在需要设计或评估UI时，向搭载了此Skill的AI助手咨询设计规范、组件用法或请求生成符合指南的代码片段。Skill会基于内置的指南库给出具体建议。
这个Skill非常适合负责构建具有用户界面的AI应用或智能体的开发者，特别是那些希望提升产品专业度和用户体验的团队或个人。它降低了设计门槛，确保了开发产出的一致性。
建议在项目初期或重构阶段就引入此Skill，以确立统一的设计语言。同时，它也可作为日常开发的参考工具，用于审查现有UI或生成新的界面代码，但需注意它提供的是通用性原则，具体项目可能需要进行适配和调整。
核心特点
与单纯提供代码片段的UI技能不同，它更侧重于提供一套完整的设计原则和规范指导，帮助开发者理解“为什么这样设计”，而不仅仅是“如何实现”；同时，它专门针对AI Agent生成UI的场景进行了优化，考虑了AI的上下文理解和生成特性。
注意事项
不适合需要高度定制化、突破性视觉设计或完全脱离现有设计系统的创新项目。
常见问题
UIKit Guidelines 能直接生成可运行的代码吗？
可以，它会根据指南生成符合规范的代码片段，但可能需要结合具体框架（如React, Vue）进行微调。
这个Skill适合完全没有设计经验的开发者吗？
非常适合，它提供了从布局、配色到交互的完整设计原则，能有效引导开发者做出专业的UI决策。