我第一次把 Figma 截图丢给 Cursor，差点从椅子上摔下来

那是一个朋友的 Landing Page 项目。设计师给了 Figma 稿，我截了一张首页的图，粘贴到 Cursor 的 Composer 里，打了一行字："把这个设计用 React + Tailwind 实现出来。"

Cursor 很快生成了一个可运行的 React 组件。浏览器里的初版已经接近截图的布局、颜色和间距，但仍需要逐项对照响应式、字体和交互状态。这正是 AI 前端的真实节奏：先获得可评审的草稿，再通过视觉回归收敛。

但冷静下来之后，我发现了几个问题：

1. 颜色不精确——设计稿用的是 #1a1a2e，AI 生成的是 #1f2937（Tailwind 的 gray-800），看起来差不多但不一样
2. 间距全靠猜——设计稿里标题和副标题之间是 24px，AI 给的是 mt-6（也是 24px），但这纯属运气好
3. 响应式完全没考虑——截图是桌面端的，AI 生成的代码就只有桌面端的布局，手机上惨不忍睹
4. 图片和图标用了占位符——<img src="/placeholder.svg" />，毕竟 AI 不可能知道你的图片资源在哪

所以更准确的说法是：截图→代码可以给你一个可迭代的起点，但不能保证固定完成度。 响应式布局、交互状态、可访问性和真实数据仍要通过追加指令与实际测试完善。

什么时候用截图→代码最划算？

最后一个场景要特别说一下。如果你的项目已经有了自己的设计系统（比如用了 shadcn/ui 或者自定义的组件库），单纯给截图是不够的——AI 会用原生 HTML + Tailwind 重写一遍，而不是用你已有的 <Button>、<Card> 组件。

这就引出了一个关键问题：光给截图不够，你还得告诉 AI 用什么"材料"来盖这个房子。

比截图更重要的是：约束条件

说实话，截图只解决了"这个页面长什么样"的问题。但一个合格的前端代码还需要回答更多问题：

• 用什么框架？React、Vue、还是 Svelte？
• 用什么 CSS 方案？Tailwind、styled-components、还是 CSS Modules？
• 组件拆分到什么粒度？整个页面是一个组件，还是拆成 Header + Hero + Features + Footer？
• 状态怎么管理？表单数据用 useState 还是 React Hook Form？
• 响应式怎么做？Mobile-first 还是 Desktop-first？
• 有没有已有的组件库？需要用 shadcn/ui 的 Button 还是自己写？

你可能会想："这些东西不是应该写在 CLAUDE.md 或 .cursorrules 里吗？"

没错！但问题是很多人的配置文件里没有写这些前端特定的约束。或者写了，但不够具体。

一个常见的问题是：CLAUDE.md 写了"用 Tailwind CSS"，但没写"用 mobile-first 的写法"、"颜色用项目的 CSS variables 而不是 Tailwind 默认色板"、"所有交互状态都需要 hover 和 focus 样式"。这些细节 AI 不会自己猜对。

差的指令 vs 好的指令

❌ 差的：
"把这个截图用 React 实现"

✅ 好的：
"根据这张截图实现一个 React 组件，要求：
- 框架：React 18 + TypeScript
- 样式：Tailwind CSS，mobile-first 响应式
- 组件库：使用 shadcn/ui 的 Button、Card、Input 组件
- 拆分：拆成 HeroSection、FeatureList、CTASection 三个子组件
- 颜色：主色 #6366f1（indigo-500），背景 #fafafa
- 间距：section 之间 py-20，内部元素间距 space-y-6
- 图片：用 next/image，src 先写 /images/hero.webp 占位
- 无障碍：按钮和链接需要 aria-label"

你看，好的指令其实就是把那些"不说 AI 就会瞎猜"的东西都说清楚了。这不需要你是设计专家——你只需要能看着设计稿，把颜色值、间距、用到的组件说出来就行。

插一嘴，如果你真的有 Figma 设计稿，很多 AI 工具现在支持直接读取 Figma 文件。Cursor 可以通过插件获取 Figma 的 design token（颜色、字号、间距），比截图精确得多。不过对于大多数个人项目和小团队来说，截图 + 详细指令已经够用了。