只需5分钟，水灵灵地实现网站复刻！

作为前端开发者，我们的日常工作中总是有各种各样的 UI 布局任务。从设计稿到代码实现，往往需要花费大量时间去调整布局、优化细节，这种重复性的工作不仅浪费时间资源，还无形中加重了我们的工作负荷，让人感到疲惫。

前段时间，我在 GitHub 上偶然发现了一个热门的开源项目 Screenshot-to-Code，它能够通过 AI 自动生成前端代码，并且支持生成多种不同技术栈的代码，如 HTML + Tailwind、React + Tailwind 等等。

想到可以借助 AI 来帮助我开发复杂的页面，我立刻决定尝试一下。

环境搭建

首先，我们可以将项目 Clone 到本地并用 IDE 打开，准备本地部署启动。然而，面对冗长的项目 Readme 文档，直接阅读可能会带来很重的视觉负担。

这个时候我想到，我刚好有安装豆包MarsCode 编程助手插件，决定尝试下能否让 AI 告诉我该如何进行部署。在向 AI 助手提问之后，它立刻按照步骤指引我，需要先进入后端目录执行哪些命令，再进入前端目录执行哪些命令。

按照它给到的命令执行后，我成功地启动了项目：

但项目只支持 GPT 和 Claude 的 API，这些 API 都要收费，我只想用免费的 Gemini 模型，要怎么修改呢？

使用编程助手增加 Gemini 模型

首先，我找到模型配置的代码 model.ts，当我在注释上写了需要增加 Gemini 模型后，编程助手立刻就帮我生成了代码，我只需要按下 TAB 键采纳即可。

接着在 backend/.env、backend/config.py 增加 Gemini 的 API KEY：

然后可以在Llm.py中增加 Gemini 模型以及调用 Gemini 的代码。这时我发现有一个 stream_claude_response_native 方法，看起来是在调用 Claude，我们让豆包MarsCode 编程助手解释一下：

通过豆包MarsCode 编程助手的解释，确认是在调用 Claude。那我们需要增加调用 Gemini 的代码。编写代码过程中，通过编程助手提供的代码补全功能，效率获得了显著的提升。

写完代码之后，我们可以使用【注释代码】功能给代码加上注释，让代码更加规范：

之后，我们还需要在 generate_code 增加调用前面写的 Gemini 方法：

if validated_input_mode == "video": if not anthropic_api_key: await throw_error( "Video only works with Anthropic models. No Anthropic API key found. Please add the environment variable ANTHROPIC_API_KEY to backend/.env or in the settings dialog" ) raise Exception("No Anthropic key")

completion = await stream_claude_response_native( system_prompt=VIDEO_PROMPT, messages=prompt_messages, # type: ignore api_key=anthropic_api_key, callback=lambda x: process_chunk(x), model=Llm.CLAUDE_3_OPUS, include_thinking=True, ) exact_llm_version = Llm.CLAUDE_3_OPUS elif ( code_generation_model == Llm.CLAUDE_3_SONNET or code_generation_model == Llm.CLAUDE_3_5_SONNET_2024_06_20 ): if not anthropic_api_key: await throw_error( "No Anthropic API key found. Please add the environment variable ANTHROPIC_API_KEY to backend/.env or in the settings dialog" ) raise Exception("No Anthropic key")

completion = await stream_claude_response( prompt_messages, # type: ignore api_key=anthropic_api_key, callback=lambda x: process_chunk(x), model=code_generation_model, ) exact_llm_version = code_generation_model # 增加调用gemini elif ( code_generation_model == Llm.GEMINI_1_5_PRO_LATEST ): if not GEMINI_API_KEY: await throw_error( "No GEMINI API key found. Please add the environment variable ANTHROPIC_API_KEY to backend/.env or in the settings dialog" ) raise Exception("No GEMINI key")

completion = await stream_gemini_response( prompt_messages, # type: ignore api_key=GEMINI_API_KEY, callback=lambda x: process_chunk(x), ) exact_llm_version = code_generation_model else: completion = await stream_openai_response( prompt_messages, # type: ignore api_key=openai_api_key, base_url=openai_base_url, callback=lambda x: process_chunk(x), model=code_generation_model, ) exact_llm_version = code_generation_model

最后安装 Gemini SDK：

cd backendpoetry add google-generativeai

效果呈现

改完所有代码再启动项目后，就可以看到已经有 Gemini 模型啦，让我们来试试效果：

我们上传豆包MarsCode 官网截图，点击生成后，右侧即为 AI 生成的效果，可以看到还原度还不错。

由于自动生成的字体没有渐变色的效果，我们可以通过给 AI 提要求，增加渐变色效果，可以明显看到，在渐变色字体的设计下页面的视觉效果更加高级了！

在豆包MarsCode 编程助手的帮助下，我们在项目上增加了免费了 Gemini 模型。有了它，项目开发更加高效便捷了，官网复刻，轻松拿下！

大家赶快来尝试一下吧！