第一部分是想法产生和需求整理的过程，想直接看教程的从下一部分开发流程开始。
痛点和需求
写一个ai导航站的想法，产生于我第100次输错gpt成gdp之后🙂我在想，我每天用ai工具的时间比我几顿饭的时间加起来都长，为什么要用这么痛苦、低效的方式来折磨自己？有没有什么只需要点击，不需要每次都输入、搜索的方式来方便地使用ai工具？ 我想到了一些方法：收藏夹，插件，或者导航页。收藏夹无疑最方便，每个浏览器里都可以做，但不同浏览器之间没法方便地进行同步。edge，chorme，via，safari，如果我每个浏览器都建一个收藏夹，我还是搜索或者记域名算了。 插件要复杂些，而且也要根据不同的浏览器来开发。想运行在不同的浏览器上似乎只能选择网页了，于是我决定先看看其他人已经做好的导航页是什么样子的。
![[Pasted image 20241206063945.png]]![[Pasted image 20241206064100.png]]![[Pasted image 20241206064129.png]] 这些导航站的水平宛如饭店菜单第一页全是饮料。算了，自己做一个吧。先整理下需求好了。
兼容：所有浏览器和套壳浏览器里比如qq微信里都要能打开，当然选择网页这个载体本身就解决了这个需求。 简单：这应当是一个足够简单的导航站，只收录最主流最常用的ai工具，以我的经验来看代表性产品可以压到大约10个左右。要简单到一眼就能看完的地步，分类清晰，不需要翻页，切换或者搜索。 上面是内容简单，另外域名也要简单。财力不足，我查到的四字母域名和.ai域名，没一个买得起的，放宽到六字母以后找到了liteai.top，含义契合也不太难记。 不分里外：我查到的这些导航站，用的时候都要关掉网络工具才能打开。但是打开导航以后，又必须打开网络工具才能正常访问gpt、mj。这一套下来比我记住域名都麻烦，用这种用法能坚持下来的都是神人👍我做的导航一定要在里外都能很快的打开。 好看：这个不消说，我做的产品也许视觉动线会不合理，但一定至少肯定是好看的。 需求就这些，捋清需求以后产品的雏形就已经在我脑中成型了，大约是一个列表样式的，大框套小框的网页。 只我用的话黑底就够了，但或许也会有其他朋友在用，还是加上主题/语言的切换好了。开干
下面的所有ai工具的使用，都需要全程挂网络工具，如果你没有的话千万不要到我的ai导航liteai.top上找，那里没有你想要的。 当你在使用过程中遇到了各种奇怪的 打不开的 发生错误的情况，除了切换节点以外，请尝试使用浏览器的无痕模式。一个好的尝试
开发流程
流程磕磕碰碰，也算经历了四五次优化。现在的核心是windsurf。 第一代的ai开发工具应该是github copilot那一代，以代码补全功能为核心。 第二代应该是v0、bolt为代表的，在线ide型的。可实时预览，基于对话来编。在线在环境配置上更方便，但本地素材没有本地ide好处理。 第三代就是cursor，windsurf为代表的，ai本地ide。环境配置和调试运行更难一点，但调用本地素材和修改项目细节更方便，可以做完整的、后续更新方便的项目，可以自己接api key。 第四代就是多agent框架，代表就是mgx，我在参与内测，虽然暂时还没有发布。接下来发展的形式可能会统合在线与本地，来解决单一载体难以处理的问题。多agnet可以完成任务的拆解，允许提出更复杂、更难以实现的项目需求。
![[流程.canvas|流程]] 这是我0代码经验的开发流程。具体你要如何执行，需要看你的惯用软件。 如果你有钱，请直接冲devin。如果没钱请继续看。
如果是程序员，或者至少有任何一门语言的编程基础，适合以windsurf/cursor为核心，其他工具辅助。它是ai版的vscode，插件是兼容的，也可以用git命令。如果不会编程请继续。
如果有设计基础，适合figma做出原型以后导入到v0。你应当以v0作为你设计、开发工作的核心，观察功能哪里没有实现，哪里用起来有问题，v0是可以实时预览的前端开发工具，也可以发布，只是自定义域名属于收费内容。如果不会设计请继续。
总的来说就是完成自己熟悉、容易做好、不需要沟通成本的部分，剩余的部分由ai来补全。
如果你像我一样没钱还什么都不会，但是想做出来点方便的产品，那么，你最需要的是什么？
答案是：实时预览+无限额度。
当你不会编程的时候你想象不出来程序对应的功能和界面，你需要看到，才会改，也就是实时预览。同时，不清楚编程会使得你不知道什么效果可以怎样实现，会涉及到反复修改才能接近你想要的效果的，也就是需要无限额度。如果你像我一样 走完设计+编程+流程三步，你也可以生产出来一个你需要的工具。v0生成设计稿，windsurf编程，其他工具发布。
接下来细讲每一个环节。
设计
v0.dev和bolt.new都是很好的前端设计工具，但他们的使用是有边界的，适用于不需要本地素材的情况。也就是你设想的东西如果可以仅仅使用简单的颜色/形状来搭建出来：类似这样的效果，那是容易实现的 ![[Pasted image 20241215042734.png]] 而写实的效果是不容易实现的，类似这样的一个数字人![[Pasted image 20241215042955.png]] 或者页面上的一个3d模型，是难以实现的。 设计这部分以v0为例。
注册
浏览器顶栏输入v0.dev。进入网站后，点右上角的sign up，输入你的邮箱点击cuntinue。进入你的邮箱，登录以后找到![[Pasted image 20241215043733.png]]vercel发给你的验证码，复制以后回到v0粘贴到输入框。记好你的用户名和密码。
使用
v0的界面如图所示，一个类似gpt的输入框和侧栏样式，左侧是历史对话和新建对话。 中间的输入框输入你的要求，也可以粘贴图片和输入文件、链接。 ![[Pasted image 20241215044950.png]] 当你输入你的要求后，v0会运算一段，然后左边是对话，可以继续提意见修改。右边是预览和代码![[Pasted image 20241215050942.png]] 点preview切换预览，点code看代码。![[Pasted image 20241215051108.png]] 继续修改![[Pasted image 20241215051348.png]] 不太满意，给图片让它继续修改。几轮下来基本功能实现了，虽然抽纸的动画还非常抽象。 ![[Pasted image 20241215053053.png]] 当你想要精细化调整的时候，点击右上角的小鼠标select这里，可以把鼠标放在你想改的位置告诉他怎么改。 ![[Pasted image 20241215053942.png]]
其他功能：
如果你认为现在的版本的修改是不适当的，那可能需要 fork（分支）或 撤回到适当的版本。他们在页面上的右上角这里。 ![[Pasted image 20241222194916.png]]![[Pasted image 20241222194921.png]]
发布
当你想分享这个网站的时候，使用鼠标旁边的一个大正方形套一个小正方形，新页面打开以后复制链接。这是我做的赛博抽纸的网页 https://bl7me8sx01svpi1rb.lite.vusercontent.net/
v0也可以自定义域名，但是要充会员，20刀。 这些就是v0的基本用法，应该足够帮助设计师朋友做出些好玩的东西了。
bolt.new的用法补充
bolt.new与v0很相似，都是实时预览的前端编程器，当v0不能满足你的需求的时候用它做补充，它会生成完整的前端环境，所以第一步运行会比v0慢很多。当你想构建比v0更完整、复杂、可维护，后续还想更新的项目的时候或许bolt.new适合你，它对github的连接也比v0更紧密，但如果你这些都听不懂就不用管他，当v0平替就完了。
接下来是重中之重，含有大量使用起来的细碎技巧。
编程
曾经最好用的ai编程工具非cursor莫属，但windsurf出来以后答案就不那么确定了。如果在我这里的话，我会选windsurf，它比原来的cursor更聪明，额度更多。
下载安装、注册登录、汉化
进入官网(https://codeium.com/windsurf)，下载。 ![[Pasted image 20241215060314.png]] 安装的过程中会提示登录账号，点击以后我们 回到网页，我这里用qq邮箱注册。
打开软件这里有从cursor导入，没有的话不用管一路continue到这个界面，点最左侧左边这列倒数第二个图标，扩展![[Pasted image 20241215061052.png]] 然后搜中文，找到这个地球仪一样的图标，点install安装。![[Pasted image 20241215061159.png]] 遵照页面上的指示，Ctrl+Shift+P 并输入display，点第一个Configure Display Language ![[Pasted image 20241215061452.png]] 点 中文![[Pasted image 20241215061551.png]] 前期工作就到这了，接下来我们可以开始调教ai来写代码了。
ai写代码
windsurf的主界面结构如此。![[windsurf.png]]
终于到了这个时刻！踏上通往编程巅峰的第一步，神圣且充满仪式感的，大声喊出他的名字 ——新！建！文！件！夹！
这一刻，仿佛能听见键盘的颤抖，if和else的灵魂在低语，未来的传说将在这里启航。
虽然前方可能是无尽的屎山，但有AI神兵相助，拉屎也会变成一种艺术！ 此刻，我就是代码的魔法师，文件夹就是召唤阵，伟大的工程，从此刻开始点亮！ windsurf，启动！ 😅😅😅看困了可以调剂一下。
接下来我们在你找得到的地方新建一个文件夹，路径里最好不要有中文 我建在桌面了，里面是几个我原来做好的项目。 ![[Pasted image 20241215070859.png]] 回到windsurf，左上角打开文件夹，选你要的导入到windsurf![[Pasted image 20241215071134.png]] 导入以后的画面应该是这个样子的，左边是空的文件树，右边是ai。打开关闭终端的快捷键是shift+~，左上角esc下面的。调整页面布局可以看右上角的最小化左边的那些图标。 ![[Pasted image 20241215071801.png]] 我们就从ai对话框开始，点击对话框下面向上的小箭头可以切换对话模型，效果最好的是claude3.5 ＞cascade base ≈ gpt4o，我建议你先切换成cascade base，这个基础模型是不限量的，聪明程度也是足够的。另外两个模型可以读图，需要读图的时候再切换成claude就好了。 ![[Pasted image 20241215072535.png]]
右侧的 write/chat/legacy，write可以直接改代码，你根据更改的效果选accept允许/reject拒绝。chat生成但不直接更改，需要你手动复制进去。legacy没用。听不懂直接一直开write就行，接下来我也会按write讲。
切到write，提出需求。![[Pasted image 20241215085903.png]]
很好，他已经写出了一点东西虽然我还不知道这是什么。运行起来看看。 ![[Pasted image 20241215090137.png]] 点左边从上往下数第四个，长得像三角形的这个，运行与调试。然后切到edge浏览器 ![[Pasted image 20241215090321.png]] edge展示了这样一个页面。接下来我们分屏操作，把edge和windsurf分别放在左右两边。选择edge再windows+←放到左半屏，点windsurf让它到右半屏。 ![[Pasted image 20241215090814.png]] 我这里再调整了下布局，关掉了终端和边栏。接下来如果你对windsurf的这一步工作满意，就点accept允许，不满意就reject拒绝。 你也可以一直不点允许也不点拒绝，再提要求让它继续生成。他会照做，但我还是建议在你认为可以的时候点允许，相当于存一次档，这样以后你不满意了再拒绝的时候不会丢失进度。想象一下你让它做了50多步没允许，结果第51步的时候他给你改错了一个东西，这个时候没存档不就相当的不方便了吗😂虽然撤回几步再存一下也是可以的，但存档本身也是整理自己思路的一个过程吧，给自己一点对项目整体进度的感知。 ![[Pasted image 20241215091007.png]] 除了允许和拒绝，撤回也是可以的。 你往上翻，直到自己想撤回的对话。点击箭头 revert to this step，会出现√和×。点击×直接撤回，√也是撤回，但这个对话会回到对话框里供你修改一下重新发送。 ![[Pasted image 20241215091557.png]] 好了我们继续，让它写个暗色模式。注意，功能的生效是要靠刷新的！你可以先不点允许，但要看到改变必须刷新浏览器的页面。继续，让它加个语言切换和横竖屏分辨率适应。 ![[Pasted image 20241215093510.png]] 看样子确实加上了，但是实现方式有点抽象。我们让它合成一个按钮，点击后出现一个下拉列表。 ![[Pasted image 20241215094410.png]] 他还是实现了。接下来我们试试抽象一点的描述，让它把内容变丰富，风格变简洁好看，看他能不能理解![[Pasted image 20241215094758.png]] 继续折磨。他出现了一些问题，然后自己提出了一些解决方案，分步更新。![[Pasted image 20241215095243.png]] 我认同，让它先分大类更新再填充小类。 ![[Pasted image 20241215100313.png]] 接下来没什么要详细讲的了，都是类似的优化，哪里不好改哪里。我们试试让它解析图片吧，把我做好的liteai.top的项目截图给他。先切换到claude来接收图片![[Pasted image 20241215100630.png]]
我传给他这张截图![[Pasted image 20241215130654.png]]，告诉他学习这个的卡片式布局，这是他做的。![[Pasted image 20241215130802.png]] ![[Pasted image 20241215131625.png]]确实也是卡片式，只是没法像v0那样一个截图就能像素级模仿。v0的读图能力很强，如果你需要复刻一个软件可以试试先用v0，生成以后把项目导入windsurf精修功能。 还有两个功能值得说一下，一个是@功能，输入@以后，可以针对你想修改的文件、文件夹，乃至于某一段代码来提问，相当于限定范围。![[Pasted image 20241215131752.png]] 另一个是用npm命令 引入v0项目到windsurf
点数/天数限制，删账户再注册
右上角…点cascade usage ![[Pasted image 20241215084009.png]]
打开以后看中间的三行就够了。 第一行 usage 是剩余天数，注册天数的限制在write上，两周后write模式就无法用了。 第二行第三行是点数限制，限制高级模型的使用。 每次使用高级模型（claude、gpt）对话，消耗一点第二行的user点数，改一次代码消耗一点第二行的flow点数。使用基础模型cascade base不消耗点数，但write模式的时间限制还是要遵循的。 ![[Pasted image 20241215084232.png]] 当点数/天数到上限以后，可以充10刀，也可以按下面的步骤删除账户重新注册。 别担心，历史对话和本地文件都还在，这些并不存储在云端。 ![[Pasted image 20241215075116.png]] 第一步，进官网右上角download左边圆圈，进setting设置 ![[Pasted image 20241215075141.png]] 第二步划到底，delete ![[Pasted image 20241215075234.png]]第三步选中大写文字拖下来继续delete。
接下来浏览器开个无痕模式，再注册一次就又能用了。
部署、发布、买域名
部署和发布，就是把你在本地写的代码放到云端让别人能运行或使用。域名就是我们常用的网址，比如baidu.com就是域名。下面用github page来部署，用namecheap来买域名
下载安装git Git - 下载 ![[git.png]] 然后回到windsurf，选择左边第三个 源代码管理，然后点初始化仓库![[Pasted image 20241215142132.png]] wtite写 我要把代码推到github ![[Pasted image 20241215142624.png]] 然后一路accept直到他告诉你继续干嘛。现在听他的去新建一个 ![[Pasted image 20241215142844.png]] 登录github，点new ![[Pasted image 20241215143040.png]] 取名字，下拉继续![[Pasted image 20241215143128.png]]![[Pasted image 20241215143155.png]] 点击页面中间单行聊天框的最右侧复制链接![[Pasted image 20241215143317.png]] 回到windsurf给他![[Pasted image 20241215143527.png]] 然后一路accept直到提交成功。 过程中需要进行GitHub身份验证，你可以问windsurf他会教你怎么做 ![[Pasted image 20241217025919.png]] 按他说的做，记录好你的令牌，做完以后刷新github仓库你会看到代码已经更新到github了。
接下来是部署和发布。可以继续问ai ![[Pasted image 20241217030522.png]] 照他说的做，设置-页面-main-存储。几分钟以后点击页面上方的链接就能访问了 ![[Pasted image 20241217030637.png]] 完成一个产品的方法就足够了。如果你对域名不满意，看接下来的教程吧，买一个短域名让网址更容易被记住。
域名
构思域名
域名的构成
https://chatgpt.com/ 其中有意义的部分是除标识头之外的chatgpt.com部分，其中的com是顶级域名（没错，域名的结构是从后往前算的），chatgpt是次级域名，再前面是3级。
一个好的域名对网站开发至关重要，对移动应用开发则不重要（app、小程序）。
选择什么样的域名取决于你在建设一个什么样的品牌，如果你要建立一个宏大的，涵盖各个方面产品的品牌，比如小米，那就应该选择简单的mi.com，.com/.net域名最容易被搜索到，各国文化里都容易记住，无歧义、恶意、负面事件，没有外国人不容易读出来的音节。
如果你打造一个小的、先锋的产品，考虑把顶级域名也作为设计的一部分，让用户一并记住是个不错的选择，例如bolt.new，或者v0.dev，还有我的liteai.top。虽然这样域名被搜索到要更难一些，但整体的简洁性还是不错，容易记住。
如果短和意义、传播矛盾的时候，尽量先保全意义，短可以适当牺牲一些。就像pinduoduo.com就比byuh.com要容易记一些，随机四字母短得多，但是记忆性比不上重复的3段拼音。
有一些原则是有效的，这些原则原本用于品牌构建。比如使用拟声词（tiktok），短而重复（滴滴），使用动物（菜鸟天猫推特），这些规律有利于人形成记忆。
可以使用gpt，将你网站的类型，功能，面向人群给gpt梳理一遍，还有预算，他会给你一些可能的方向，其中或许有能启发你的，但大概率他提出的域名都被注册掉了，你可以用这些关键词去搜、比对倒是真的。
或者你捕捉到了某一个含义，比如我想表达少，或者顶级，我要求他列出英语里表达这个含义的常见单词/前后缀，然后我去按照这个部分检索。因为反正无论怎么选，最短也就是两级域名，或许一段来表达少，另一段表达顶级、最强，把意思分离开是不错的。
于是我问了gpt，有哪些常见的顶级域名，其中还有有很多不错的含义，当然最多的还是.com和.net，但也还有很多本身就很有趣的域名 ，比如x.space是spacex的，s.team.是steam的，t.tt是锤子的。还有.music.tv.ai，ai当然是不错的但是有点贵了买不起😂，我还找到了.top和.pro可以表达强。但是没找到表达少的，所以看来适合用第一段表达少，顶级域名用top或pro，组合起来。
这下思路清晰了，我可以让gpt帮我列出一些表达少的、简单的、快的，类似含义的单词，缩写或者前后缀，再挑选有些常见的来搜索是否被注册。 gpt给我列出的里面，我找到了lite、less、mini等等，后来一个个试着在namcheap里搜，搜到了liteai.top是还没被注册的。
另外对于个人开发者而言，找到还没被注册的注册一个就足够了，如果你想被注册的域名已经被注册了，尝试换一个，不要想着找到买家买回来。一方面，域名是年租的，持有者已经承担了数年的租费，不可能亏本给你，另一方面，如果没有看涨的预期，他也不可能持有这个域名数年。所以还在持有这个域名的买家，往往有着较高的心理预期，你的出价往往会跟他心理预期相差很远（有点像钉子户），这不是一个可以按折旧算的生意。除了钱，你找到他的联系方式花费的精力，聊通达成意象的种种损耗也要计算，这些因素使得几乎任何情况下，个人都最好新注册而非买旧的。
![[Pasted image 20241217042034.png]]
工具：namecheap网页、visa/万事达 外币信用卡
![[Pasted image 20241217031250.png]]
部署和发布
在namecheap上挑选和购买域名都从搜索开始。假如我找到了一个不错的关键词lite，我认为他可能较好的传达了我想表达的含义，从搜索的结果来看基本只有lite.cx可以，剩下要么被注册了要么超预算太多。试试换个关键词，liteai，fewai。fewai已经是个品牌了那就避过。就这样找喽，慢慢就能看到合适的。原来筛选过两个，一个liteai.top，一个miniai.pro，后一个更容易记一些，因为mini和pro是手机型号里常见的单词。但是实际输的时候输错的几次miniai，似乎liteai更容易输入一些，于是选了liteai ![[Pasted image 20241217045458.png]] 现在把你想买的网站加入购物车