2 个免费工具,让 AI 写的前端不再一眼假

你让 AI 做个落地页。三秒后，它甩给你一个页面：紫蓝渐变、玻璃拟态，一张居中的卡片，几个 emoji 当图标。

你甚至不用点开就知道，这是 AI 做的。

说不上丑，但就是哪里不对。一种"谁看了都知道是 AI"的感觉，盖都盖不住。

独立开发者现在天天撞这个。AI 让"做出来"便宜到几乎免费，可"做出来不丑"还是那道老坎。

AI 味从哪来

AI 写前端，靠的是预测。它每次只猜一件事：下一个最像网页的东西是什么。而训练数据里最多的网页，就是那套紫蓝渐变、玻璃拟态，还有圆角卡片。这是网页的平均脸。AI 求稳，永远往平均脸靠。

可好看这件事，恰恰是反着来的。它要克制：留白、低饱和、精确的字号、有节制的颜色。这些全是"反平均"的。冒险不在 AI 的目标里，所以它天生不会。

拿一个 8 万星的项目说，更清楚。

screenshot-to-code，截图进去，代码出来。听起来完美。但它是从截图里还原"画面"，不是还原"设计"。一张图只有像素，没有意图。它不知道这个奶白是 #f8f3e7 而不是纯白，不知道标题是 21px 的衬线，不知道间距是 8 的倍数。这些"为什么好看"的参数，在像素里早就糊成一团颜色了。

模型只能猜。猜的方式，又是拿训练数据里"长得最像"的网页去凑，还是平均脸。形状是像了，设计的魂全被抹平成 AI 的默认美学。

所以毛病在于，你把"设计判断"也交给了 AI。

人定 token，AI 填代码

写作这事我早想通了：人定骨架，AI 填肉。观点、结构、判断是我的，AI 只负责把话理顺。

前端一模一样。判断是你的，实现才是 AI 的。翻译成前端的版本，就一句：

人定 token，AI 填代码。

token 是设计系统的最小单位：色值、字号、间距，还有圆角和边框。页面长什么样，就是这些参数决定的。你把它们定死，AI 只能在这个框里填代码，它就没办法自由发挥成紫蓝渐变。

token 从哪来？不用你从零设计。去你喜欢、有品位的网站里，一键扒现成的。

两个工具

两个工具，一个走命令行，一个走浏览器。

Dembrandt 走命令行。一条命令把颜色、字体、间距，还有边框，抽成 token，还能直接生成 DESIGN.md 喂给 AI agent，正好接上"AI 填代码"这句。

MiroMiro 走浏览器。装个 Chrome 插件，打开任意网站，点一下图标选 Design Tokens，就能导出 CSS 变量、Tailwind 配置，还有 JSON。它不接 agent，给不想碰命令行、只想手动复制一套变量的人。

三步上手

第一步，装。一条命令：

npx -y dembrandt install-browser

它会自动下载 dembrandt 和浏览器。

第二步，提取。对着你喜欢的网站：

npx -y dembrandt vercel.com --design-md

跑完，目录里多出一份 DESIGN.md，里面是 Vercel 的颜色、字号，还有间距的真实值。它长这样：

colors:primary:"#0070F3"surface:"#FFFFFF"on-surface:"#171717"typography:text-1:fontFamily:"GeistSans"fontSize:"64px"fontWeight:400spacing:md:"4px"xxl:"8px"xxxl:"12px"

第三步，把这份 DESIGN.md 丢进项目根目录。Claude Code、Cursor 这类 agent 会自动读到它。你再让它"做个落地页"，它就不再自由发挥成紫蓝渐变，而是照着这份 token 写：黑白的底、蓝色的主色，还有 Geist Sans 的字阶。

不用 agent 的话，npx -y dembrandt vercel.com --tailwind 直接出一份 Tailwind 配置，粘进项目就行。

不碰命令行的话，MiroMiro 更省事，装个插件点几下就导出。

token 到手之后，喂给你的 AI 工作流。让它照着这套 token 生成，而不是自由发挥。同一个 AI，有 token 约束和没有，吐出来的是两个东西。

把判断拿回来。设计归你，代码归 AI。