让AI生成的UI不再像塑料：这个Skill教AI”懂设计”而不是”堆组件”

你有没有这种感觉——AI 生成的 UI 看起来都对，但就是「假」，像塑料感十足的展示模板？

Gradient orbs、Reflexive 3-card grids、默认 Inter 字体、无处不在的圆角卡片……这些元素堆在一起，设计师一眼就能认出来：「哦，又是 AI 做的。」

最近挖到一个 Skill，叫 designing-frontend，专门解决这个痛点——让 AI 生成的界面真正有灵魂，而不是一坨好看的垃圾。

核心思路：从「做 UI」变成「做设计」

大多数 AI 写前端，是「堆组件」思维——先想有哪些按钮、卡片、导航，然后拼起来。

这个 Skill 的思路完全反过来：先定方向，再执行。

它的 workflow 是这样的：

• 第一步，理解上下文：产品是给谁用的？核心目的是什么？技术约束有哪些？
• 第二步，选定美学方向：Brutally minimal？Maximalist chaos？Editorial？Luxury？Lo-fi？Dark moody？这一步是灵魂——方向选对了，后面所有细节都会对
• 第三步，执行：排版、色彩系统、动效、空间构图，一个都不能马虎

听起来像废话？但关键是，它给每个维度都定了硬规则。

Typography 铁律：永远不要默认字体

Skill 里有一条：永远不要用 Inter、Roboto、Arial、system fonts。

默认字体 = 默认思维。Display type 要是 expressive 的，Body text 要 refined。字体的选择必须跟美学方向绑定——一个 editorial 方向的界面不能用工业感的字体，就像穿西装不能配运动鞋。

这套逻辑我太认同了。我自己写设计稿，第一件事永远是换字体。

动效哲学：少即是多，一次做好

Skill 里特别强调：与其到处撒微交互，不如做好一个精心编排的页面加载动效——带 stagger reveals 的那种。

一个漂亮的入场动画，比 20 个零散的 hover 效果更能打动用户。

安装方式

一行命令搞定：

npx skills add https://github.com/simonheimlicher/spx-claude --skill designing-frontend

支持的 Agent：Claude Code、Cursor、Copilot、Windsurf、OpenClaw、Cline，主流全覆盖。

适合谁用

如果你经常需要 AI 帮你生成落地页、Dashboard、移动端界面，或者你是 AI 产品的设计师/开发者，这个 Skill 值得装上试试。它不是教 AI「怎么做 UI」，而是教 AI「怎么想设计」——这是本质区别。

GitHub：https://github.com/simonheimlicher/spx-claude

子目录：plugins/frontend/skills/designing-frontend

GitHub: https://github.com/simonheimlicher/spx-claude