我现在需要开发一个前端的大屏页面，但只有一张 PNG 设计图。我把需求和图片给到 大模型后 比如: claude或者chatgpt 后，生成的页面和原图差距比较大。请问有什么方法可以提高 UI 的还原度呢？
Step 1 — 先让模型读图，再让它写码
很多人直接发图说"帮我写这个页面的代码"，这是效果最差的方式。正确做法是两步走：第一步只让模型描述它看到的内容："请分析这张大屏设计图，描述整体布局结构（几行几列）、配色方案（背景色、主色调、辅助色）、每个区块的组件类型和大致位置"。等模型的描述和你的预期吻合后，再发第二个 prompt 开始写码。这一步能提前暴露模型的理解偏差。
Step 2 — 主动提供精确数值，不要让模型猜
用取色器（如 macOS Digital Color Meter 或 Chrome DevTools）提取设计图中的关键颜色，整理成如下格式告诉模型：
背景色：#0a1628
主题色：#00d4ff
卡片背景：rgba(255,255,255,0.05)
标题字号：24px，次级标题 16px
卡片圆角：8px，内边距：16px
整体网格：左右两侧各 25%，中间 50%数值越具体，还原度越高。模型猜颜色是还原度低的最主要原因。
Step 3 — 按模块拆分，一次只做一块
大屏页面通常有 6-10 个独立区域，全部一次生成必然失控。建议的顺序：① 先搭整体布局骨架（只有 div + grid，无内容） → ② 头部 → ③ 左侧面板 → ④ 中间主视图 → ⑤ 右侧面板。每块一个单独的对话，完成后复制代码合并。
Step 4 — 告知使用哪个组件库
大屏页面的图表、地图、数字翻牌器等组件，指定库比让模型自由发挥效果好得多。常见选择：
- 图表：ECharts（国内最稳，模型训练数据多）
- 大屏框架：DataV（阿里）或 AntV G2Plot
- 地图：高德地图 JS API 或 ECharts GL
在 prompt 里写："图表用 ECharts 实现，地图用 ECharts geo 组件，整体风格参考科技蓝深色大屏"，比直接让模型自行选择还原度高很多。
Step 5 — 截图对比 + 差异化迭代（最关键的闭环）
生成代码后在浏览器渲染，截图，把截图和原图同时贴回对话，然后说具体的差异："① 左上角折线图颜色应该是蓝色渐变不是纯蓝；② 中间地图区域高度太矮，应该占页面的 60%；③ 右侧列表每行高度太大，缩小到 44px"。越具体越好，避免说"整体效果不对"这种模糊反馈。
技巧：用 Figma 或 AI 工具辅助
如果条件允许，可以把 PNG 导入 Figma，用 Figma to Code 插件或 Anima 直接导出 HTML/CSS，再让模型在这个基准上做精调，会比从零生成还原度高很多。或者用 Cursor 搭配截图，它有更强的视觉对比能力。