[

](https://medium.com/@albertlee_22659?source=post_page---byline--f2154b7eecbc--------------------------------)

 阅读时间 9 分钟

 2024 年 11 月 24 日

随着 VLM（例如 Minimax、Qwen-V）等基础模型和 Flux 1.1 等尖端图像生成技术的快速发展，我们正在进入一个充满创意可能性的新时代。
与 T5 等模型相结合，可以增强对潜在空间中文本提示的理解，这些工具可以制作具有非凡真实感的广告级关键视觉效果 (KV)。
在我们的组织中，我们测试了结合这些模型来生成高质量 KV 的潜力。
我的任务是开发一个能够复制特定样式的 KV 生成系统，利用针对单个产品的预先训练的 LoRA 模型来提供视觉上令人惊叹的结果，即使是适合打印的高分辨率格式也是如此。
为了构建原型，我探索了几种人工智能编码工具的功能。本文分享了我最初的经验和学习，从我用作这些系统输入的高级 PRD 开始。

<span id="1142" data-selectable-paragraph="">Designing KV System which is an AI system for generate Key Visual for client brands.<br><br>Tech Stack:<br><span>-</span> Next.js (for frontend)<br><span>-</span> Tailwind CSS (for styling)<br><span>-</span> Shadcn UI (for UI)<br><span>-</span> OpenAI (for prompt optimization)<br><span>-</span> Supabase (for database)<br><span>-</span> Python + Flask (for backend)<br><span>-</span> ComfyUI API (for AI image generation)<br><br>Main Screen Features: (See the reference design)<br><span>-</span> Base on the selection of KV sytle and selection of designed product, generate Key Visual for client brands.<br><span>-</span> Once the user select the KV style, the corresponding prompt will be loaded.<br><span>-</span> All the KV styles and prompts are stored in the database for future use.<br><span>-</span> User can download the generated image and share it with others. Or save it to the server for future use.<br><span>-</span> User could alter the prompt before generating the image.<br><span>-</span> Waiting animation while the image is being generated.<br><br>Setup Page Features:<br><span>-</span> Admin can add new KV styles and prompts to the database.<br><span>-</span> Admin can delete the KV styles and prompts from the database.<br><span>-</span> Admin can update the KV styles and prompts in the database.<br><br>History Page Features:<br><span>-</span> User can view all the images he/she has generated.<br><span>-</span> User can download the image.<br><span>-</span> User can delete the image from the server.<br><br>Database Schema:<br><span>-</span> KV<span>_styles: store the KV styles, KV style image, and prompts.<br>- Products: store the products information, description, image, lora model path.<br>- KV_</span>images: store the images generated by the users.<br><br>Top Navigation: (See the reference design)<br><span>-</span> Logo<br><span>-</span> Search Bar<br><span>-</span> Main Page (right hand side)<br><span>-</span> Setup Page (right hand side)<br><span>-</span> History Page (right hand side)<br><br>Others:<br><span>-</span> Desktop version only.<br><span>-</span> Responsive design for different screen sizes.<br><span>-</span> Error handling for user inputs.</span>

参考布局与 PRD 一起

V0：我的前端开发经验

使用 V0，我能够非常有效地开发各个页面。然而，该过程需要单独处理每个页面，这使得它更适合以前端为中心的任务，而不是完整的应用程序开发。
虽然我可以预览各个页面，甚至上传图像进行测试，但这些页面没有互连，因此很难将整个系统可视化为一个有凝聚力的单元。

V0 的优势之一是它能够在几次提示后生成具有视觉吸引力的前端设计。该工具似乎在底层创建了一个 Node.js 项目，但后端仍然无法从 V0 接口访问，限制了它在后端开发中的实用性。

一旦我对前端预览感到满意，我就可以使用“下载代码库”功能导出代码以进行集成。此功能允许我使用npx命令直接包含代码库。但是，此导出过程是特定于页面的，这意味着如果我的项目涉及多个页面，我必须为每个单独的页面重复该过程，这非常耗时。目前尚不清楚 V0 是否提供了一次导出所有页面的方法。

总体而言，V0 擅长快速生成前端原型，但在处理后端任务或为多页面应用程序提供无缝集成方面存在不足。

 V0接口

Cursor：一个有前途但有局限性的 AI 编码 IDE

Cursor 是近几个月来最受关注的 AI 编码 IDE 之一，通常被视为 GitHub Copilot 等工具的顶级竞争对手。它基于开源版本的 VSCode 构建，为开发人员提供了熟悉的环境，使其易于上手。
然而，虽然 Cursor 表现出了希望，但我的使用经验揭示了它的优点和局限性。

当我测试 Cursor 时，我输入了 PRD 并观察到它为前端和后端生成了单独的文件夹。然而，这些并没有联系在一起，需要我独立处理项目的每个部分。
虽然 Cursor 可以复制我原始布局的外观和感觉，但生成的前端设计相对基本，并且缺乏对最新 UI 组件的支持。
我设法请求使用更新的组件和 API，但这带来了额外的挑战——Cursor 在遇到错误时经常进入重复循环，并且难以有效地解决它们。

Cursor 的主要弱点之一是其理解和使用现有代码库的能力有限。它缺乏强大的检索增强生成（RAG），这通常会导致目录结构的错误表示。
例如，当我要求 Cursor 列出我当前的代码库目录时，它经常提供不准确的输出，使得很难找到和修改正确的文件。

根据我的经验，使用 Cursor 的最佳方式是将其视为副驾驶，而不是期望它独立处理复杂的任务。我依靠 Cursor 中的聊天功能来建议特定的代码修改。
光标会解释每个建议背后的原因，使我能够在使用提供的“更改”和“接受”按钮实施更改之前检查并确认步骤。
这种方法需要坚实的编码基础来验证其建议并手动处理集成。

虽然 Cursor 擅长快速生成初始项目结构，但从一开始就拥有记录良好的 PRD 以最大限度地发挥其功能至关重要。
作为一种工具，它对于入门很有价值，但对于处理复杂、多方面的项目或尖端技术（如 Next.js 或最新的 ChatGPT API）来说不太可靠。

 光标IDE接口

Bolt.new：具有内置测试的基于 SaaS 的人工智能编码环境

Bolt.new 提供基于 SaaS 的 AI 编码平台，允许您同时开发前端和后端代码，并具有可视化项目文件夹结构的附加优势。
它的主要优势之一是它消除了本地环境设置的需要 - 不再需要处理安装包或库的麻烦，因为一切都在托管环境中顺利运行。

虽然我的 PRD 概述了前端、后端和多个页面的详细信息，但 Bolt.new 无法一次性构建整个项目。
然而，该平台通过其交互方式进行了弥补——它在继续执行任务之前经常要求确认，给人一种智能、半自动化助手的印象，只需要很少的指导。
每次根据我的提示进行编码更新时，Bolt.new 都会运行代码来测试潜在问题。如果出现问题，它要么自动修复，要么在更正之前征求我的批准。

也就是说，存在局限性。编码速度和测试过程可能会感觉有点慢，这可能会让时间紧迫的用户感到沮丧。此外，Bolt.new 不允许直接上传图像用于测试目的；它仅支持基于 URL 的图像输入。
虽然这不是一个破坏性的因素，但它确实限制了原型设计过程中的灵活性。我发现 Bolt.new 与另一个 IDE 环境 StackBlitz 集成，但我还没有完全探索它。
StackBlitz 看起来就像传统的 SaaS IDE，没有 Bolt.new 的 AI 编码支持。

在项目的最后步骤中，当我询问该平台是否可以集成Supabase来处理动态数据库数据时，该平台让我感到惊讶。 Bolt.new 生成了配置 Supabase 所需的所有 SQL 命令和详细说明。
虽然我必须在 Supabase 平台中手动执行这些步骤，但 Bolt.new 提供的无缝指导使该过程变得简单。
最后，我成功地将我的项目连接到 Supabase，凸显了该平台促进与外部工具集成的能力。如果您希望以最少的麻烦和最大程度的自动化进行原型设计，我强烈建议使用 Bolt.new。

 Bolt.new接口

Windsurf：一种新的基于代理的人工智能编码平台

Windsurf 是最近推出的人工智能编码平台，发布不到两周。它被描述为一个基于代理的编码环境，专为高度自动化而设计，可在本地设置中无缝运行代码。
该平台的IDE基于开源版本的VSCode构建，为开发人员提供了熟悉的界面。一个突出的功能是它的Cascade功能，类似于 Cursor 中的 Composer 功能。您可以在编码方面描述您需要什么，Windsurf 将自动创建必要的文件夹、文件，甚至为您设置所有所需的包。

在测试过程中，我发现 Windsurf 采用高度自动化的编码方法。默认情况下，它不会向您显示修改后的代码，除非您明确选择查看它，这使得它更适合那些想要关注结果而不是细节的人。
它在执行软件包安装或代码执行等关键操作之前会请求许可，如果出现任何错误，它会自动为您调试和修复它们。

但是，也有一些限制。 Windsurf 目前不支持图像或视觉文件的拖放功能。
例如，如果您希望平台根据您的自定义布局调整其代码或修复预览问题，它缺乏解释此类视觉输入的直接方法。
虽然我设法将图像文件保存到文件夹目录以供 Windsurf 读取，但用户体验感觉笨拙且不直观。

Windsurf 的与众不同之处在于其卓越的编码准确性。据内部消息称，该平台经过专门培训，能够识别编码问题并将其与适当的代码片段相匹配来修复它们。
这种有针对性的方法可以提高准确性，并消除我在使用 Cursor 时遇到的循环问题。即使没有大量的参考文档，Windsurf 也可以有效地处理最新的编程框架。

对于用户界面设计不是重中之重的项目，Windsurf 的准确性和自动化使其成为强有力的竞争者。让我们期待未来的版本能够改进视觉和拖放支持——这些增强功能可以进一步提高其可用性。

 风帆界面

成本核算和订阅选项

所有四种工具（Cursor、V0、Bolt.new 和 Windsurf）均提供基本订阅，价格为每月 20 美元，但试用选项略有不同。 Windsurf提供最慷慨的试用期，可免费使用两周，使其成为全面评估的理想选择。 V0和Bolt.new提供试用积分，但这些积分很快就会被消耗，特别是当您正在处理复杂或多页项目时。另一方面， Cursor有一个免费版本，可以访问有限的“小模型”，但由于频繁出现错误和功能减少，不建议使用此选项。
虽然定价保持一致，但 Windsurf 以及 V0 和 Bolt.new 的有限试用积分提供了一些无需预先承诺即可探索这些平台的机会。

 优点和缺点

 最终建议

• 前端原型设计：如果您更喜欢在指导下进行更多手动控制，请使用V0进行快速、视觉上吸引人的页面设计或光标。
• 全栈原型设计： Bolt.new是您实现自动化和平台集成的最佳选择，并且设置麻烦最少。
• 后端/复杂编码：选择Windsurf进行高精度、现代编程，并具有出色的调试功能。
• 经济实惠的选项：Windsurf 为期两周的免费试用使其成为最容易进行测试且无需立即付费的选择。

如果您想让我展示KV系统的细节和应用，请给我留言，我将揭晓供您使用。