ui-designer-skill
一个能生成独特、高质量、可直接部署前端UI代码的AI设计助手。
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：ui-designer-skill。 它的用途是：一个能生成独特、高质量、可直接部署前端UI代码的AI设计助手。 完整的 Skill 内容见：https://321skill.com/skills/ui-designer-skill/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
‘我需要一个面向设计师的极简主义个人作品集页面，使用React，色调以黑白灰为主，要有突出的排版和微动效。’ 它会首先与你探讨视觉方向，确认“极致简约”与“编辑感”的基调，然后生成一套完整的、包含精心挑选的字体、优雅的CSS动画和不对称布局的React组件代码，确保每个细节都服务于统一的视觉叙事。
介绍
UI Designer Skill 旨在解决开发者在快速构建网页组件、页面或应用时，难以产出具有独特美学和设计深度的前端界面的问题。它不仅仅是生成代码，更强调在动手编码前，通过深入思考界面目的、视觉基调、技术约束和差异化亮点，来确立一个大胆且统一的视觉方向，从而避免千篇一律的“AI感”设计。
使用时，用户只需提供前端需求（如组件、页面或应用描述），AI助手会首先引导用户或自行设定清晰的视觉方向（如极简主义、复古未来、有机自然等），然后生成与之匹配的、可直接用于生产环境的代码（HTML/CSS/JS、React、Vue等），并特别注重视觉细节的打磨。
它非常适合前端开发者、全栈工程师、独立开发者以及任何需要快速原型设计或希望提升界面美学品质的创作者。无论是构建网站、登录页、仪表盘，还是设计海报、React组件，只要涉及UI美化，都能从中受益。
与同类UI生成工具相比，它的核心区别在于其强烈的“设计导向”和“反平庸”哲学。它不满足于生成功能性的代码，而是致力于通过独特的排版、色彩、动效和空间构成，创造出令人过目难忘、具有鲜明个性的界面作品，将AI从“代码工人”提升为“设计协作者”。
核心特点
该Skill强制要求在编码前进行深度设计思考，确立大胆的视觉方向，并生成具有强烈个人风格和记忆点的代码，而非通用、模板化的UI。它特别注重排版、动效、空间构成等设计细节的极致打磨，旨在产出“艺术品”级别的界面。
注意事项
不适合对界面美观度要求不高、仅需快速生成基础功能模板或追求绝对标准化、保守设计风格的场景。
常见问题
这个Skill能生成React代码吗？
可以，它支持生成HTML/CSS/JS、React、Vue等多种前端框架的生产就绪代码。
使用前需要提供设计稿吗？
不需要，你只需描述需求（如“一个科技感仪表盘”），AI会引导并生成完整的设计与代码。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/ui-designer-skill/raw/index.md 读取 ui-designer-skill 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/ui-designer-skill/raw/index.md（查看排版版本）