写在前面

我在国内一家做出海产品的团队当前端工程师。最近两个月主要在 尝试Claude Code 辅助做一个 AI 吉他/贝斯音色匹配工具：TonesMatch。整套前端——landing page、定价页、用户 dashboard、移动端响应式——基本都是用 AI 提效完成的。

但做下来一个挺反直觉的发现是：AI 写代码已经不算难了，真正卡我们的反而是"AI 不会做对的设计"。

如果你也遇到过这些情况：

• 让 AI 生成 SaaS 首页，每次出来都像同一个 Bootstrap 模板；
• AI 给出的页面"看起来对"，但移动端、合规审核、真实数据一接进来就翻车；
• 同一个项目里不同时间生成的页面风格不一致，维护成本高。

这篇文章就是教你怎么用 5 个 Claude Skill 搭一套可复用的设计 SOP。我会按"为什么需要 → 怎么装 → 怎么用 → 真实案例"的顺序展开。

Step 0：先理解为什么单纯 prompt 不够

我之前最常用的 prompt 大概是这样：

帮我生成一个现代化的 SaaS 首页，风格简洁，科技感，响应式。

这个 prompt 的致命问题是 约束太少。"现代化"、"科技感"、"简洁" 都是没有标准答案的形容词，AI 只能调用它最熟悉的"默认审美"——白底、紫色渐变、圆角卡片、三段式布局、几个 icon、一个 SaaS 模板站常见的 hero。

interface-design 这个 Skill 里有一句话很值得贴出来：

The test: If another AI given a similar prompt would produce the same output, you have failed.

如果别的 AI 接到同样的 prompt 也能生出几乎一样的东西，那就不是设计——只是默认值的搬运。

要跳出这个坑，你需要的不是一个更长的 prompt，而是 一套可复用的 Design Skills。

Step 1：装好这 3 个 Skill

3 个 Skill 我都放在 .claude/skills/ 目录下，每个负责设计流程的一个环节：

顺序	Skill 名称	它做什么
1	ascii-mockup	用 ASCII 画结构，明确用户场景
2	ui-ux-pro-max	视觉约束（颜色/字号/间距硬指标）
3	interface-design 的 /audit /critique	落地后兜底排查

下面逐步讲怎么用。

Step 2：用 ascii-mockup 先画结构

不要让 AI 上来就画页面。先用 ascii-mockup 画一份纯 ASCII 线框图，并明确标注三件事：

1. 这个页面服务谁？
2. 用户从哪一步跳过来？
3. 用户跳到下一步要去哪？

   Step 3：用 ui-ux-pro-max 锁死视觉约束

   ui-ux-pro-max 提供了一份非常扎实的"硬指标清单"：67 种风格、96 套配色、57 套字体搭配，再加 99 条 UX 守则（CRITICAL / HIGH / MEDIUM 三级）。

   你需要做的是，给 AI 一份非协商的视觉底线，比如：

   - 主色不超过 1 个
   - 页面最多 2–3 个字体层级
   - 卡片阴影保持轻量
   - 按钮、输入框、表格使用统一圆角
   - 触控目标必须 ≥ 44×44px
   - 大面积渐变谨慎使用，只作为强调

   为什么这一步关键？ AI 没有约束时会不停地为了"高级感"加效果——glassmorphism 卡片、渐变背景、hover 微动效。看起来更精致，但每多一个就多一处后续维护成本。

   💡 进阶用法：用 interface-design 的 /extract 命令从已有代码反推出一份 system.md，作为之后所有页面的 Design Token 基线。这样新写组件时 AI 就不会每次给你换一套圆角。

Step 4：用 /audit /critique 兜底真实问题

页面落地之后，必须用 /audit 和 /critique 跑一遍排查。这一步是为了抓那些"AI 写代码时根本想不到"的坑。

讲两个我们项目里的真实翻车案例：

翻车案例 1：iOS Safari 的 scrollIntoView 把整个页面顶飞

TonesMatch 有一个 SearchableDropdown（搜索吉他/音箱/效果器型号用的），桌面端正常，到了 iOS Safari 上一打字就把整个页面往上顶。

排查过程：

jsx

// 问题代码
const handleSelect = (el) => {
  el.scrollIntoView();  // ❌ iOS 上会把整个 viewport 一起滚
};

// 修复后
const handleSelect = (el) => {
  list.scrollTop = el.offsetTop - list.offsetTop;  // ✅ 只滚动列表本身
};

关键点：AI 生成 dropdown 时根本不会考虑 iOS 的这个特殊行为。这种 bug 必须靠 audit 流程 + 真机测试才能抓到。

完整工作流总结

把上面 3 步串起来，就是一套可以反复执行的设计 SOP：

1. ascii-mockup       → 用户场景 + 结构线框
2. ui-ux-pro-max      → 视觉约束硬指标
3. /audit + /critique → 落地后真实问题兜底

页面不一定一次完美，但每次修改都是"换一个螺丝"，而不是"重盖一栋楼"。

---

写在最后

AI 写前端越来越强，但如果没有设计约束，它生成的页面很容易变成"模板平均值"。

关键不是写更长的 prompt，而是把设计流程沉淀成可复用的 Skill。这套 SOP 至少应该覆盖五件事：用户场景、信息层级、组件语义、视觉约束、前端可实现性。

如果你也在做 SaaS、AI 工具、出海产品或者后台系统，建议照这个 SOP 跑一遍。

感兴趣可以看看我们的产品：https://tonesmatch.com