最近在优化个人简历时，想寻找一款设计出色的模板，但搜索结果要么是强制登录的第三方平台，要么只是无法编辑的静态图片。恰巧看到一份视觉设计专业的简历图片，我产生了一个想法：作为一名开发者，在AI工具如此普及的当下，何不亲自动手，将其转化为一个可自由编辑的网页应用？这同时也是一次探索AI辅助编程最佳实践的绝佳机会。
我期望的最终成果，是一个能够精准还原参考图片版式与风格的Web页面，用户可以自由编辑所有简历内容，并支持一键导出为PDF文件。
一、初次尝试：模糊的指令，不尽人意的结果
首先，我将心仪的简历图片保存下来，创建了一个新项目，随后在Claude Code中输入了第一条提示词：
参考 @1776222397194.png 这个图片生成一个web程序，可以自定义简历内容
生成的效果如下：
结果令人失望——生成的页面样式与原图设计大相径庭。这提醒我们，给AI下达过于笼统的目标，很可能得到偏离预期的答案。
二、策略改进：采用规划模式，先设计后开发
遵循大语言模型应用的一个关键最佳实践：如果初始结果不理想，最好清空上下文重新开始，而非在错误的基础上进行修补。
我清空了项目文件夹与对话历史，首先切换到Claude Code的 plan-mode 模式，输入提示词：
参考 @1776222397194.png 这个图片，生成一个web端的简历生成应用
目的是让AI先输出一份详细的产品需求文档（PRD），明确功能模块、UI组件和技术选型。然后，再基于这份PRD生成具体代码。
效果如下：
简历编辑界面:
简历预览界面:
这一轮的效果比初次尝试进步显著，至少具备了可编辑的框架，但整体布局和视觉细节与原图相比仍有明显差距。
三、攻坚阶段：多轮精细化对话，手动校准视觉细节
我再次清空所有内容，决定进行更细致的引导。这次不再追求一步到位，而是准备通过多轮对话，像校对设计稿一样，逐步调整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编程实践带来了两点核心启发：
- 优先规划，后执行开发：在开始编写代码前，先让AI输出一份详细方案或PRD，能有效对齐双方预期，大幅减少后续返工。
- 优化意图传递路径：成功的关键在于如何将你的视觉设计意图，最高效、最无损地转化为AI能够精确理解的文字描述。无论是通过多轮对话逐步校准，还是借助专业工具进行转换，核心目标都是缩短和优化这条“认知传递路径”。
最后，一个衍生思考值得探讨：在产品经理、UI设计师、前端开发这三个角色中，当设计主题已经高度明确（例如参考一张具体图片）时，谁的工作最容易被AI自动化？本次尝试似乎暗示，在拥有明确视觉约束的条件下，“从设计稿到前端代码”的翻译工作，正被快速自动化。
