随着基础模型（如VLMs，例如Minimax、Qwen-V）和尖端图像生成技术（如Flux 1.1）的快速发展，我们正进入一个创造性可能性的新纪元。结合像T5这样的模型以增强对潜在空间中文本提示的理解，这些工具使得生产广告级别的关键视觉（KVs）成为可能，且具有显著的真实感。在我们组织中，我们测试了结合这些模型生成高质量KVs的潜力。我的任务是开发一个KV生成系统，能够复制特定风格，利用针对各个产品的预训练LoRA模型，提供视觉上令人惊艳的结果，甚至在适合打印的高分辨率格式中。为了构建原型，我探索了几种AI编码工具的能力。本文分享了我最初的经验和学习，首先介绍我用作这些系统输入的高层次PRD。

Designing KV System which is an AI system for generate Key Visual for client brands.

Tech Stack:

- Next.js (for frontend)

- Tailwind CSS (for styling)

- Shadcn UI (for UI)

- OpenAI (for prompt optimization)

- Supabase (for database)

- Python + Flask (for backend)

- ComfyUI API (for AI image generation)

Main Screen Features: (See the reference design)

- Base on the selection of KV sytle and selection of designed product, generate Key Visual for client brands.

- Once the user select the KV style, the corresponding prompt will be loaded.

- All the KV styles and prompts are stored in the database for future use.

- User can download the generated image and share it with others. Or save it to the server for future use.

- User could alter the prompt before generating the image.

- Waiting animation while the image is being generated.

Setup Page Features:

- Admin can add new KV styles and prompts to the database.

- Admin can delete the KV styles and prompts from the database.

- Admin can update the KV styles and prompts in the database.

History Page Features:

- User can view all the images he/she has generated.

- User can download the image.

- User can delete the image from the server.

Database Schema:

- KV_styles: store the KV styles, KV style image, and prompts.

- Products: store the products information, description, image, lora model path.

- KV_images: store the images generated by the users.

Top Navigation: (See the reference design)

- Logo

- Search Bar

- Main Page (right hand side)

- Setup Page (right hand side)

- History Page (right hand side)

Others:

- Desktop version only.

- Responsive design for different screen sizes.

- Error handling for user inputs.

V0：我在前端开发中的经验

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

V0的一个优势是它能够在仅仅几个提示后生成视觉上吸引人的前端设计。该工具似乎在后台创建一个Node.js项目，但后端在V0界面中无法访问，这限制了其在后端开发中的实用性。

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

总体而言，V0在快速生成前端原型方面表现出色，但在处理后端任务或提供多页面应用程序的无缝集成方面则显得不足。

Cursor：一个有潜力但有限制的AI编码IDE

Cursor是最近几个月最受关注的AI编码IDE之一，常被视为GitHub Copilot等工具的主要竞争者。它基于VSCode的开源版本构建，为开发者提供了一个熟悉的环境，使得入门变得简单。然而，尽管Cursor展现了潜力，我的使用经验揭示了它的优缺点。

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

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

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

虽然Cursor在快速生成初始项目结构方面表现出色，但从一开始就需要有一个文档良好的PRD，以最大限度地发挥其能力。作为一个工具，它在开始时非常有价值，但在处理复杂的多方面项目或尖端技术（如Next.js或最新的ChatGPT API）时就显得不那么可靠。

Bolt.new：一个基于SaaS的AI编码环境，内置测试功能

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生成了所有必要的SQL命令和配置Supabase的详细说明。虽然我必须手动在Supabase平台上执行这些步骤，但Bolt.new提供的无缝指导使这个过程变得简单。最终，我成功地将我的项目连接到Supabase，突显了该平台与外部工具集成的能力。如果你希望以最小的麻烦和最大的自动化进行原型制作，我强烈推荐使用Bolt.new。

Windsurf：一个新的基于代理的AI编码平台

Windsurf是最近推出的AI编码平台，发布不到两周。它被描述为一个基于代理的编码环境，旨在实现高自动化，能够在本地设置中无缝运行你的代码。该平台的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 进行快速、视觉吸引的页面设计，或者如果您更喜欢手动控制和指导，则选择 Cursor。

• 全栈原型设计：Bolt.new 是您在自动化和平台集成方面的最佳选择，设置麻烦最少。

• 后端/复杂编码：选择 Windsurf 进行高度准确、现代的编程，具有出色的调试能力。

• 预算友好选项：Windsurf 的两周免费试用使其成为测试时最易于接触的选择，无需立即支付费用。

如果您希望我展示 KV 系统的详细信息和应用，请给我留言，我将为您揭示其用法。

文章来自于“barry的异想世界”，作者“barry的异想世界”。