AI生成的UI总像廉价模板？这个Skill让Claude Code拥有”设计记忆”

为什么 AI 生成的 UI 总有一股”廉价感”？

用 Claude Code 写过界面的朋友，大概都有过这种体验：出来的代码能跑，但怎么看都像模板——按钮高度飘忽、间距随心情、颜色配得像抽奖。这不是 AI 能力不行，是缺少一套设计决策系统来约束它。

Interface Design 就是来解决这个问题的。

它做了什么？三件事：Craft + Memory + Consistency

Craft（工艺）——在动代码之前，先把设计意图说清楚。AI 会问：这是谁？在什么场景？界面应该传递什么感觉？不是”现代简洁”，而是”像 Linear 那样冷峻精准”或者”像 Notion 那样温暖友好”。方向定了，颜色、字重、间距才跟着定，而不是随机选。

Memory（记忆）——设计决策存在 .interface-design/system.md 里，下次会话自动加载。按钮高度 36px、间距基准 8px、深度策略用边框而不是阴影……这些决定不用每次重复，AI 直接继承。

Consistency（一致）——每个组件遵循同一套规则。4px 网格、统一的圆角比例、一致的深度层级。不是这次想到什么用什么，而是系统地在推进。

具体怎么用？

安装一行命令：

npx skills add https://github.com/Dammyjay93/interface-design --skill interface-design

装完之后，Claude Code 会这样工作：

• 第一次：问你要什么风格 → 选方向（Precision & Density、Warmth & Approachability 等 6 种） → 建立 system.md → 开始构建
• 之后每次：自动加载 system.md，按已定规则走，偏离了会提示修正

几个让我印象深刻的细节

设计方向不是玄学——不是简单贴标签，而是要求你说出”这个工具的使用者，下午三点在干什么”。想清楚人、任务、情绪，出来的界面才不是通用模板。

深度策略只能选一个——边框 / 阴影 / 层级阴影 / 表面色移，只能选一个并且全程贯彻。混用是 AI UI 最常见的翻车点，这个 Skill 直接封死这条路。

Slash 命令设计review——/interface-design:design-review 可以对现有 UI 打分，列出哪里违反了设计系统规则；/interface-design:design-deslop 专门扫描”AI 味”——默认字体、通用 token、平庸配色，一键识别并清理。

适合谁用？

用 Claude Code 写 SaaS Dashboard、管理后台、数据工具类界面的开发者或设计师。用来做落地页、营销站就不合适了——那个方向另有 Frontend Design Skill。

4,400+ GitHub Stars，每周 9.7K 安装量，口碑很扎实。如果你对 AI 生成 UI 的”廉价感”有同感，这套 Skill 值得试试。

GitHub 仓库 →

GitHub: https://github.com/Dammyjay93/interface-design