【30分钟建个AI工具网站】教产品经理搭建AI出海网站

常见踩坑点

如果卡在npx create-next-app@latest的朋友，你可以去你的代理工具里找下你的http:XXX（比如10809）是多少。

Windows电脑的话VSCode命名行输入 $env:http_proxy = "http://127.0.0.1:10809" ，回车后再输入 $env:https_proxy = "http://127.0.0.1:10809" 注意那个10809替换成你实际的数字；
mac电脑VSCode命令行输入export http_proxy=http://127.0.0.1:10809 回车后再输入export https_proxy=http://127.0.0.1:10809 注意那个10809替换成你实际的数字就可以了

windows系统安装node完成之后，可能报错no such file or directory，这时候你需要在日志提示的目录新建一个npm文件夹即可（是在类似C:\Users\andy\AppData\Roaming下创建npm文件夹）
苹果电脑可能会遇到当前账户权限不足，出现类似npm error code EACCES npm error syscall rename npm error path /usr/local/lib/node_modules/npm npm error dest /usr/local/lib/node_modules/.npm-i9nnxROI npm error errno -13的报错。

解决方案：命令行输入下面命名，然后输入密码（密码看不见的），输入完成后回车即可对这个目录进行读取、写入和执行操作

sudo chown -R $(whoami) /usr/local/lib/node_modules

先分享下我的故事

大家好，我是Andy，一个不会写代码的产品经理。6月的某天，我用Claude 3.5在周末两天写了一个工具站，发到海外社区，当天UV将近1w（具体做什么后面再和大家分享，先放个那天的数据）。

然后当天晚上就收到了一笔100新台币的打赏，扣掉PayPal手续费，还剩85新台币，收到后我兴奋不已，我让女朋友给人家发了一封感谢邮件，这算是我出海的第一桶金。

虽然后面热度下降了，但是对我来说确实感觉成就感满满，同时我也发现，在AI的时代，产品经理是有机会成为独立开发者，无论你只是想做个小工具给自己玩玩，还是要出海赚美金。

再说说我想分享什么教程

这个系列教程想要帮助不会写代码的产品经理，在AI的帮助下，完成AI工具网站的搭建。目前这个系列教程会分为以下几点，每点会做一个视频发布到油管里。

30分钟建个AI网站
Claude账号开通
域名注册和DNS解析，拥有人生第一个域名
海外AI产品的需求挖掘
用UI组件、模板让你的网站更加美观
如何推广你的网站
赚钱人生第一桶金：解决海外收款问题（英国公司注册、海外银行卡开户等）

这个顺序可能会有点奇怪，一般是先挖掘需求、再建站、再去推广。但是先相信我，一点点来，新手初期不急着挖掘需求，先做个AI网站出来，哪怕只是你自己的需求，先for fun，再for business.

准备材料

要在开始之前，你需要准备什么？

一个谷歌账号

除此之外还需要VScode、GitHub、Vercel、Node.js，但是这些我都会在视频里一一介绍，所以不着急下载或者注册。那我们开始吧！

1. 下载安装代码编辑器VSCode

VSCode 是一款免费、强大且易用的代码编辑器，它支持多种编程语言，提供智能代码补全、调试工具和丰富的插件生态系统，适合从新手到专业开发者的各类用户使用。

2. 下载安装Node.js

Node.js是一个开源、跨平台的 JavaScript 运行环境。它允许你在服务器端运行 JavaScript 代码。主要特点包括：

运行快: 使用特殊技术让 JavaScript 代码运行得非常快。
高效工作: 能同时处理多个任务,不会卡住。
丰富资源: 有大量现成的工具包,帮助快速开发。
适合网络应用: 特别适合制作网站和各种网络程序。

3. 下载安装git

Git是一个版本控制系统,你可以把它想象成一个非常智能的"时光机"for 你的代码:

保存历史: Git 会记录你对文件的所有改动。你可以随时查看或回到之前的任何版本。
多人协作: 多个人可以同时在不同的"分支"上工作,然后再把改动合并在一起。
备份: 你可以把代码推送到像 GitHub 这样的在线平台,作为一个远程备份。
实验: 你可以创建"分支"来尝试新想法,不会影响主要的代码。
追踪变化: 你可以看到谁在什么时候做了什么改动。

4. 安装Next.js项目

打开vscode终端，输入下面命令，创建项目

npx create-next-app@latest

输入你想要命名的工程名字
等待1分钟左右创建完成

输入下面指令进入到这个工程文件夹，注意andy需要替换成你命名的实际名称

cd andy

然后输入下面指令启动项目

npm run dev

5. 给AI提需求

访问stability.ai地址，创建账号，复制API KEY和接口说明

我的prompt如下（仅参考。多多试试自己写）

我是nextjs项目，我想要做一个游戏道具生成器
1、用户可以输入道具名称（比如药水）
2、用户可以选择不同的风格（像素风、赛博朋克）
3、用户开通选择不同的等级（比如普通、精英、史诗）
选择完成之后，需要把对应的prompt去请求SD3的接口，然后生成一张图片展示给用户。
我希望用户选择的风格、等级的prompt你需要提前给我写好，然后拼接上用户的道具名称，构造一个完整的prompt去请求stable diffusion的接口。
这是andy/app/page.tsx我的页面，目前代码是import Image from "next/image";

export default function Home() {
return (
<main className="flex min-h-screen flex-col items-center justify-between p-24">
<div className="z-10 w-full max-w-5xl items-center justify-between font-mono text-sm lg:flex">
<p className="fixed left-0 top-0 flex w-full justify-center border-b border-gray-300 bg-gradient-to-b from-zinc-200 pb-6 pt-8 backdrop-blur-2xl dark:border-neutral-800 dark:bg-zinc-800/30 dark:from-inherit lg:static lg:w-auto lg:rounded-xl lg:border lg:bg-gray-200 lg:p-4 lg:dark:bg-zinc-800/30">
Get started by editing 
<code className="font-mono font-bold">app/page.tsx</code>
</p >
<div className="fixed bottom-0 left-0 flex h-48 w-full items-end justify-center bg-gradient-to-t from-white via-white dark:from-black dark:via-black lg:static lg:size-auto lg:bg-none">
<a className="pointer-events-none flex place-items-center gap-2 p-8 lg:pointer-events-auto lg:p-0" href=" " target="_blank" rel="noopener noreferrer" >
By{" "}
<Image src="/vercel.svg" alt="Vercel Logo" className="dark:invert" width={100} height={24} priority />
</a >
</div>
</div>

ini
Copy
  <div className="relative z-[-1] flex place-items-center before:absolute before:h-[300px] before:w-full before:-translate-x-1/2 before:rounded-full before:bg-gradient-radial before:from-white before:to-transparent before:blur-2xl before:content-[''] after:absolute after:-z-20 after:h-[180px] after:w-full after:translate-x-1/3 after:bg-gradient-conic after:from-sky-200 after:via-blue-200 after:blur-2xl after:content-[''] before:dark:bg-gradient-to-br before:dark:from-transparent before:dark:to-blue-700 before:dark:opacity-10 after:dark:from-sky-900 after:dark:via-[#0141ff] after:dark:opacity-40 sm:before:w-[480px] sm:after:w-[240px] before:lg:h-[360px]">
    <Image
      className="relative dark:drop-shadow-[0_0_0.3rem_#ffffff70] dark:invert"
      src="/next.svg"
      alt="Next.js Logo1111111111"
      width={180}
      height={37}
      priority
    />
  </div>

  <div className="mb-32 grid text-center lg:mb-0 lg:w-full lg:max-w-5xl lg:grid-cols-4 lg:text-left">
    <a
      href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
      className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
      target="_blank"
      rel="noopener noreferrer"
    >
      <h2 className="mb-3 text-2xl font-semibold">
        Docs{" "}
        <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
          -&gt;
        </span>
      </h2>
      <p className="m-0 max-w-[30ch] text-sm opacity-50">
        来看看我的AI工具
      </p >
    </a >

    <a
      href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
      className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
      target="_blank"
      rel="noopener noreferrer"
    >
      <h2 className="mb-3 text-2xl font-semibold">
        Learn{" "}
        <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
          -&gt;
        </span>
      </h2>
      <p className="m-0 max-w-[30ch] text-sm opacity-50">
        Learn about Next.js in an interactive course with&nbsp;quizzes!
      </p >
    </a >

    <a
      href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
      className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
      target="_blank"
      rel="noopener noreferrer"
    >
      <h2 className="mb-3 text-2xl font-semibold">
        Templates{" "}
        <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
          -&gt;
        </span>
      </h2>
      <p className="m-0 max-w-[30ch] text-sm opacity-50">
        Explore starter templates for Next.js.
      </p >
    </a >

    <a
      href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
      className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
      target="_blank"
      rel="noopener noreferrer"
    >
      <h2 className="mb-3 text-2xl font-semibold">
        Deploy{" "}
        <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
          -&gt;
        </span>
      </h2>
      <p className="m-0 max-w-[30ch] text-balance text-sm opacity-50">
        Instantly deploy your Next.js site to a shareable URL with Vercel.
      </p >
    </a >
  </div>
</main>
);
}
上面是运行项目默认的代码，你可以全部都删掉，按照我的需求 给我一个完整的新的代码。

import fs from "node:fs";
import axios from "axios";
import FormData from "form-data";

const payload = {
prompt: "Lighthouse on a cliff overlooking the ocean",
output_format: "jpeg"
};

const response = await axios.postForm(
https://api.stability.ai/v2beta/stable-image/generate/sd3,
axios.toFormData(payload, new FormData()),
{
validateStatus: undefined,
responseType: "arraybuffer",
headers: {
Authorization: Bearer sk-MYAPIKEY,
Accept: "image/*"
},
},
);

if(response.status === 200) {
fs.writeFileSync("./lighthouse.jpeg", Buffer.from(response.data));
} else {
throw new Error(${response.status}: ${response.data.toString()});
}上面是SD3官方接口文档，请你参考
sk-6MYvoH1ewYNdyZZ42FvZOCYhe7I4yW1FyBPXSBnfAgKK4hHB 我的API key
请给我完整代码