ClaudeCode开发流程复刻：一张图到完整应用的实战指南
整理简历时，我发现市面上的模板要么需要登录第三方平台，要么只是静态图片，缺乏灵活性。看到一张设计出色的简历图片后，我决定将其转化为一个可自由编辑、并能导出PDF的网页应用。这不仅是解决个人需求，更是探索AI辅助编程工作流的绝佳机会。
我的核心目标是：构建一个Web页面，精确复现参考图片的版式与视觉风格，同时实现所有文本内容的实时编辑与PDF导出功能。
一、初试：简单的指令，粗糙的结果
我下载了参考图片，创建新项目后，在Claude Code中输入了第一条指令：
参考 @1776222397194.png 这个图片生成一个web程序，可以自定义简历内容
生成效果如下：
结果不尽人意——生成的页面在样式上与原图偏差显著。这验证了一个关键点：过于笼统的指令，极易导致AI的输出与预期目标背道而驰。
二、改进：引入规划模式，先设计再执行
我遵循LLM应用的一条核心原则：当输出质量不佳时，应重置对话而非在错误基础上迭代。
我清空了项目目录与对话历史，启用Claude Code的 plan-mode 模式，输入指令：
参考 @1776222397194.png 这个图片，生成一个web端的简历生成应用
此举旨在让AI首先输出一份产品需求文档，明确功能模块、组件划分与技术选型，再基于此文档生成代码。
效果如下：
简历编辑态:
简历预览态:
这一轮结果有所改善，具备了基础的编辑框架，但整体布局与视觉细节仍与原图存在明显差异。
三、攻坚：多轮细化对话，手动校准细节
我决定采用更精细的引导策略。不再追求单次成功，而是通过多轮对话，像工程师校对图纸一样，逐步修正AI的输出。
整个过程转变为持续的指令校准：
# 第1轮对话
参考 @1776222397194.png详细说明左边简历展示页的结构，大致是左右结构，左上头像，左边有自我介绍、教育经历、联系方式，右边是姓名、工作经历、专业技能、项目介绍等
# 第2轮对话
左侧背景色为灰色，右侧为纯白，注意 工作经历、专业技能、项目介绍等可以添加多个子项
# 第3轮对话
简历结构不对，应该是整体左右结构，照片放在左边，姓名放在右边
# 第4轮对话
整体左右结构，照片下的分割线放在整体左右之间
# 第5轮对话
分割线在页面中间偏左的位置，左边的是头像、自我介绍、教育经历联系方式，右边是其他的
# 第6轮对话
测试一下，看看布局对不对
# 第7轮对话
灰色背背景上下留一部分的白色
# 第8轮对话
照片下方三分之二的照片宽度改为白色背景，只留横穿照片中部的照片三分之一宽度的灰色背景，上方也改为白色背景
# 第9轮对话
去除照片区域的灰色背景，保留自我介绍以下的灰色背景
......
最终效果如下：
经过近两小时的反复调整，终于实现了视觉上的高度还原。这种方法虽然有效，但过程冗长，促使我思考是否存在更高效的路径。
四、探索：引入专业设计工具作为“翻译器”
我尝试引入Figma作为中间层。思路是：先用Figma的“图片转布局”插件将图片转化为结构化设计稿，再通过Claude Code的Figma MCP插件读取设计稿的详细数据，最终生成代码。
首先，在Figma中完成图片到布局的转换：
随后，在Claude Code中通过 /plugins 安装官方Figma插件。登录后，开启新对话：
读取 @prompt.md 的命令，按命令执行任务
prompt.md文件包含了具体的技术要求：
请使用 figma 这个插件读取这个 Figma 设计文件，根据里面的 UI 结构生成完整可直接运行的前端网站代码。要求：
1. 技术栈：React + Tailwind CSS
2. 像素级还原布局、颜色、间距、圆角、字体
3. 生成语义化标签，结构清晰
4. 可直接在浏览器打开运行
5. 不要省略样式，不要使用占位图
6. 支持编辑
7. 支持pdf导出
8. 支持json格式保存和导入
Figma 文件链接：<对应的链接>
效果如下：
总结与反思
对比两种路径：第四种方案是“图片 → (Figma转换) → 设计稿 → (Figma MCP) → 结构化数据 → LLM → Web应用”；而前三种方案是“图片 → (视觉描述) → 文字 → LLM → Web应用”。
一个有趣的发现是，引入Figma这类专业工具并未形成绝对优势。从第一性原理看，LLM的输入是文本，因此从“视觉意图”到“文本指令”的路径越短、越精确，理论效率越高。Figma方案虽然提供了结构化输入，但也增加了操作环节与上下文切换的成本。
本次实践的核心收获：
- 规划优先于执行：在编码指令前，先让AI输出方案或PRD，能有效对齐双方认知，大幅降低后续返工率。
- 优化信息传递路径：成败关键在于如何将你的视觉意图，以最高保真度转化为AI可理解的文本描述。无论是多轮对话校准，还是借助工具转换，目标都是缩短并优化这条“意图传递路径”。
最后，一个衍生问题值得深思：在产品、设计、开发三个角色中，当视觉主题高度确定时，谁的工作最易被AI自动化？本次尝试表明，在明确的视觉约束下，“从设计稿到代码”的翻译工作，其自动化进程正在加速。