robis-design-best-practice
为AI编码助手提供现代UI/UX设计最佳实践的技能库。
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：robis-design-best-practice。 它的用途是：为AI编码助手提供现代UI/UX设计最佳实践的技能库。 完整的 Skill 内容见：https://321skill.com/skills/robis-design-best-practice/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
“为我的博客创建一个暗模式下的文章卡片组件，遵循Robi的设计原则。”，它会应用低饱和度色彩、避免使用阴影、采用4px基准间距和符合WCAG AAA标准的对比度来生成代码。或者说：“检查这段按钮组件的CSS，看看有哪些地方可以优化设计？”，它会根据技能中的检查清单，指出色彩饱和度过高、间距不统一或动画曲线不自然等问题。
介绍
这个技能库旨在解决AI助手在生成代码时，UI设计缺乏美感、一致性和可访问性的问题。它向AI灌输了从色彩理论、间距系统到动效设计等一系列现代设计原则，确保生成的界面既美观又实用。
使用时，只需在支持技能的AI编码工具（如Cursor）中安装此技能，AI在编写前端代码、设计组件或审查现有UI时，便会自动调用这些设计原则进行指导。例如，当您要求创建一个卡片组件时，AI会遵循低饱和度色彩、4px基准间距等规则来生成代码。
它非常适合前端开发、全栈开发和UI设计师，特别是那些希望借助AI快速产出高质量、符合设计规范的界面，但又缺乏系统设计知识或时间的研究者。
建议将此技能与具体的UI框架（如Tailwind CSS）结合使用，效果更佳。需要注意的是，技能提供的是一套通用设计原则，在应用到具体品牌或高度定制化的设计系统时，可能需要额外的调整和适配。
核心特点
与通用前端代码生成技能不同，它深度集成了Robimez总结的“Bespoke UI”设计哲学，提供了从色彩饱和度、WCAG AAA对比度到暗模式边框替代阴影等一整套具体、可执行的设计规则，而非零散的代码片段。
注意事项
不适合需要遵循特定、非通用设计系统（如严格的公司品牌规范）的场景。
常见问题
这个技能能帮我直接生成设计稿吗？
不能，它是一个为AI编码助手设计的技能，主要指导AI生成符合设计规范的代码（如HTML/CSS/React组件），而非直接产出设计图。
支持哪些AI工具或编辑器？
主要支持通过skills.sh协议集成的工具，如Cursor。理论上任何兼容该协议的AI编码助手均可使用。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/robis-design-best-practice/raw/index.md 读取 robis-design-best-practice 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/robis-design-best-practice/raw/index.md（查看排版版本）