AI界面设计质量飙升！3万开发者秘密安装「设计增强工具」，前端社区震动

2026年6月21日，设计工程师Jakub Krehel在X上发布了一条帖子：他开源的一个Agent技能——名为/make-interfaces-feel-better——安装量突破了30,000次。

配了一段46秒的视频。左侧是AI生成的普通卡片界面，右侧是同一界面经过技能优化后的版本。差异大到不像同一个项目——间距、阴影、动画、字体渲染，每一处都从「能用」提升到了「精致」。

帖子获得了6,900多个赞，369,000次浏览，11,000次收藏。评论区满是「必备技能」「日常工具」「每个前端工作」等赞誉。

▲ Jakub Krehel 的里程碑帖子：视频展示了技能优化前后的对比效果，评论区大量开发者证实已在生产项目中日常使用

30,000次安装是什么概念？这个数字远远超过了项目的GitHub Star数（约2,000）。绝大多数安装者直接把它装进Claude Code、Cursor、Codex里运行，已经能看出真实使用的强度。

一个Markdown文件，凭什么让几万开发者如此渴求？

过去两年，用AI写前端已经是开发者的肌肉记忆。Claude Code、Cursor、v0、Lovable——打开任何一个，描述想要什么组件，几十秒就能获得完整代码。

功能实现没问题。按钮能点击，表单能提交，数据能渲染。

但界面总有一种说不出的「AI味」。Inter字体配紫色渐变，8px圆角卡片套卡片，Heroicons图标居中排布，间距全是8的倍数但视觉上就是不舒服。开发者圈子给它起了个名字：AI Slop。

"Your AI keeps generating the same boring UI. Inter font... Purple gradients... Cards inside cards."

「你的AI一直在生成同样无聊的界面。Inter字体……紫色渐变……卡片套卡片。」

▲ @_vmlops 的帖子精准概括了 AI Slop 的视觉通病：千篇一律的Inter字体、紫色渐变、嵌套卡片

为什么AI写界面总是「差一口气」？问题出在训练数据。模型概率上倾向最常见的视觉模式——也就是互联网上数量最多的「能用就行」的模板。没有显式设计约束，它就稳定输出这些高概率样式。

开发者原来的选择只有两种：反复prompt「让它看起来更好/优化一下/间距感觉不对」，看运气；或者自己动手改CSS，花的时间比手写还多。

Jakub给出了第三种方案。

/make-interfaces-feel-better本质上就是一个Markdown文件。一个SKILL.md，搭配几个附属参考文档（typography.md、surfaces.md、animations.md、performance.md）。

安装只需要一行命令：

安装后，Claude Code（或Cursor、Codex）在生成UI组件、审查前端代码、实现动画时会自动加载这16条原则作为持久上下文。开发者也可以手动输入/make-interfaces-feel-better激活审查模式，让Agent对照设计标准逐条review现有界面。

16条原则，每一条都精确到数值，配有CSS和Tailwind的代码示例。挑几个最典型的：

同心圆角：外层border-radius = 内层border-radius + 两层之间的padding。嵌套卡片、嵌套按钮最常见的「看着不对」就来自这里——内外圆角不匹配，视觉上像两个互不相干的方块叠在一起。

光学对齐，不认几何中心：图标+文字的按钮，图标侧padding要少2px。播放三角形需要向右偏移，因为三角形重心不在几何中心。纯数学居中会让按钮「看起来」歪了。

阴影代替边框：多层透明box-shadow在任何背景下都能营造深度感，纯色border放在深色还是浅色背景上都显得死板。Jakub给了三层阴影的精确rgba值。

进入动画拆分并错开：标题、描述、按钮分三块，错开约100ms淡入。标题甚至可按词拆开，每词延迟80ms。同时配opacity + scale(0.25→1) + blur(4px→0)。效果像界面被轻轻展开。

退出动画保持低调：只做小幅度translateY位移 + 淡出模糊，不搞整块滑出抢镜。退场的功能就是让人看不见它。

数字必须tabular-nums：999变成1000时宽度不变。不用等宽数字，倒计时、价格、统计数字的布局就会跳动。

文本换行分两套：标题balance（均匀断行），正文pretty（避免段落末尾孤词）。

图片轮廓1px纯黑/白10%：绝不用slate/zinc这类带色调的灰。纯黑或纯白叠加0.1透明度，outline-offset设为-1px。

▲ 奠基文章《Details that make interfaces feel better》配有11个交互式Demo，每个原则都支持拖拽滑块实时观察效果差异

每条原则单独看都很「小」。2px的padding调整、100ms的错开、一个border-radius公式——单拎任何一条都不足以解释界面为什么从「廉价」变成「精致」。

但当10条、16条同时作用于一个按钮、一个卡片、一个表单时，感知差距被复合放大。像一套西装：袖口差3毫米、肩线偏2毫米、领子歪1度，单独看都能忍，全凑在一起就是「定制」和「地摊」的区别。

▲ 技能专属页面展示安装命令、终端运行效果及前后对比卡片

很多技术博客都写过类似的设计原则。Jakub这次往前多走了一步，把这套经验整理成了可被 Agent 持续调用的工程化规范。

Jakub做了两件关键的事。

第一，把隐性知识结构化。不止列出16条原则，每条都配「为什么感觉更好」的感知解释 + 精确数值 + 代码示例 +「常见错误」对照。Agent拿到每条原则时，也拿到了使用场景——什么时候该用、什么时候不该用，有了明确的判断边界。

第二，强制输出审查格式。Skill里定义了一套Review Output Format：Agent修改界面后，必须按原则分组，生成Before/After对比表格，附上每个改动的文件路径和属性名。开发者扫一眼表格就能确认所有改动，不用从代码diff里猜测。

这两个设计——结构化输入 + 结构化输出——把「prompt碰运气」变成了可审查的工程流程。

▲ GitHub仓库（约2k stars）清晰列出11项覆盖内容、安装命令和MIT开源许可

评论区里的真实反馈比任何分析都有说服力：

"It's my go-to skill. I'd have paid for it."

「这是我的必装技能。我愿意为它付费。」

"At Mooch, we use it for every piece of frontend work... We probably use it just as much as /frontend-design."

「在Mooch，每个前端任务都用它。使用频率跟官方frontend-design不相上下。」

"One of my favourite skills to use, a rare instance where saying 'this looks off' makes the agent actually one shot a fix without specifying any other context."

「说一句『这个看起来不对』，Agent就能一次改好，不需要任何额外上下文——太难得了。」

2026年春夏，社区里一股「把设计品味打包成Skill」的浪潮同步爆发了，Jakub的项目正好落在这波趋势中央。

Anthropic官方率先推出frontend-design技能，安装量声称56万次以上，成了所有前端Agent项目的基线。

接着，Paul Bakaus（前Google Web DevRel负责人）发布了Impeccable——23条命令 + 37条反模式，覆盖从教学、塑形、打磨到迭代的完整设计工作流。一个/polish命令就能审查整个组件。

然后是Taste Skill——更激进的「反Slop前端框架」，13个模块化技能从极简到野蛮主义风格，支持8种以上的代理工具，Vercel OSS赞助。

然后出现了DESIGN.md——标准化9节设计系统文件，上线10天拿下4万GitHub Star。Stripe、Linear、Vercel的真实设计系统都开始用这个格式沉淀。

guayoyo.tech在2026年5月发了一篇盘点文章，给这个生态画了分层架构：Foundation层（Anthropic frontend-design打基础）→System层（DESIGN.md或Taste Skill约束全局风格）→Refinement层（Impeccable的polish + Make Interfaces Feel Better打磨微交互）。文章特别点出：「The design is okay but feels cheap」这个场景，最适合用Jakub的技能来修。

▲ guayoyo.tech 博客将 Make Interfaces Feel Better 定位为生态中的「Refinement层」代表，强调分层搭配比堆叠Skill更有效

文章还加了一条警告：Less is more。它建议优先选择少量互补的 Skill 组合，这样通常比盲目叠加更多工具更稳。

Jakub Krehel此前已经在设计工程圈持续输出内容。他是Interfere的创始人，同时经营一本叫Interfaces的设计工程杂志（interfaces.dev）。

杂志订阅费每月$7.99，内容涵盖交互式Demo、资源库、源码分享和Agent技能。他发布的其他技能——比如专注于现代色彩系统的/oklch-skill——已经在设计工程圈里有稳定受众。

▲ interfaces.dev 站内文章页延续了 Jakub 一贯的设计工程风格，也是他沉淀方法和推广 Skill 的内容阵地

他的路径很清晰：先写交互文章建立信任，再提炼成 Skill 降低使用门槛，最后通过杂志和咨询形成可持续循环。

30,000次安装是这种路径的自然结果。

Jakub这个技能所代表的变化，比技能本身更大。

过去，设计系统的交付物是Button组件 + color tokens + Figma文件。现在出现了新形态：一个SKILL.md——机器可读、会话持久、跨代理兼容、可组合、可审查。Agent时代的「设计系统」正在从组件库向「可执行设计简报」迁移。

这对几类人影响直接。

独立开发者和小团队。没有专职设计师，一行npx skills add就能让Agent持续产出至少「不廉价」的界面。评论区里大量的「solo founder」「new founder」已经在自己的项目里跑起来了。

设计工程师。Jakub证明了一件事：把品味编码成可分发资产，覆盖效率比「靠多年经验内化」高几个数量级。一个Markdown文件让几万人在各自的本地终端里同时调用你的设计判断——任何设计咨询、课程、工具都做不到这种覆盖密度。

整个AI编码生态。30k安装量 vs 2k Star数的数据差，提示了一个评估开源Agent工具的新维度：安装遥测比GitHub Star更能代表真实采用。前者是使用，后者是围观。

Skill当然不能替代真正的设计系统——项目有了专职设计师后，DESIGN.md + 人工审核仍然是必须的。多个Skill叠加也可能互相冲突。基础模型的能力仍然是天花板，有开发者提到某些模型装了Skill也难救。

但这些边界不影响一个判断：优秀的产品界面，最终仍要靠人类专家把设计原则整理清楚，AI才更有机会稳定复现那种高级感。

Jakub和他的16条原则，给这个方向打了一个小而精确的样。