ClaudeCode复刻开发流程：从一张图到完整应用

最近在整理个人简历时，希望找到一个视觉效果出色的模板。然而，搜索到的结果要么是需要登录的第三方平台，要么只是静态的图片文件。偶然间，我看到一张设计精良的简历图片，随即产生了一个想法：作为一名开发者，在AI工具如此普及的当下，何不亲自动手，将其转化为一个可自由编辑的网页应用？这同时也是一次探索AI编程最佳实践的良机。

我期望的最终成果是一个Web页面，它需要完美复现原图的版式与风格，允许用户自由编辑所有内容，并且支持导出为PDF格式文件。

一、初次尝试：简单指令与粗糙结果

首先，我将选中的简历图片下载到本地，并创建了一个新项目。随后，在Claude Code中输入了第一条提示词：

参考 @1776222397194.png 这个图片生成一个web程序，可以自定义简历内容

生成的效果如下图所示：

结果令人失望——生成的页面样式与原图几乎没有相似之处。这提醒我们，给予AI一个过于模糊的目标，很可能导致产出与预期大相径庭。

二、策略改进：采用规划模式，先设计后执行

遵循使用大语言模型的一条最佳实践：如果结果不理想，最好清空上下文重新开始，而不是在错误的基础上进行修补。

我清空了项目文件夹与对话历史，首先切换到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方案虽然提供了更结构化的输入，但也增加了操作环节和工具切换的成本。

本次实践带来了两点核心启发：

1. 让AI先规划，再执行：在开始编码前，先让AI输出一份方案或产品需求文档，能有效对齐双方预期，减少后续返工。
2. 优化信息传递路径：关键在于如何将你的视觉意图，最准确、最无损地转化为AI能理解的文字描述。无论是通过多轮对话校准，还是借助工具转换，目的都是缩短和优化这条“认知路径”。

最后，引出一个衍生思考：在产品、设计、开发这三个角色中，当样式主题已经确定（例如参考一张图片），谁的工作最容易被AI替代？本次尝试似乎暗示，在高度明确的视觉约束下，“从设计稿到代码”的翻译工作，正在被快速自动化。