《Prompt修仙手册：从代码麻瓜到Vibe Coder天尊只需三成功力》

国家不保护废物
524 阅读6分钟

《Prompt修仙手册：从代码麻瓜到Vibe Coder天尊只需三成功力》

一、当孙悟空学会拔毛编程

image.png 各位掘友，还记得《西游记》里孙悟空拔根毛就能变出猴子猴孙的名场面吗？如今我们程序员也拥有了同款外挂——用自然语言生成代码！自从我把键盘从⌨️换成🗣️，腰不酸了腿不疼了，连需求都敢接了！

二、Prompt Engineering 三连击

1. 身份扮演：让AI穿上格子衫

【角色设定】
你是一位拥有10年Chrome插件开发经验的谷歌工程师，擅长用最简代码实现产品需求。请用manifest V3规范开发...

【任务描述】
需要开发一个智能网页背景色修改插件，具体要求：
1. 点击图标后弹出颜色选择面板
2. 支持十六进制颜色码输入
3. 自动记忆上次选择的颜色

2. 代码生成：AI牌打印机

// 由Claude生成的background-changer插件核心代码
chrome.runtime.onInstalled.addListener(() => {
  chrome.storage.sync.get(['color'], (result) => {
    document.body.style.backgroundColor = result.color || '#00ff00';
  });
});

// 预留位置：在此插入颜色选择器UI代码

3. 花式调教：对付倔强AI的妙招

当代码出现bug时，试试这个魔法句式：
"你刚才提供的方案在运行时出现[具体错误]，请扮演资深调试专家，用'小步快走'的方式逐步排查问题..."

三、Vibe Coderの沉浸式体验

image.png 最近硅谷疯传的Vibe Coding究竟是啥？简单说就是：

  1. 在Cursor里按下CMD+K(trae)
  2. 输入："我要开发一个Tinder风格的电商网站，左滑不喜欢右滑加入购物车"
  3. 看着AI哗啦啦生成代码
  4. 喝着咖啡检查代码
  5. 重复步骤1-4直到项目上线
# 用Vercel/Trae光速部署的魔法命令
npm create vite@latest my-ai-store -- --template react
cd my-ai-store && npm install
npm run dev

四、实战：用Vibe Coding怒肝跨境粉丝站，光速部署，Vercel比我外卖还快

image.png

Vercel：特别快可以实现上线

Vercel 是一个专注于前端应用与静态网站部署的开发平台，核心特点是「快速上线」快速上线的国际站。利用 Vercel，你可以快速地将你的电商网站上线，并确保用户能够获得流畅的访问体验。

步骤：
  1. 直接让AI为我写一个终端命令来初始化一个新的Vercel应用

image.png

  1. 初始化一个新的Vercel应用：（注意需要新建一个空的文件夹）

    在终端中运行以下命令：

npx create-next-app@latest .

01f131aac90e055aeff82c1c92de511c.png

  1. 如果终端出现上述问题，那说明我们没有权限来执行 ，此时我们只需以管理员身份打开powershell

image.png

输入Set-ExecutionPolicy RemoteSigned 选择y，之后我们就可以成功执行终端命令 image.png

  1. 根据下图选项勾选就好 ，这个命令会创建一个 Next.js 项目的模板。Next.js 是一个基于 React 的 开源框架，用于构建 高性能、可扩展的 Web 应用 和 网站。它由 Vercel（前身为 Zeit）开发，结合了 React 的组件化优势与服务端渲染（SSR）、静态站点生成（SSG）等特性，让开发者能够轻松创建具有优异 SEO 表现和用户体验的应用。

70293e71e084c2724b48f3b2307a5ea1.png 然后trae会自动生成我们部署vercel所需的文件

image.png

  1. 启动本地服务：

    在终端中运行以下命令：

    npm run dev

image.png 6. 最后给了你两个网址，http://localhost:3001 （localhost 代表你自己的电脑，用这个网址在自己电脑上能访问项目 ）和 http://192.168.111.1:3001 （这是你电脑在所在网络里的一个地址，同一个网络里其他设备可能也能用这个网址访问你运行的项目 ）。

image.png 这个命令会启动一个本地开发服务器， 可以看到我们的网站，比如我们有什么需求也可以直接给大模型让其帮我们操作，比如更换网页的背景颜色

image.png 打开我们src目录下的page.tsx文件选中我们的代码 image.png 选中代码添加到对话，让其帮我们更换我们想要的背景颜色，之后我们应用大模型给我们的代码，就OK了

image.png

使用Vibe Coding开发爱豆粉丝国际交流网站的流程：

构思产品创意：明确网站定位，比如是专注于分享爱豆资讯、组织粉丝活动，还是提供粉丝创作作品展示等；确定目标用户，是全球范围内某特定爱豆的粉丝群体，还是多个爱豆的粉丝 。

设计用户界面：利用Vibe Coding的AI编辑器，通过自然语言描述，如“设计一个简洁、时尚，以爱豆应援色为主色调，能方便查看动态和发布评论的界面”，让AI自动生成相关HTML、CSS和JavaScript代码 。

添加功能模块：借助AI工具生成或手动添加功能，如粉丝社区模块（包括论坛、话题讨论等）、资讯发布模块（可发布爱豆新闻、行程等 ）、作品分享模块（支持图片、视频、文章分享 ）等；也可利用AI自动生成各模块的相关描述和示例内容 。

集成翻译功能：考虑到是国际交流网站，选用合适的翻译API（如谷歌翻译API、百度翻译API等 ），通过Vibe Coding让AI生成集成代码，实现内容自动翻译，方便不同语言粉丝交流 。

配置用户管理与安全：设置用户注册、登录（支持邮箱、手机号、第三方社交账号登录等 ）功能；利用Vibe Coding生成用户权限管理代码，区分普通用户、管理员等权限；同时集成安全防护机制，如验证码、防恶意注册、数据加密等代码，保障用户信息安全 。

部署网站：完成开发后，使用Vercel CLI将网站部署到Vercel平台。Vercel会自动构建和部署网站，并提供全球CDN加速的域名，方便全球粉丝快速访问 。

五、新纪元の生存法则

给各位老铁划重点：

  1. Prompt比Python重要：现在代码质量取决于你的描述能力
  2. 会调试胜过会编码：AI写的代码也要人类把关
  3. 产品思维是王道：快速试错比完美代码更重要

最后送大家一句改编版《让子弹飞》台词：
"程序员要站着，还把钱挣了？得巧用AI！"

互动话题： 各位掘友，你们用AI生成过最离谱的代码是什么？欢迎在评论区battle～

下集预告：如何部署一个我爱豆粉丝的国际交流网站！！

avatar
文章
阅读
粉丝