让 AI 写页面不再“一眼假”:我把设计品味做成了一个 Claude Code Skill 流水线

TL;DR:我开源了一套 Claude Code skill 流水线 page-forge,用流程和硬规则而不是提示词,把 AI 生成页面的"AI 味"压下去。四阶段 + 两个用户闸门 + 10 条可勾选的反套路规则。仓库在文末。

先看效果

同一个产品需求(一个虚构的 RSS 阅读工具落地页),让 AI 直接写,和走完我的流水线再交付:

AI 直接生成(典型 AI 味):

紫色渐变 hero、三张等宽玻璃卡排排坐、emoji 当图标、100万+ 注册用户的假数据、"智能·高效·赋能"的空话文案。功能没毛病,但你一眼就知道这不是人做的。

走完 page-forge 流程:

暖白底、衬线标题、单一强调色、有主次的特征网格、带具体数字的真实文案。两张截图的源文件都在仓库 examples/ 里,可以自己打开对比。

问题不在模型,在流程

试过各种"请你写得高级一点"的提示词,都会发现一个规律:当前对话里改得好一点,换个会话又打回原形。因为模型每次都往同一套安全模板收敛------那套紫色渐变 + 三等分卡片是训练数据里密度最高的"落地页默认解"。

提示词是易失的,流程才是持久的。所以我把解法做成了 Claude Code 的 skill 流水线,四阶段:

  1. P1 定向 :写代码之前先锁风格------三个"品味拨盘"(布局变化度/动效强度/视觉密度)定调,产出风格 brief,用户确认之前禁止写任何页面代码(闸门 A)
  2. P2 实现:带着 brief 和 10 条反 AI 味硬规则写页面,逐条核对,违反任一条返工
  3. P3 动效(可选):有 GSAP 用 GSAP,没有自动降级为 CSS transition + Intersection Observer,不因缺依赖卡死
  4. P4 交付 :强制起服务、全页截图、桌面+移动两档核对,用户亲眼验收才算交付(闸门 B)------"代码看起来对"不允许作为收工理由

10 条硬规则,摘几条感受一下

  • 品牌色只做点缀------按钮/选中态/链接可以用,内容区大面积铺品牌色直接返工
  • 禁等宽同构卡片阵------三张一模一样的卡片排排坐是 AI 页面的标志性指纹,必须有主次
  • 禁 emoji 当图标------统一线性图标库
  • 文案禁空话------不写"赋能·引领·打造",写具体的、有数字的、有人味的内容
  • 每处动效要能说出目的------说不出来的删掉

这些规则不是玄学"品味",是可勾选、可判定的工程检查项,所以能塞进流水线里逐条对。

另外两个细节

断点续跑 :流水线状态落盘在项目的 docs/page-forge/state.md,会话中断了重新触发,从断点继续,不从头来。这在实际用的时候救命------长流程最怕聊到一半上下文爆了。

验收不是走过场:验收阶段用浏览器自动化起真实服务、截全页图,交给多模态模型按反 AI 味清单逐项核对,再给人过目。很多"代码对但视觉崩"的 bug(flex 压缩导致文字竖排换行之类)只有看图才能抓到。

怎么用

bash 复制代码
git clone https://github.com/Andrew-svg-stac/page-forge.git
cp -r page-forge/skills/* ~/.claude/skills/

然后对 Claude Code 说「帮我做一个落地页」就行。

仓库

👉 Andrew-svg-stac/page-forge

MIT 协议,中英双语文档。三个 skill 各自独立可用,也可以只装验收那一个(ui-verify 单拎出来也很好用)。

如果你也受够了 AI 页面的紫渐变,欢迎 star / 提 issue / 一起迭代规则库。

相关推荐
乐享qicheng1 小时前
14-AI智能管家JSBridge深度问答
前端
10年前端老司机1 小时前
我用 Vue3 + LangGraph 做了个心理咨询 AI,踩了 9 个坑后总结出来的实战经验
前端·langchain·agent
数据掘金1 小时前
A/B 实验分组参数回滚后还在生效?一次参数校验体系的重构复盘
前端
bmxy小明同学2 小时前
2026-10-09-token与成本
java·前端·数据库
neoooo2 小时前
🚀Claude Code 小技巧(二):找回会话,撤销修改
前端·人工智能·后端
今年下半年2 小时前
【文件上传】记录一次大附件上传的处理方案
前端·文件上传·内存溢出·分段上传
溪语流沙2 小时前
【每天一个CSS | Day21】落地页Hero动画的分镜表
前端·css
neoooo3 小时前
🚀Claude Code 小技巧(一):一键进入危险模式
前端·人工智能·后端
bmxy小明同学4 小时前
2026-10-11-幻觉治理
服务器·前端·javascript