画过10,000+张 UI 高保真，我的设计审美心得（1）：8 条原则 + 5 个常用 AI 设计 Skill
文章目录
我做了 10 年 UI/UX 设计。最早用 Adobe 全家桶，PS、AI、AE，Flash 也学过；后来换成 Sketch、Figma，前前后后画了上万张高保真。
现在有了 AI，出图变得简单多了。但 AI 做出来的页面，常常一眼就能认出来：紫蓝渐变、居中排版、卡片套卡片、每个标题上面顶一个 emoji 图标。
工具变了，判断没变。什么样的设计才是好设计，怎么做才能让用户喜欢，背后还是有一些核心的规则和技巧，这部分 AI 替不了你。
我把平时常用的 AI 设计 Skill 整理了出来，挑了 GitHub 上星数最多的 5 个，每个都配上使用场景，做成能交互的演示，看一眼就知道它擅长什么。再结合我 10 年的设计经验，整理成一套工作流。
这篇分四部分：
-
5 个设计 Skill 实测：能力、演示、怎么用
-
哪些地方用了 AI 生图：替换前后对比
-
我的 8 条原则
一、5 个设计 Skill 实测
下面每个 Skill 我都做了一个场景演示。演示是按各 Skill 官方 README 描述的工作方式复刻的，用来说明能力，不是 Skill 的真实运行结果。
- 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 做一个落地页，目标客户是周末来放松的白领」。
适合：不知道该用什么风格，想要稳妥、专业、符合行业习惯的结果。
- 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。
- 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。
适合：已有项目，想逐块打磨。注意：它不替你定方向，往大胆还是克制的方向调，要你自己判断。
- 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 上，专门补动效和细节。
- 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。
适合：落地页、预约页、商店页，以及有风险的改版。
怎么选
-
不知道用什么风格 → UI UX Pro Max
-
想要原创感 → Taste Skill
-
已有项目，想逐块打磨 → Impeccable，再配上 Emil
-
改版旧站，怕改坏功能 → Hallmark
二、哪些地方用了 AI 生图：替换前后对比
演示页面里有 8 张图不是代码画的，是生成的，用在 UI UX Pro Max 和 Hallmark 两个演示里。
流程是这样的：AI 先看页面，判断哪里缺图，写好提示词；我用 Codex / GPT 生成；再交回给 AI 压缩、嵌进页面，并按图调整排版。
三、我的 8 条原则
把上面的过程提炼成可以复用的原则：
1. 从好作品和日常里找需求 多看优秀作品，同时留意自己工作和生活里反复遇到的麻烦，把两边对照起来看。
2. 先定义，再动手 先写清楚给谁用、解决什么问题、要给人什么感觉。写不清就让 AI 来问你，这一步不让它出设计。
3. 拆解好设计，不照搬 看到好作品，先说出它好在哪。只学原理，不复制画面。
4. 用目标给反馈 在截图上标出问题，说清楚想要的效果，具体数值交给 AI。
5. 先出全貌，再逐块改
-
先让 AI 出一版完整页面。
-
列出问题，按重要程度排序。
-
每轮只改一处，确认后再改下一处。
6. 统一视觉规则 色值、字体、材质先定好，生图提示词里也写明，同一组素材放在一个对话里连续生成。
7. 先上线，再优化 不影响核心体验的问题，不阻塞发布。上线后根据真实反馈决定下一步改什么。
8. 用反馈分配精力
-
新想法先做成小 demo 试水。
-
反馈好的持续打磨，反馈差的及时停掉。
-
设计以外的能力也要补上：写介绍、做推广、维护用户。
