ui-design-brain
为AI注入资深UI设计师的组件知识与最佳实践，生成生产级界面。
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：ui-design-brain。 它的用途是：为AI注入资深UI设计师的组件知识与最佳实践，生成生产级界面。 完整的 Skill 内容见：https://321skill.com/skills/ui-design-brain/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
‘我需要一个用户设置页面，包含头像上传、个人资料表单和通知偏好设置。’，它会先调用此技能，查阅‘表单’、‘文件上传’、‘开关’等组件的最佳实践，然后生成一个遵循单列布局、清晰层级、充足留白和可访问性标准的现代设置页面代码，避免使用默认的模板化布局。
介绍
UI Design Brain 解决了AI生成界面时依赖通用模板、缺乏设计系统知识的问题，导致输出界面质量不高、缺乏专业性的痛点。它通过提供一个包含60多个真实UI组件模式、最佳实践和布局指南的精选知识库，指导AI在编写代码前选择合适的组件并遵循行业规范。
使用时，AI需根据用户需求（如构建仪表盘、表单、导航），在技能库中查找对应组件（如表格、卡片、模态框），并严格应用其附带的布局、交互和视觉设计原则，确保最终输出非模板化且可直接用于生产环境。
该技能适合所有需要生成Web界面、SaaS应用、管理后台或营销页面的开发者、产品经理和设计师，尤其是那些希望AI助手能产出具有现代、极简且专业水准UI代码的团队。
与同类UI生成技能或通用AI模式相比，它的核心区别在于其知识源直接来自真实设计系统（如component.gallery），强调“克制而非装饰”、“排版承载层级”等具体设计哲学，并明确反对使用默认字体、均匀卡片网格等通用AI美学，确保每个界面都为其特定上下文量身设计。
核心特点
其知识库基于60多个真实、文档化的界面组件模式与最佳实践，而非AI的通用猜测；它强制遵循一套具体、可执行的设计原则（如8px网格、单一强调色），旨在产出符合顶级SaaS公司资深设计师水准的代码，彻底避免“通用AI美学”模板。
注意事项
不适合需要高度定制化、艺术化或完全打破常规设计系统的实验性UI创作场景。
常见问题
这个技能能生成哪些技术的UI代码？
主要适用于生成React、HTML/CSS或Tailwind UI的组件代码。
它和直接使用UI组件库有什么区别？
它提供的是设计模式与最佳实践的知识指导，帮助AI合理选择并组合组件，而非直接提供可复用的代码组件库。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/ui-design-brain/raw/index.md 读取 ui-design-brain 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/ui-design-brain/raw/index.md（查看排版版本）