出海，应该不少圈友知道咋回事。出海说白了，就是去赚美刀。
出海有不少方式，比如跨境电商、短剧出海、应用出海等等。
今天这儿说的事情是应用出海的第一步--做网页！
做网页难不难呢？
不难！网上找些教程，学上一两个小时，大部份人都能上手。
做高颜值，漂亮精致的网页难不难呢？
很难！我们要懂的东西太多了，要学前端技术，例如HTML、CSS等。但，最关键的还是我们要懂审美！
不过，有了Claude，不懂代码，不懂审美，做个高颜值的网站，也能像喝水一点简单。
审美炸裂的Claude
ChatGPT也能做网页，我在《学会了ChatGPT，零基础的我只用3小时写了个GPTs导航站，第一篇》的教程里就有详细介绍。但是ChatGPT做的网页风格很单一，离美观还有不小的差距。
Claude3.5的发布后，就有圈友说很牛，用来写网页效果非常炸裂！听到圈友们这么推崇，我也去体验了下，结果没让我失望！
下面这个就是我用Claude生成的网页，整个过程中，我没有写一行代码！
我的提示词非常简单
请帮我生成网站的首页，要求没有任何配图，要有科技感和高技感
让我惊艳的点有两个：
1）出色的审美能力
我在提示词中和审美相关的有两个方面，科技感和高技感。
那么，网站要如何体现科技感和高技感呢？
网站的配色和动态效果！
Claude为整个网页选择了蓝色和紫色渐变色作为主题风格，另外，打开网页时候还有恰到好处的动态效果。
通过这两点，让整个网页看起来美观了不少。
2）精细化调节能力
在第一轮生成网页的时候，不是一开始就很满意，可能某个文案不好看或者某个按钮样式太丑了。
以前我用ChatGPT时，碰到这种情况，只能手动修改。ChatGPT微调网页的能力并不出色，甚至可以说是难用。
Claude在这方面，可以说完虐ChatGPT，Claude几乎是指哪打哪，就算有错，错误的原因大部分是我们描述不到位。
到这里，小伙伴们应该也知道了，Claude在生成网页方面真的很强，那么，接下来，我会介绍下如何使用Claude生成网页！
零基础使用Claude生成高颜值网页
在开始介绍介绍怎么用Claude生成漂亮好看的网站前，先给大伙儿介绍下我们可以用的工具
Claude网页生成工具
如果只是用于生成网页，我不建议大伙儿订阅Claude的高级会员。
Claude的高级会员要20$一个月，但即便是付费的会员，使用Claude的次数也是受限的。反而是一些第三方工具使用Claude并不受限。
下面我就介绍些我知道的，可以立即用起来的工具.
cursor - AI写代码利器
强力推荐! 强力推荐！cursor支持claude、gpt等多种AI大模型。
没有任何吹嘘的成分，有了cursor，只要你会打字，零基础也能写出高水平的漂亮网页。
cursor是一款AI代码编辑器，类似于github的copilot，从我的实际体验看，cursor远胜github copilot。
cursor可以让AI扫描整个项目的代码，这项能力得益于大模型的支持的上下文越来越长。相对的，github copilot只能读当前的文件。
另外，我们可以在编辑器内，通过语言描述功能，cursor会精准的生成代码。点击接受生成的代码后，会自动显示在左侧的编辑区。
最让我拍手叫绝的是，cursor非常智能，当我要新增内容时，cursor只会修改新增的部分。而它的老对手GPT一般会全部都改了，因此我们用GPT微调网页极度困难。
另外新增的功能会友好地展示在右侧，并且高亮标识出来。
那么，cursor一个月多少钱呢？20$! 确实有点贵，价格是github copilot的两倍，但是，人家cursor确实好用啊。
当然，我那么强力推荐cursor，并不只是他好用，最关键的是，cursor新用户7天免费使用! 我们每个人都有机会白嫖7天，7天过期后，再注册一个帐号，又是7天。。。
monica - all in one的AI助手
套了各种壳的AI助手很多，但monica是我唯一长期使用的AI助手。
monica也支持了claude 3.5 sonnet模型，只要是付费会员，就可以无限使用claude 3.5 sonnect模型了。
claude
官方站点，不必过多解释。官方，就是质量的保障。
唯一不好的一点是，即便是付费用户，用的claude 3.5多了，也得受限。所以，我并不是很推荐大伙儿为了做网页而花20$买个会员。
texto.size
这个是群友今天新鲜出炉网页生成站点，也是基于Claude。
优点很明显，可以白嫖。缺点呢，就是不支持站点生成内容的微调。
毕竟只是独立开发者，生成网页Claude的费用可不小，生成一个网页估计得几毛钱。
希望站长能够长期坚持下去吧～
传送门:https://textto.site
介绍了那么多工具，我最推荐的还是cursor，用cursor，即便你没有任何编程基础，也能轻松上手。
接下来的内容不要担心看不懂，这是个零基础也能实践的教程。
我就以一个小需求为例，讲讲如何使用claude模型来做漂亮的网页。
最近flux很火的，我们就来构建一个flux图片生成站点吧！
AI生成flux图片生成站点
在开始前，我先来简单分析下，一个简单的flux图片生成站点由哪些网页构成呢？
一般来说，一个完整的工具站，大部分都会有下面几个组成部份：
1、首页，介绍站点的功能
2、功能区，一般是工具界面
3、价格介绍
4、登陆页面
除了以上主要的页面外，其实还有其他的页面，就不全部列出来了
为了演示方便，我们就只做1个页面，功能页面和价格页
在此处，我们使用的演示工具是cursor, 可以下面的连接进行下载
https://www.cursor.com/
所有的新用户都可以免费使用7天！
cursor基础用法
我们先简单讲解cursor的用法，以及如何从零开始创建一个可以被全世界人民访问的网页，以便于后面更好的分享。
项目创建主要分为2部分：
1、在github创建帐号同时创建项目，用于管理我们的代码
2、在vercel中部署我们在github中的项目，让全世界人都能访问
我们来看看如何创建github项目
在github中创建项目
github是个代码管理平台，全世界的程序员都会使用。
如果你还没有github帐号，就需要注册一下。
关于注册github，实在搞不定，谷歌或者百度搜索「github注册」，都能找到很好的教程。
我们注册好github帐号后，进入:
github.com
应该能看到图片中「New」按钮，点击New按钮，就能跳转到我们的项目创建页面。
输入项目名称后，将网页拖到最下方，点击「Create repository」就可以完成我们的项目创建了。
完成项目创建之后，会弹出下面的这个页面
代表着我们的github项目已经创建成功了。
不过，这还没有结束，我们需要把这个项目下窄到本地，方便我们让AI进行修改。
只需要点击图片中的复制按钮，如果是苹果电脑的话，打开一个ternimal的窗口,然后在窗口中执行下面的指令即可。
git clone 「你的项目地址」
执行后，可看到类似下方的效果。
如果是windows电脑，操作也差不多。
完成了项目下载到本地后，打开git clone下来的空目录，创建文件名为index.html的文件,把下方的代码拷贝到目录中。
<html>
<title>这是一个测试页面</title>
<body>
<h1>
这是一个测试页面
</h1>
</body>
</html>
具体可参考下方这张图。
flux-img是我们从github上下载下来的项目
index.html是我们新建的文件
index.html中的内容则是上面的代码。
好了，最后，我们在执行一个执行，把这个项目提交到github上
git add .
git commit -m "init"
git push origin master
依次执行下面三个指令后，我们新增的index.html就会被更新到github项目中。
至此，项目创建，更新项目都完成了。
接下来，我们需要做的，就是让这个网页能被世界上其他的人看到。
创建可以被访问的网页
想让我们的网页挂在网上，被全世界的人看到，有很多方式，我在这里儿使用的是vercel。
vercel是可以免费搭建网站的平台，我们今天所有的演示，都是在vercel进行的。可以通过下面的地址到vercel的官网
vercel.com
进入官网后，应该就能看到下面的界面了。
点击「Start By Deploying」，就会跳转到一个新的页面。
这个新的页面，要求我们先进行登陆。
这个页面支持3种登陆方式，我在这儿选择的是第一种登陆方式「Continue with github」
登陆时，按照界面提示，可以和我们上一步注册的github账号关联。
完成登录后, 在Overview的tab下
点击「Add New...」
然后，可以看到，vercel跳转到了创建页面，如下图所示：
这里可以看到，我们新创建的flux-img项目就在列表中，点击import，然后，在弹出的新页面，点击「Deploy」
经过一小会儿的等待后，就能看到vercel有弹出了一个撒花页面
这表示，我们的项目部署成功了。点击最左侧的小窗，就可以看到我们的网页了
比如，我们这个演示的项目，只要访问：
https://flux-img.vercel.app/
至此，如何创建一个项目，如何部署一个项目就完成了。
没有操作过的圈友们可能觉得流程多，复杂。
实际上，只要熟悉了，上面的这些步骤，全部操作完成也就只需要几分钟。
接下来，就是我们的重点了，怎么让AI帮我们生成网页！
cursor基础用法
我们在此处使用的AI代码编写软件是cursor。
没有cursor软件的小伙伴，到
https://www.cursor.com/
下载官方的软件。
在下载cursor后，苹果电脑上，应该会看到下面的图标
点击后，就可以打开我们的cursor页面了（可能需要预先安装vs code，百度查找如何安装即可）。
点击「Open a folder」,选定上一步中下载到本地的项目
打开后，可以看到类似下面的内容。
苹果电脑(windows电脑参考官网)，通过「command + L」可以快捷打开cursor的对话区,如图所示:
在对话区，可通过语言，让cursor帮我们生成页面，例如：
指令执行完成后，可以看到新页面的代码就在下方了
点击Apply，cursor会自动将代码更新到index.html中。
这时候，cursor还需要我们进行二次确认。
左侧的代码区中，需要改动的代码和原来的代码会进行高亮。
如果接受改动的代码，只需要点击右侧的「Accept」即可，不需要则点击「Reject」
在Accept后，找到原来index.html的目录，点击，用谷歌浏览器打开，就可以看到效果了。
在我这儿，生成的效果就是下面这样子的了。
这是个简单的博客页面，但是，这页面如果让前端从零开始写，也得花不少时间，而用Cursor,只花了不到1分钟。
好了，cursor的威力给大家见识了，接下来，就开始生成我们的flux-img的首页吧。
生成功能页面
我要生成一个文本生成图片工具页面。要求有个提示词输入区，已生成图片列表展示区，正在生成图片展示区，导航栏，网站footer，开始生成按钮，风格要求有科技感，美观精致
cursor生成的网页效果如下
看起来提到的要素都有了，整体也还行，我们在添加一个FAQ模块。
请帮我添加一个FAQ模块
收到指令了，cursor马上生成了下面的模块了，上面的文案，其实也是cursor生成的。
生成价格页面
有了前面功能页面生成的经验后，在生成价格页面应该是很简单的事情。
请帮我生成价格页面
不到一会儿的功夫，就可以看到下面的价格页的效果了
页面美化--风格调整
前面的两个页面很快生成了，不过，页面看起来不咋美观啊。
我前面说过，Claude3.5是懂得审美的，cursor是基于Claude3.5的，所以现在生成的页面，还不是cursor的真正实力。
我们还可以再进一步美化。
在指令区，我们先输入 @,然后选定需要调整的页面，比如下面，我们需要调整index.html
我们可以先不用指定任何风格，先让AI帮我们进行一轮美化
请帮我美化当前的网页
经过一轮美化后，网页经过了席位的调整，相对于上一个版本，稍微好了一些。
我们再进一步，要求对网页的风格进行修改
请将网页风格改为暗黑风格，要求网页效果看起来专业，酷炫
整体风格已经有了很大改观，不过，细节上，还是太粗糙了。
比如，导航栏太宽了，字体也不好看，输入框不够突出。。。等等
我们接下来，针对每一部分都进行优化
细节美化--导航栏
请帮我美化导航栏，导航栏太宽，字体太丑
初步调整后，效果还是不够好，我们再进一步调整
导航栏的文案改成英文，右侧的链接只有 Login，中间的链接有"Home、Price按钮"，要求链接要突出，方便看，并且要美观
经过多轮的调整后，最终达到了下面的效果
这个效果我还是比较满意的，整个过程的提示词如下
1、AI Image Generator 靠左侧，Home和Price要在导航栏中间，Home去掉按钮背景色
2、Home和Price在导航栏中间
3、美化Home和Price样式
提示词输入模块美化
1、请美化输入提示词模块
2、输入提示词模块文案改成英文，同时，美化标题
经过两次调整，提示词输入模块看起来更加美观了。
但是，我感觉一个提示词输入框就占据了整个页面的宽度，看起来并不美观，所以，我调整了一下布局
提示词输入模块在左边，右边是生成的图片模块
这样子，整个页面看起来更加紧凑了。
接下来，对推荐作品列表
FAQ模块
这两个模块的优化，都是使用同样的方式。
在这个过程中，没有手动添加任何的代码。
price页面美化
在前面，我主要集中精力在美化index.html。price.html的页面还是很丑的。
在美化price页面前，有个很重要的点大伙儿要知道---网站的风格一致性。
一个网站的网页，如果一个网页是暗黑主题，另外一个网页是明亮的主题，那么看起来就很别扭。
用AI美化Price页面，很重要的一个点，就是，保持两个页面风格要一致。
注意!
在这里，我让cursor学习了index.html的页面风格
cursor的智能让我有点震惊，它竟然知道我的意图是吧price.html的风格改成和index.html一样。
最终，cursor没有让我失望，整个price页面经过美化后，看起来非常专业了。
自此，两个网页我已经用AI完成了。
前面写了一大坨，那么，用AI做完这两个网页花了多长时间呢？
加上调整和美化的话，加起来也没有超过10分钟。
那么，如果让人来做这网页要花多久呢？
按照一个人一天300行代码算，应该也得2天左右。。还没有加上各种UI设计。
部署上线
网页做出来，必须得让其他人也访问才有意义，接下来，我们来讲讲如何部署到vercel。
在前面的步骤中，我们已经在github创建了我们的项目了。并且，也将github和vercel关联。
我们只需要把我们的代码提交到github，然后更新下即可。
git add .
git commit -m "add page"
git push origin master
按顺序执行指令，那么就可以将代码更新到vercel了。
提交到vercel后，vercel会自动更新我们的项目。
然后通过链接，就可以看到我们更改后的项目了。
https://flux-img.vercel.app/
这个链接发给其他人后，他们也是可以直接访问的。
后续，可以绑定自己的域名，这个操作也不难，可以在godaddy等购买域名后，就可以在vercel进行绑定了。
站点推广
一般有下面的几种方式。
google search consolse
https://search.google.com/
将你的站点提交GSC后，谷歌会更快收录你的站点，当用户搜索关键词的时候，就机会看到你的网站。
Hack News
当完成我们的工具后，可以提交到Hack News，Hack News的访问量很大，当我们提交的内容活了之后，有机会获得更多曝光量和外链（外链和谷歌搜索排名有关，一般外链越多越好）
Product hunt
新产品必然提交的站点，虽然有不少人在拉票，但是上了featured后，能获得不错的曝光量.
其他导航站
出了上面列出来的几个外，还可以提交到各个导航站，我们可以提交到哪些导航站？有哪些导航站是免费的？
这些暂时不是本篇的内容，后续，如果有机会再说吧～这次分享就到这儿啦
本次就分享到这里了，欢迎大家链接我：
下面是我的免费知识星球， 我会持续分享最新的 AI 相关资讯，学习 AI 技术，探索如何巧妙结合最新 AI 技术，打造副业玩法。欢迎大家扫码免费加入
没有评论:
发表评论