s0xDk/refactoring-ui-skill

解决的问题

它解决了 AI 生成的用户界面看起来“业余”或“不对劲”的问题，通过为 Claude Code 提供一套具体的机械化设计规则。AI 不再需要猜测或使用临时的数值，而是可以应用基于《Refactoring UI》一书的专业设计系统。

工作原理

这是一个适用于 Claude Code 的“技能”，由一组 Markdown 文件和 CSS tokens 组成。它为 AI 提供了间距、排版、颜色和阴影的特定比例，以及一个诊断表，将模糊的 UI 问题转化为机械化的修复。启用后，Claude 会使用这些固定的比例和技术，通过粗细和颜色来建立视觉层级和深度，而不仅仅是字体大小。

适用对象

使用 Claude Code 的开发者，希望在不身为专业设计师的情况下提升其网页界面的视觉质量。

核心亮点

• 固定的设计比例：使用受限的间距、字体、颜色和阴影比例以确保一致性。
• 诊断工具：将“看起来很廉价”等模糊的反馈转化为具体、可执行的设计修复。
• 详细参考资料：包含使用 HSL 和色相旋转从零开始建立调色板的系统。
• 对比度验证的 Tokens：提供一组已验证对比度的入门 CSS tokens。