别再用AI写界面了——这个Skill让Claude Code有设计味

做过 AI 生成界面的同学都知道，那个味儿很难去——颜色花哨、间距随意、组件一眼假。Interface Design 就是来解决这个的。

这是一个专门给 Claude Code 用的设计工程 Skill，核心思路很清晰：在动手写代码之前，先搞清楚「谁在用、做什么、想要什么感受」，然后用一整套视觉语言体系来确保每个细节都服务于这个感受，而不是靠模板堆出来。

它具体怎么工作的

安装后，Claude Code 会先做意图探索——识别具体用户、核心任务和界面要传达的情感基调。然后进入领域探索，挖掘产品特有的概念、色彩世界和标志性元素，让设计从项目语境里长出来，而不是套一个通用模板。

视觉层面，它强调「微层」手法：用极其轻微的高度层级、边框递进和 token 架构来创造层次感，而不是靠生硬的阴影或颜色跳跃。这意味着生成的界面安静、有秩序、看起来像人设计的。

最关键的一条原则：拒绝重复模式。每个界面都应该从具体任务和上下文里生长出来，而不是 AI 批量复制的模板感。

安装和使用

• Claude Code 用户：npx skills add https://github.com/dammyjay93/interface-design --skill interface-design
• Codex 用户：npx skills add https://github.com/dammyjay93/interface-design --skill interface-design

适用于：Dashboard、管理后台、SaaS 工具、设置页、数据界面。不适合：营销页、Landing Page、品牌设计。

实话说

现在 Claude Code 写前端代码的能力已经很强了，但很多人用它出来的界面还是一股「AI味」——就是因为没有设计工程约束。Interface Design 把设计师的思维方式翻译成了 Agent 可以执行的规则，装上之后真的能感受到区别。

作者是 Damola Akinleye，MIT 协议，开源。

GitHub 仓库 →

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