AI 编程工具大盘点 (二)

[cssmagic]

上期文章分享了最容易上手的两种 AI 编程方式——智能对话助手和代码解释器。本期要介绍的是一种更加便捷的方式：网页创作平台。

网页创作平台

2024 年出现了不少专门用于生成网站的 AI 工具，全程在浏览器里操作，不需要在本地安装任何环境和工具。这类工具的代表有 Bolt（ https://bolt.new ）、v0（ https://v0.dev ）等。这些工具可以通过对话或者上传设计稿的方式，自动生成网页代码，甚至可以一键发布上线。

这里以 Bolt 为例，来演示它的操作过程。

Bolt 操作演示

假设你需要制作一个下载 YouTube 视频的网站，就可以打开 Bolt，输入提示词：

我想写一个可以下载 YouTube 视频的网页。它有一个大大的输入框，可以输入 YouTube 视频的地址。提交之后，这个网页就可以调用一个第三方接口，返回解析出的视频地址。之后页面展示这个地址，用户可以点击右键并保存视频。我希望这个网页的风格是暗色的、酷酷的、有神秘感。

提示词可以包含功能需求和视觉风格，用大白话表达清楚就行。如有必要，还可以指定技术栈。Bolt 支持目前主流的网页技术栈，包括 Vue、React 这样的前端框架，以及 Next、Nuxt 等全栈框架等等。

接下来，Bolt 可以帮我们优化提示词，以便后续环节更好地理解我们的需求、生成更准确的代码。它优化后的提示词是这样的（原文较长，这里只节选片段，大家可以自行体验）：

Create a sleek, dark-themed web application for downloading YouTube videos. The design should feature a prominent input field for YouTube URLs, centered on the page with a modern, ethereal aesthetic. When a URL is submitted, the app should:

1. ...
2. ...

Requirements:

• ...
• ...
• ...

The overall aesthetic should blend cyberpunk and divine elements for a unique, sophisticated look.

显然 Bolt 优化过的提示词更加丰富和严谨。我们提交这段提示词，Bolt 就开始自动编写代码，并且为我们创建了一个云端的代码运行环境，随后安装依赖、运行代码、生成网页，一气呵成。我们可以预览它生成的网页效果，然后通过继续对话来修改代码。

如果达到满意效果之后，还可以一键发布到云端，获得一个网址，让更多的人访问我们的工作成果。

我们只和它进行了一轮对话，并没有告诉它第三方 API 的信息，因此这个网页的功能肯定还不完整。但 Bolt 把除此以外的所有功能都帮我们实现了，包括对用户输入内容的校验，以及点击按钮之后的交互。

^{（对用户输入内容的校验）}

^{（点击按钮之后的交互）}

大家可以看到，只需要几分钟就可以生成一个相当专业的网页，作为一个原型是完全足够了。我们可以通过对话来继续完善，也可以把它生成的代码打包下载，然后在本地继续开发。

图生网站

如果你是设计师或产品经理，可能更习惯于使用设计稿或者原型图来表达你的想法。Bolt 和 v0 也都支持上传图片，不过有一款工具在这个环节更加专业，它就是 CopyCoder。

CopyCoder（ copycoder.ai ）是一款专职的编程提示词生成工具，它可以把网页设计稿、原型图、网页截图转换成适合 AI 编程工具处理的提示词——它适合与 Bolt 和 v0 配合使用，也适用于下期文章即将介绍的 “AI 代码编辑器”，你可以根据自己习惯来组建自己的工作流。

当我们把图片上传给 CopyCoder 之后，它便可以针对图片内容生成一段提示词，把它复制到 Bolt 或 v0 中，就可以生成网站的骨架和第一个页面。

接下来，CopyCoder 还可以根据图片分析这个网站还需要哪些页面，以及这些页面的功能和样式，并生成更多的提示词。

这样我们就可以逐步完善这个网站，直到它变成我们想要的样子。太贴心了有没有！

小结

本文介绍了 “网页创作平台” 这种在线 AI 编程工具，以及配套的 “图生网站” 工具。这种 AI 编程方式同样非常直观，适合零基础的同学入门网站开发，或者产品经理快速搭建原型，前端工程师也可以借助它获取设计创意。

当我们把 Bolt 生成的代码下载到本地以后，就要交给本地的代码编辑器来处理了。下期文章将会介绍目前最主流的 “AI 代码编辑器”，帮助我们在本地处理代码。各位新朋友请关注公众号，下次更新不迷路：

---

如果你希望 快速入门 AI 编程工具，掌握编程技能，在 AI 时代抢占先机，请务必拿下魔法哥的这本新书！目前京东自营全网底价，正是入手的好时机。

祝阅读愉快！

---

📣 AI 魔法群开放啦！

扫码加群，领取魔法哥整理的常用 AI 工具包：

---

🔥 往期推荐

AI 应用开发指南：

• LLM 应用开发技巧：如何选择模型？ | 如何打磨系统提示词？ | 探究 LLM API 的输入和输出
• 扒一扒 OpenAI o1 系列模型：为什么这么强？ | 对开发者有何影响？
• 我竟然找到了白嫖 GPT-4o API 的方法！亲测可用，不看血亏！
• Kimi API 还没用起来？请看这篇无门槛快速入门指南

ChatGPT 高级技巧：

• ChatGPT 网页版崩了？魔法哥写个用户脚本来修复
• 买了 ChatGPT 会员却没用过 “代码解释器”？亏了，快看这三个案例
• ChatGPT 定制化进阶：四步成为 AI 对话高手
• 请收下这份 GPTs 完全指南：入门篇 | 如何开发 | 如何上架 | 如何赚钱

AI 资讯与评述：

• 动动嘴就能写代码？用语音指挥 AI 编程助手，这体验绝了！
• 全面升级！GPT-4o 第一时间体验、疑问解答、福利揭秘
• 答应我！这个周末啃下微软认证 AI 证书，亮瞎众人
• 慢着，你用 AI 生成的作品，版权归你吗？

---

© Creative Commons BY-NC-ND 4.0