我做了 10 年 UI/UX 设计。
最早用 Adobe 全家桶，PS、AI、AE，Flash 也学过；后来换成 Sketch、Figma，前前后后画了上万张高保真。

现在有了 AI，出图变得简单多了。
但 AI 做出来的页面，常常一眼就能认出来：紫蓝渐变、居中排版、卡片套卡片、每个标题上面顶一个 emoji 图标。

工具变了，判断没变。
什么样的设计才是好设计，怎么做才能让用户喜欢，背后还是有一些核心的规则和技巧，这部分 AI 替不了你。

我把平时常用的 AI 设计 Skill 整理了出来，挑了 GitHub 上星数最多的 5 个，每个都配上使用场景，做成能交互的演示，看一眼就知道它擅长什么。
再结合我 10 年的设计经验，整理成一套工作流。

这篇分四部分：

1. 5 个设计 Skill 实测：能力、演示、怎么用
2. 哪些地方用了 AI 生图：替换前后对比
3. 我的 8 条原则

1. 个设计 Skill 实测

下面每个 Skill 我都做了一个场景演示。
演示是按各 Skill 官方 README 描述的工作方式复刻的，用来说明能力，不是 Skill 的真实运行结果。

1.1. UI UX Pro Max：一句话需求，自动配出整套设计系统

能力：内置 192 条行业规则、79 种风格、192 套配色、74 组字体搭配、34 种落地页结构，支持 22 种技术栈。

演示：同一句“帮我做个落地页”，换成三个行业。
它先匹配行业，再选出页面结构、风格、配色和字体，列出要避免的做法和交付前检查清单，最后才写页面。

山间温泉 SPA：柔和阴影、粉色和鼠尾草绿、衬线字体，安静高级。

同一句话换成三个行业：温泉 SPA 是柔和的 Soft UI，记账 App 是 Bento 数据风，少儿编程课是黏土风。

怎么用：

npm install -g ui-ux-pro-max-cli

uipro init --ai claude

装好后直接提需求，它会自动触发：“帮我给山间温泉 SPA 做一个落地页，目标客户是周末来放松的白领”。

适合：不知道该用什么风格，想要稳妥、专业、符合行业习惯的结果。

1.2. Taste Skill：先定方向，再做出原创感

能力：基于 247 个精选网站的研究，提炼出 20 个设计方向。
它先从你的素材里找出“只有你有的东西”，发 3 个方向给你挑，用开放图库的真图搭页面，最后在浏览器里按 3 种宽度截图自查，最多返工 3 轮。

演示：给老城区咖啡烘焙坊“慢烘”做官网。
店主以前是排字工，于是有了“活字印刷”方向：整个官网排成一张铅印的豆单。

活字印刷方向，右边是三轮浏览器自查的记录。

同一家店的三个方向：活字印刷、档案卡片、烘焙日志。

怎么用：

npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend"

需求里多给你独有的素材：“用 taste skill 给咖啡烘焙坊‘慢烘’做官网。店主以前是排字工，店在鼓楼西巷 37 号，每周四烘豆。”

适合：官网、品牌页、作品集。
注意：跑一次要 30–45 分钟，需要 Node 22+ 和 Chrome。

1.3. Impeccable：用命令把页面一块块修好

能力：24 个设计命令，加 62 条不靠大模型的 AI 味检测规则。
先用 init 把产品定位写进 PRODUCT.md，之后每条命令都会参考它。

演示：一个 AI 默认生成的白板产品首页。
先运行 /impeccable audit，标出 7 处问题。

修改前：紫蓝渐变、卡片套卡片、emoji 图标、全部居中，检测出 7 处 AI 味。

依次运行 typeset、colorize、layout、quieter、polish 之后，检测结果为 0。

怎么用：

npx impeccable install

每个项目先运行 /impeccable init，之后按“命令 + 范围”使用：/impeccable audit landing、/impeccable polish settings。

适合：已有项目，想逐块打磨。
注意：它不替你定方向，往大胆还是克制的方向调，要你自己判断。

1.4. Emil Kowalski Skills：动效和细节的手感

能力：作者曾在 Vercel、Linear 工作，也是 Sonner 的作者。
15 个小 Skill，专门管 AI 最容易做错的细节。

演示：笔记 App 里的四个小交互，左边是 AI 默认写法，右边按 Emil 的规则。

• 进场动画用 ease-out，不用 ease-in，一开始就有反应，感觉更快。
• 下拉菜单从按钮的位置长出来，从 0.96 开始缩放，而不是从 0。
• 按钮按下缩到 0.97，有手感。
• 提示叠成一摞，不把内容挤下去。
• 长名字截断，大数字缩写，不把卡片撑破。

怎么用：

npx skills@latest add emilkowalski/skills

按名字调用：“用 review-animations 检查这个下拉菜单”“用 break-ui 拿极端数据测一下用户卡片”。

适合：叠加在其他 Skill 上，专门补动效和细节。

1.5. Hallmark：不过检查不能上线

能力：48 种主题材质，页面围绕用户要做的事来排。
sloplint 分三级检查：Floor 不过不能上线，Reflex 是模型的惯性，Finish 是细节。
改版时核对链接、表单、事件一个不少。

演示：预约制茶室“一盏”的预约页。
页面的任务是订位子，所以预约卡放在首屏。

Atelier 主题，13 项检查全部通过。

同一个预约页换三种主题材质：内容和功能不变，只换质感。

打开“AI 默认版”对照：编造的“10,000+ 满意客户”、标题上的英文小标签、单独染色的一个字、结尾的订阅框，全部被拦下，结论是不能上线。

怎么用：

npx skills add nutlope/hallmark -g

新做一页：/hallmark 给预约制茶室做预约页；改版旧页面：/hallmark redesign ./src/app；只检查不改：/hallmark audit ./index.html。

适合：落地页、预约页、商店页，以及有风险的改版。

1.6. 怎么选

• 不知道用什么风格 → UI UX Pro Max
• 想要原创感 → Taste Skill
• 已有项目，想逐块打磨 → Impeccable，再配上 Emil
• 改版旧站，怕改坏功能 → Hallmark

2. 哪些地方用了 AI 生图：替换前后对比

演示页面里有 8 张图不是代码画的，是生成的，用在 UI UX Pro Max 和 Hallmark 两个演示里。

流程是这样的：AI 先看页面，判断哪里缺图，写好提示词；我用 Codex / GPT 生成；再交回给 AI 压缩、嵌进页面，并按图调整排版。

3. 我的 8 条原则

把上面的过程提炼成可以复用的原则：

3.1. 从好作品和日常里找需求

多看优秀作品，同时留意自己工作和生活里反复遇到的麻烦，把两边对照起来看。

3.2. 先定义，再动手

先写清楚给谁用、解决什么问题、要给人什么感觉。
写不清就让 AI 来问你，这一步不让它出设计。

3.3. 拆解好设计，不照搬

看到好作品，先说出它好在哪。
只学原理，不复制画面。

3.4. 用目标给反馈

在截图上标出问题，说清楚想要的效果，具体数值交给 AI。

3.5. 先出全貌，再逐块改

• 先让 AI 出一版完整页面。
• 列出问题，按重要程度排序。
• 每轮只改一处，确认后再改下一处。

3.6. 统一视觉规则

色值、字体、材质先定好，生图提示词里也写明，同一组素材放在一个对话里连续生成。

3.7. 先上线，再优化

不影响核心体验的问题，不阻塞发布。
上线后根据真实反馈决定下一步改什么。

3.8. 用反馈分配精力

• 新想法先做成小 demo 试水。
• 反馈好的持续打磨，反馈差的及时停掉。
• 设计以外的能力也要补上：写介绍、做推广、维护用户。