三个 Claude Code Skill，让非设计师一夜变设计师

lincats

424人浏览 · 2026-08-12 22:03:43

lincats · 2026-08-12 22:03:43 发布

写代码的人，不一定懂设计。配色靠感觉，间距凭手感，做出来的 AI 界面一股模板味。Taste、Motion、Impeccable 三个开源 Skill，从审美方向到动效体验再到工艺细节，组成一条给非设计师的设计工作流。让非设计师，摇身变成设计师。

AI 界面的通病

AI 生成的界面有一个共同特征。Insider Force 在视频中有一句原话。

"Same fonts, same gradients, same 'a machine made this' energy."

同样的字体，同样的渐变，连气息都是"机器做的"。

仅靠让 Claude"把界面做得更好看"无法解决根本问题。Claude 需要审美判断，而非模糊指令。下面三个开源 Skill 从根源、体验、执行三个维度解决这件事。

三个 Skill，三步解决

1. Taste · 治"AI 味"

问题，AI 做出来的界面一看就是 AI 做的。无论怎么调 prompt，那种"机器感"去不掉。

方案，Leonxlnx 的 Taste Skill。一个"反 AI 味"前端框架，通过便携式 SKILL.md 指令文件给 AI 注入审美判断力。

安装只需一行。

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

装完 Claude Code 自动发现 skill。使用时在对话中显式调用。

 /design-taste-frontend

skill 加载后，在 prompt 中描述设计需求，三项旋钮自动推导。

DESIGN_VARIANCE
，布局实验性
MOTION_INTENSITY
，动效强度
VISUAL_DENSITY
，信息密度

旋钮定好，Claude 自动推导全部设计参数。

预置风格库覆盖多个方向。默认 design-taste-frontend（v2）适合通用场景，此外可按需加载专用风格。minimalist-ui 采用 Notion/Linear 式的克制路线，industrial-brutalist-ui 采用瑞士字体体系与高对比度，high-end-visual-design 呈现 Awwwards 级高端质感。

风格与旋钮确定后，推荐先让 Claude 输出一份"Design Read"设计决策文档（页面类型、受众评估、色彩方向、字体选择、布局策略），确认方向后再写代码。当前会话内每轮对话自动参考，确保方向不跑偏。

Taste 内置了反 AI 痕迹的硬性过滤。典型规则如下。

禁止紫色至蓝色渐变
禁止三个等宽 feature card 排列
禁止虚构仪表盘占位
禁止 Inter 字体配 8px 圆角的标准 AI 套餐
禁止 200ms ease-in-out 作为所有动画的默认参数

这些都是 Claude 生成 UI 时的高频 AI 模式，Taste 直接设为硬约束。

作者 Leonxlnx 的表述直击要害。

AI 本来具备审美能力，只是从未有人教过它。

效果，输出像人类设计师经手过的。有审美取舍，不是无脑套模板。非设计背景的人员也能在写任何代码之前锁定设计方向。

2. Motion · 让界面"活"起来

问题，静态 UI 扁平。没有反馈，没有响应，拖出来像一张截图。

方案，Emil Kowalski 的 Motion Skill。前 Vercel/Linear 设计工程师，Sonner 和 Vaul 的作者。

安装。

 npx skills@latest add emilkowalski/skills

三条命令覆盖动效全流程，/emil-design-eng 加载 Emil 的设计工程哲学（弹性物理、clip-path 技巧、性能规则），/review-animations 审计全部已有动效并输出 Before/After 对照表，/animation-vocabulary 翻译模糊描述（"卡片入场有点硬"）为精确的 cubic-bezier(0.22, 0.61, 0.36, 1) 参数和 240ms 时长。

核心是一套 43 条规则、7 个类别的动效纪律体系。几条最具辨识度的规则如下。

只动画 transform 和 opacity
，走 GPU 合成层，不触发重排。严禁动画化 width、height、margin、top、left，动了就每帧 Layout + Paint，掉帧。
300ms 硬上限
，超过就是让使用者等动画，不是动画等服务。
高频操作禁用动画
，快捷键、命令面板，日均触发百次以上，加动画是负担。
必须支持 prefers-reduced-motion
，尊重使用者的系统设置。

这不是炫技型动画体系。Emil 的原话定义了它的哲学。

"Animation is not about moving, it's about feeling right."

效果，界面不再是一张图，而是"活的"。每个动画都能陈述其存在的理由。不为炫，只为对。

3. Impeccable · 一键收紧所有细节

问题，界面做完，细节散乱。某处间距多 2px，某处颜色偏了一点，逐一人工排查太慢。

方案，Paul Bakaus 的 Impeccable。前 Google Web DevRel、jQuery UI 团队负责人、色彩工具 Khroma 的创建者。

安装。

 npx impeccable install

Impeccable 提供 23 条设计命令，全部通过 /impeccable 入口调用。/impeccable audit 全维度扫描，/impeccable typeset 字体检查，/impeccable colorize 色彩检查，/impeccable layout 版面检查。

核心命令 /impeccable polish。跑完代码后敲一下，Claude 扫描整个 UI，自动收紧所有松散的细节。输出三级判决，分为 ship（通过）、ship with minor fixes（三处以内返修）、needs work（打回），附每项 issue 的精确行号和修复建议。

Impeccable 有几条独有的硬规则。

色彩
，基于 OKLCH 色彩空间，确保感知均匀的亮度阶梯。中性色须带色相偏移（tinted neutral），严禁纯灰。纯黑和纯白背景禁止，以品牌色相的低 chroma 值替代。
字体
，规避 Inter/Roboto/Arial 三大 AI 默认字体，采用 modular scale 建立层级。
空间
，/impeccable layout 强制一致的间距与视觉节奏，杜绝散乱的留白。
AI Slop Test
，内置 59 条确定性的反 AI 模式规则。紫色渐变、bounce easing、Inter 字体遍地、卡片套卡片、每段标题上方配圆角方形图标……皆为触发项。/impeccable polish 自动扫描并标记。

Paul Bakaus 的理念。

"工艺细节是品质的放大器。使用者说不出哪里好，但能感觉到。"

效果，字体是否仍停留在 Inter？中性灰是否带有色相偏移？间距与视觉节奏是否一致？/impeccable polish 一条命令即可全部核查，无需人工逐项比对。

三个 Skill 的分工

 Taste      → 审美决策层：什么东西好看
 Motion     → 体验层：让交互有反馈
 Impeccable → 执行层：让细节不出错

三层是流水线关系。先有 Taste 定方向，加 Motion 做体验，最后 /impeccable polish 收尾。

下面的案例演示三者在实际项目中的衔接方式。

实战案例，构建一个 SaaS 落地页

场景设定，为一个名为"FlowBoard"的项目管理 SaaS 产品构建落地页。团队无专职设计师，由一名全栈工程师独立完成。目标是在 Product Hunt 发布前将页面质量提升到"不显露 AI 痕迹"的水平。

Step 1，Taste 确立设计方向

Taste 已通过 npx skills add 安装到 Claude Code。进入项目后，先显式加载 skill。

 /design-taste-frontend

skill 加载后，向 Claude 提交项目背景。

我要为 FlowBoard（项目管理 SaaS）构建落地页。目标受众是 growth lead 和 ops 分析师。风格校准，参考 Linear、Vercel、Hex。不要紫色渐变，不要三个等宽 feature card，禁止虚构仪表盘占位。先输出 Design Read，我确认后再写代码。

Claude（在 Taste 约束下）首先输出 Design Read。

Taste 根据项目描述自动推导三项旋钮值。

旋钮	设定值	决策依据
DESIGN_VARIANCE	7	落地页需要适当的设计感，不能完全居中、四平八稳
MOTION_INTENSITY	5	需要动效反馈，但不使其喧宾夺主
VISUAL_DENSITY	3	落地页应保持通透，每屏传达单一核心信息

Design Read 中的关键决策如下。

配色方案，深蓝灰底色 #0B0D17，主 accent 色采用 OKLCH 青色 oklch(70% 0.18 195)，替代常规的 #3B82F6
字体栈，'ABC Diatype', 'SF Pro Display', system-ui，非 Inter
布局规范，Hero 区域左文右图、Feature 三列不等宽（中部稍窄）、CTA 全宽不对称布局
卡片规范，圆角 12px 且无阴影（box-shadow: none），仅保留 1px 半透明边框

Design Read 文档约 300 行。当前会话内每轮对话 Claude 均自动参考该文档，确保设计方向不偏离。

Step 2，Claude 依据 Design Read 生成首个版本

Design Read 就绪后，向 Claude 提交以下 prompt。

按照 Design Read 构建一个 SaaS 落地页。包含 Hero 区域（标题、描述文本、CTA 按钮、右侧产品截图占位符）、三列 Feature 区块（不等宽）、Logo 展示墙（统一灰度 40% opacity）、底部 CTA 区域及 Footer。使用 Tailwind CSS。

Claude 一次性输出完整页面，耗时约 3 分钟。

Hero 标题保持左对齐，CTA 按钮使用 accent 青色而非常见的蓝色。Logo 墙以统一灰度呈现，消除了彩色 logo 各自的视觉噪声。Feature 卡片无阴影。这正是 Design Read 中"卡片仅保留边框"规范的执行结果。以上细节全部由 Taste 自动约束实现，使用者在编写 prompt 时无需逐条指定。

Step 3，Motion 添加动效

首个版本为纯静态页面，滚动切换生硬、按钮缺乏交互反馈、Hero 区域瞬时出现而无过渡。

Motion 已通过 npx skills@latest add emilkowalski/skills 安装。在 Claude Code 中加载设计工程规则。

 /emil-design-eng

skill 加载后，提交动效需求。

刚才生成的 FlowBoard 落地页目前是完全静态的。帮我加上动效，控制在"中等深度"，保留反馈感知但不喧宾夺主。具体是，Hero 标题做一个入场（不要太慢），Feature 卡片滚动时依次出现，CTA 按钮加悬停和点击反馈。所有动画不要动 width/height/margin，只动 transform 和 opacity。

Claude（在 Emil 的 43 条规则约束下）添加三项关键动画。

Hero 区域入场动画
，标题自下向上淡入（translateY(20px) → 0，opacity: 0 → 1），时长 240ms，缓动曲线 cubic-bezier(0.22, 0.61, 0.36, 1)。不使用 AI 默认的 ease-in-out 500ms
Feature 卡片滚动入场动画
，进入视口时依次显现，每项延迟 80ms。仅动画化 transform 与 opacity，不动 margin 属性
CTA 按钮悬停反馈
，scale(1.02) 配合背景微亮，时长 120ms。按下时 scale(0.97)，时长 60ms

执行 /review-animations 后，Claude 反馈审计结果。

Hero FadeIn
，缓动曲线从 ease-in-out 替换为 cubic-bezier(0.22, 0.61, 0.36, 1)。ease-in-out 为对称曲线，入场阶段前半程偏慢，使用者会感知到短暂的"卡顿"。

CTA Hover，增加 will-change: transform 提示浏览器预先将该元素提升至合成层。

上述两条建议均由 Motion 的规则自动匹配生成。使用者无需理解 cubic-bezier 曲线的数学含义，Claude 负责将"感觉不对"的模糊判断转化为精确的参数修正。

Step 4，Impeccable 终局验收

页面至此已基本完成，但仍存在那些"难以言说但确属 AI 痕迹"的细节瑕疵。

 /impeccable polish

约 30 秒后，Claude 输出完整验收报告。

typeset（字体维度），3 处问题

text-gray-700
为 Tailwind 默认灰色，色温偏冷偏蓝。替换为含 5% 青色色相的 neutral 色值 #2D3038 → 已修复
正文行高 leading-relaxed（1.625）偏高，SaaS 落地页正文采用 1.5 更为紧凑 → 已修复
标题层级为 48px / 36px / 24px / 16px。三级标题（24px）至正文（16px）跳变幅度过大，增设 20px 辅助标题层级 → 已修复

colorize（色彩维度），2 处问题

Footer 背景使用 #F8FAFC，接近纯白。替换为 oklch(98% 0.002 195)，携带微量 accent 色相 → 已修复
Feature 卡片边框 rgba(0,0,0,0.08) 为纯黑半透明。替换为 rgba(45,48,56,0.08)（tinted black）→ 已修复

layout（间距维度），1 处问题

Hero 区域内容区与截图区间距 80px，而顶部导航至 Hero 区间距 120px。比例失衡。统一为 96px → 已修复

AI Slop Test，0 处问题

未检测到紫色至蓝色渐变
未检测到三个等宽 feature card（该页面为不等宽布局）
未检测到 Inter 字体
未检测到 emoji 图标

终局结论，ship（通过）

六处问题，均属于"不修正未必有人察觉、修正后整体质感即发生跃迁"的细节类型。从执行 /impeccable polish 到获得 ship 结论，全程不足两分钟。

全流程耗时

步骤	使用工具	耗时
确立设计方向	Taste	15 分钟（风格选择 + 旋钮调节 + Design Read 确认）
生成 UI	Claude + Taste 规则	3 分钟
添加动效	Motion	20 分钟（方向评估 + 3 项动画实现 + review 审计）
终局验收	Impeccable	2 分钟（/impeccable polish 一键执行）
合计		约 40 分钟