refactoring-ui-skill
让AI遵循Refactoring UI设计原则，生成更专业的界面代码
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：refactoring-ui-skill。 它的用途是：让AI遵循Refactoring UI设计原则，生成更专业的界面代码 完整的 Skill 内容见：https://321skill.com/skills/refactoring-ui-skill/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
“使用/ui-refactor技能，为我创建一个包含三个价格等级、对比表格和行动按钮的定价页面。”，它会基于Refactoring UI的设计原则，生成结构清晰、视觉层次分明、色彩和谐的HTML和CSS代码。或者
对AI说：“请修复这个卡片组件的视觉层次。”，它会分析现有代码，并应用技能中的排版、间距和颜色规则来优化它。
介绍
这个Skill解决了AI生成前端代码时界面设计感不足、样式混乱的痛点。AI虽然能编写功能代码，但产出的UI往往显得通用、业余且缺乏设计规范。该Skill将《Refactoring UI》一书中的实用设计原则（如间距系统、字体比例、色彩层次）转化为AI可执行的规则，引导其生成视觉上更专业、一致的用户界面代码。
使用方式非常便捷。用户只需将Skill文件夹复制到项目根目录，然后在与Claude Code对话时，通过描述需求（如“设计一个带有统计卡片和数据表格的仪表盘”）或使用特定的斜杠命令（如/ui-refactor、/fix-colors）来调用。AI会基于内置的设计系统规则，生成或重构相应的HTML和CSS代码。
它非常适合前端开发者、全栈工程师以及任何需要快速构建具有良好视觉效果的网页或应用界面的用户。尤其适合那些希望提升产出界面美观度，但自身设计经验有限或希望节省设计系统搭建时间的开发者。
与同类UI生成或代码美化Skill相比，它的核心优势在于其设计原则的体系化和具体性。它并非简单地应用通用美化规则，而是内嵌了一套完整、具体、源自专业设计书籍（Refactoring UI）的战术规则库，如禁止任意数值、使用特定间距比例和字体阶梯、采用HSL色彩模型等，从而确保生成的代码在视觉层次、间距、排版和色彩上都具有高度的专业性和一致性。
核心特点
该Skill的核心区别在于它深度集成了《Refactoring UI》一书中具体、可操作的设计战术规则（如固定的间距比例、手选的字体阶梯、HSL色彩曲线），而非泛泛的“美化”或“优化”指令，能系统性地指导AI产出符合专业设计规范的界面代码。
注意事项
不适合需要高度自定义、突破既定设计系统框架或追求独特艺术风格的界面设计场景。
常见问题
这个Skill能用在哪些AI工具上？
主要设计用于Claude Code，理论上遵循类似技能结构的AI编码工具也可能适配。
需要我懂Refactoring UI的设计原则吗？
不需要，Skill已将这些原则内化为AI的生成规则，您只需描述需求即可。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/refactoring-ui-skill/raw/index.md 读取 refactoring-ui-skill 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/refactoring-ui-skill/raw/index.md（查看排版版本）