AI辅助开发：图变应用的实践之路

Zui近，我在寻找简历模板时发现hen多网站dou需要登录才Neng使用，这让我感到非常不便。恰巧，我kan到了一张满意的简历图片，于是萌生了一个想法：如何将这张图片变成自己的简历编辑器？

作为一名开发人员，我决定借此机会探索一下使用AI的Zui佳实践。我需要将图片转换成具有元素的布局。于是我使用了figma这个强大的设计工具，将图片转换为可编辑的设计稿。

接下来我尝试使用Claude Code这个AI编程工具，将设计稿转换成web应用。我的第一步是安装figma插件，并通过/plugins命令直接在官方市场搜索安装。

在使用Claude Code的过程中，我发现直接将图片转换成web应用的效果并不理想。于是我决定采用plan-mode模式，先生成PRD。

参考 @.png 这个图片，生成一个web端的简历生成应用

通过多轮对话调整后Claude Code终于生成了一个符合预期的web应用。这个过程让我意识到，使用AI辅助开发需要耐心和细致的调整。

在实践过程中，我遇到了许多挑战。直接将图片转换成web应用的效果并不理想，需要经过多轮对话调整。如何让AI理解我的需求也是一个挑战。

为了解决这些问题，我采用了plan-mode模式，先生成PRD，然后再进行具体的开发。同时我也意识到，使用AI辅助开发需要遵循Zui佳实践，效果不满意就重开，不要试图在不满意的基础上继续修改。

通过这次实践，我深刻体会到了AI辅助开发的潜力。未来我希望Neng够继续探索geng多的可Neng性，将AI技术应用于geng多的场景中。

同时我也希望Neng够出一套geng加完善的使用AI辅助开发的Zui佳实践，帮助geng多的开发者提高开发效率，创造出geng加优秀的产品。

在实现图变应用的过程中，我采用了Claude Code + Figma的技术方案。具体来说就是使用Figma将图片转换为设计稿，然后通过Figma MCP将设计稿连接到Claude Code，Zui后由Claude Code生成web应用。

Figma是一款功Neng强大的设计工具，Ke以轻松地将图片转换为可编辑的设计稿。在本次实践中，Figma Claude Code：AI编程的利器

Claude Code是一款AI编程工具，Ke以根据设计稿生成web应用。在本次实践中，Claude Code`表现出色，帮助我实现了图变应用的目标。 多轮对话调整：实现预期效果的关键

在实践过程中，我发现多轮对话调整是实现预期效果的关键。通过不断地调整和优化，`Claude Code` 终于生成了一个符合预期的 web 应用。

# 第1轮对话参考 @.png 详细说明左边简历展示页的结构，大致是左右结构，左上头像，左边有自我介绍、教育经历、联系方式，右边是姓名、工作经历、专业技Neng、项目介绍等
# 第2轮对话左侧背景色为灰色，右侧为纯白，注意 工作经历、专业技Neng、项目介绍等Ke以添加多个子项
# 第3轮对话简历结构不对，应该是整体左右结构，照片放在左边，姓名放在右边
# 第4轮对话整体左右结构，照片下的分割线放在整体左右之间
# 第5轮对话分割线在页面中间偏左的位置，左边的是头像、自我介绍、教育经历联系方式，右边是其他的
# 第6轮对话测试一下kankan布局对不对
# 第7轮对话灰色背背景上下留一部分的白色
# 第8轮对话照片下方三分之二的照片宽度改为白色背景，只留横穿照片中部的照片三分之一宽度的灰色背景，上方也改为白色背景
# 第9轮对话去除照片区域的灰色背景，保留自我介绍以下的灰色背景......