一个 Prompt，逆向拆解网页设计系统，让 AI 复刻不再翻车

AI 复刻网页，卡在哪一步？

现在让 AI 照着截图做一个页面，已经不算什么新鲜事。你丢一张首页截图过去，它能给你拼出一个像模像样的版式；你说要一个后台界面，导航、卡片、表格、表单也能凑齐。

但问题往往出在第二个页面、第二种屏幕尺寸，或者第一个真实交互状态出现的时候。按钮高度对不齐，标题换行位置变了，移动端只是把桌面版硬生生压窄，hover 和 focus 效果压根没设计，加载中、出错、空数据这些状态更是想都别想。

说白了，复刻一个按钮的颜色不难，难的是复刻按钮背后那套完整的设计系统。为什么这个网站的背景色和卡片色要分开？为什么标题字号不是随便定的？为什么间距有时候是 12px，有时候是 16px？为什么有的卡片能点，有的只是展示信息？为什么导航到了手机上就变成抽屉，而不是直接隐藏？这些决策，都得从页面呈现的结果里反推出来。

别急着写代码，先拆系统

如果你一上来就要求 AI“照着这张图还原页面”，它大概率会直接进入生成模式：挑一个看着顺眼的字体，选一个差不多的蓝色，套几个常见卡片，再配一个通用导航。第一眼可能还行，但它根本没回答关键问题：这套界面里，哪些规则是全局统一的？哪些差异是组件本身的变体？哪些变化只发生在移动端？

一个网站的 UI 系统，至少得拆成四层来看。

第一层是像素层。颜色、字体、尺寸、位置、边框、阴影、图标、图片裁切、视觉层级，这些是肉眼直接看到的东西。

第二层是系统层。颜色角色、字号层级、间距刻度、网格、圆角、阴影、层级、动效 tokens，这些是隐藏在视觉背后的规则。

第三层是行为层。hover、focus、active、disabled、loading、error、empty、展开收起、弹窗、滚动，这些是页面“动起来”之后的表现。

第四层是工程层。语义化 HTML、组件怎么拆分、响应式怎么实现、资源怎么加载、性能怎么样、无障碍做没做。

这四层缺一不可。只做像素层，你得到一张没法扩展的截图；只做系统层，规范看着整齐但不像目标网站；只做行为层，交互有了但视觉对不上；只做工程层，代码质量不错但品牌气质全丢了。

一条 Prompt 的核心：逆向工作顺序

这条 Prompt 不是让 AI 一口气写出几千行代码，而是给它一套固定的逆向工作流程。顺序很重要，因为视觉结果、系统规则、组件状态和代码实现之间是有依赖关系的。

没有资源清单，就没法准确复刻字体和图标；没有页面地图，就分不清一个组件是全局通用还是局部结构；没有状态矩阵，交互复刻就是空谈。

Prompt 要求 AI 先做四件事：采集证据、建立页面地图、提取 tokens、整理组件。然后再做三件事：定义响应式和状态、映射到工程、进行截图和交互验收。

每一步都要标记“已测量”“有依据的推断”或“暂时假设”。这样当目标网站资料不全时，团队能清楚知道哪些地方需要补材料，而不是把 AI 的猜测当成事实。

输入材料越具体，结果越靠谱

Prompt 写得多长不是关键，关键是输入材料够不够具体。截图表达不了的信息，你得额外提供。

建议准备这几类材料：

• 目标页面：首页、列表页、详情页、表单页、设置页、错误页、空状态页，至少覆盖产品的主要任务路径。
• viewport：桌面宽屏、普通笔记本、平板、手机截图，最好再提供接近响应式断点的临界宽度。
• 状态：按钮、导航、输入框、Tab、弹窗、下拉菜单、表格行、卡片在 hover、focus、active、disabled、loading、error、selected 时的表现。
• 资源：logo、SVG、图标、字体文件、图片原图、视频封面、渐变素材、已有品牌规范。
• 代码：如果已有项目，提供路由结构、组件目录、全局样式、主题变量、构建命令，别只贴一个页面文件。
• 约束：框架、样式方案、浏览器范围、是否需要 SSR、是否支持深色模式、是否要国际化、能不能引入依赖。

如果目标网站访问不了，别让 AI 假装“已经检查了网页”。你可以明确告诉它：哪些是截图，哪些是源码，哪些只是你的主观判断。同时要求它把无法验证的地方列为风险。诚实标注不确定性，比让 AI 用自信的语气填补证据空白有价值得多。

核心 Prompt 怎么用

下面这条 Prompt 可以直接复制到支持看图、读代码、跑浏览器的 AI 编程工具里用。

如果工具不能直接操作浏览器，就把截图、源码、资源清单、开发者工具导出的样式作为输入。如果工具支持运行项目，一定要要求它在实现后实际打开页面做视觉回归。

Prompt 的核心要求是：先分析，后实现；先复用，后新建；先保真，后抽象。不要用相似代替真实，不要用截图代替行为，不要把桌面端压窄当移动端，不要复制明显缺陷。

它会把工作拆成几个阶段：

阶段 0 收集证据。列出所有提供的页面、截图、源码、资源，记录每份证据的来源、viewport、浏览器、设备像素比。检查是否用了自定义字体、SVG 图标、图片懒加载、主题变量。对每个不确定项标记来源类型。

阶段 1 建立页面地图。为每个页面记录路由、任务、标题、主要用户动作。区分 header、nav、main、aside、footer、面包屑、标题区、工具栏、内容区、侧栏、页脚、浮层。说明区块之间的父子关系、阅读顺序、对齐线。哪些是全局结构，哪些是页面模式，哪些是业务组件，哪些是一次性装饰。

阶段 2 提取基础 UI tokens。建立三层 tokens：primitive、semantic、component。每个 token 要记录名称、值、使用位置、证据来源、是否跨页面复用、是否随主题变化、是否随状态变化、有没有局部例外。颜色要区分背景、表面、文本、边框、状态；字体要记录家族、字号、字重、行高、字距、中英文混排规则；间距要记录实际渲染值再归并刻度，别为了凑 4 或 8 的倍数改真实间距。

阶段 3 建立组件目录和状态矩阵。列出组件目录，逐个描述结构、变体、尺寸、状态和行为。至少覆盖按钮、输入框、选择器、标签、卡片、列表、表格、导航、弹窗、抽屉、下拉菜单、提示条这些常见组件。每个组件都要交付语义元素、DOM 结构、必选子元素、尺寸变体、颜色字体、padding、gap、radius、border、shadow、z-index，以及 default、hover、focus-visible、active、selected、disabled、loading、error、empty、expanded 状态。

阶段 4 定义响应式和主题规则。不要套固定断点，根据内容什么时候开始拥挤、标题什么时候换行、表格什么时候失去可读性、工具栏什么时候装不下、触控操作什么时候需要替代方案来确定断点。分别说明浅色、深色、系统主题的颜色映射，检查 reduced motion、forced colors、高对比度、系统字体放大、浏览器缩放、safe area、虚拟键盘、横竖屏。

阶段 5 映射到代码。先给工程结构建议，再实现代码。tokens.css、themes.css、reset.css、globals.css、assets、components、tests 分开。组件 API 要把视觉变体和业务数据分开，优先用有限且有语义的 variant、size、state、density、tone、loading、disabled、fullWidth 参数，别让页面随意传颜色、间距、阴影。

阶段 6 实现顺序。先骨架、容器、网格、响应式、阅读路径；再字体、颜色、间距、形状、边框、阴影、层级、主题 tokens；再基础组件、变体、完整状态；再接入真实图片、字体、图标、文案、数据状态；最后做动效、焦点管理、键盘行为、加载、空数据、错误、性能优化。每完成一个阶段先跑页面确认，再继续下一步。

最后是视觉和交互验收。在固定 viewport、浏览器、设备像素比、缩放比例、字体加载状态、数据内容下，生成目标页面与实现页面的对比截图。验收分六层：结构、几何、视觉、状态、响应式、交互与工程。用截图 overlay、pixel diff、DOM/computed diff 和真实交互走查，区分整体偏移、尺寸差异、字体度量差异、颜色差异、资源差异、平台渲染差异，别因为抗锯齿差异盲目改布局。

最终交付，别只给代码

交付格式按顺序来：复刻范围与材料清单、证据与风险清单、页面地图与布局关系、颜色字体间距尺寸形状阴影层级动效 tokens、资源清单与缺失资源替代方案、组件目录与 API 和状态矩阵、响应式主题输入方式无障碍规则、工程结构与实现计划、实现代码或修改后的文件、视觉对比状态回归可访问性性能验收结果、未解决问题和需要人工确认的地方。

如果用户直接要代码，也要在代码前用简短方式列出关键取证结论。材料不足就先说明证据缺口，别用通用模板冒充目标网站的设计系统。

这条 Prompt 的核心价值，是让 AI 从“照着画”变成“先理解再实现”。先还原系统，再生成页面，复刻的稳定性才会真正提高。