做AI超级个体的 信信信信信信信信
很久以前就问过前端大佬，我想做一个个人博客都需要学些什么编程语言
最基本的html做框架，css做渲染，JavaScript做交互
再进一步就去学各种框架react，vue。。。
但但但，没想到的是，前几天waytoagi的共学课程分享了一个网站，专门做wab，比cursor多了一个一键部署，用下来语义理解也比cursor强（除此之外V0账号出了点问题到现在没用上）
AI编程三巨头bolt、cursor、V0
直接完爆前端
做个1024，俄罗斯方块，个人博客 ... 那都是手到擒来
我把我之前用来给cursor的提示词甩给他
没想到几下就做出来了，效果比cursor好了不知道多少倍
他们bolt的官网
话不多说，我们直接上成品
gorgeous-jelly-645f39.netlify.app/
来step by step，带你直接秒杀前端 首先（基础版）
直接甩给他这个集成了我十多个小时前端知识学习写的提示词
你们负责复制粘贴和对话，而我考虑的就多了
prompt基础布局1.0 我想做一个网页，希望是一个单页面应用，所有需要的东西都使用或者不需要复杂的这个设计将包括个人展示、照片轮播、社交媒体链接以及AI对话界面。以下是整合后的详细设计:
整体布局:
单页面、响应式设计
背景使用柔和的渐变色或轻质感纹理
内容区域采用卡片式设计，白色背景，圆角边框，轻微阴影
导航栏:
固定在顶部，半透明背景
左侧:您的名字或logo
右侧导航链接:首页、关于、作品集、AI助手、联系
英雄区(Hero Section):
占据整个屏幕宽度
左侧:简短自我介绍，包括名字、职业或专长
右侧:个人照片，圆形或特殊形状剪裁
AI助手引导区:
位于英雄区下方
醒目的卡片或横幅设计
简短介绍AI对话功能
“开始对话”按钮，点击后打开AI对话界面
照片轮播区:
全宽度图片轮播器
展示3-5张高质量个人照片或作品照片
两侧箭头按钮用于手动切换
底部小圆点指示当前照片位置
关于我区域:
两栏布局
左侧:详细自我介绍
右侧:技能或兴趣标签，图标化展示
作品集区域(可选):
网格布局展示作品缩略图
点击打开模态框查看详情
页脚区域:
版权信息
社交媒体图标链接，排成一行
每个图标使用相应的品牌颜色，鼠标悬停时轻微放大
AI对话界面:
可通过导航栏的"AI助手”选项或英雄区下方的按钮访问
设计为全屏模态框或独立页面
包含以下元素:
a.顶部:标题栏、简短介绍、AI助手图标
b.中间:聊天形式的对话区，用户消息靠右，AI回复靠左
c.底部文本输入框，发送按钮、可选的语音输入按钮
额外功能:
清空对话历史、导出对话记录、切换主题
响应式设计，适应不同设备
设计细节:
现代简洁的无衬线字体
2-3种主色，保持整体协调
适当使用留白
添加微妙的动画效果，如滚动时的渐入
额外功能:
返回顶部按钮
考虑添加小型博客区域
交互设计:
AI对话界面中，输入后显示加载动画
AI回复使用打字机效果逐字显示
长回复自动滚动到底部
等他生成一会，就可以看到预览了完成的非常好
然后
调整位置，更改文字，添加调转链接，添加图片链接 调整英雄区与关于我的区域，将两个区域融合并美化；
增加作品集至4个，分别为AI实践手册、自媒体实践手册、沉思录、人生繁荣手册，并配上合适的简约图标
调整：
--1调整页面顺序，将作品集调整至最上方
--2页脚区域的社交媒体改为微信、即刻、推特
--3删除联系表单区域的内容
--4注意整体每个区域之间的衔接，保证美观，简约高级
告诉我以下分别需求具体要在哪个位置更改：
--1单独更改自我介绍文字
--2想要添加作品集和社交媒体的跳转链接
--3添加AI chat的api
爽了，写出来了，正好把昨天和今天的额度用完，最花时间的还是写提示词，找自己的目标网站，去对标他的ui设计页面
免费，但要小心点，改两次基本就没额度了
再然后（可选）
甩给它API文档
调用API（我用的deepseek性价比高还有免费额度） ps：这里的deepseekAPI就是用来保证你每次对话都是在和指定大模型对话
第一个问题就是经典的没有提前下载OPENAI的SDK
之前都是用python直接下载，但这回涉及到JavaScript了我就没搞懂
直接跟他说提前下载OPENAI的SDK就可以
最后！！！！
直接Deploy部署，左边对话框就有发布链接了
还不快去试试
进阶版：（可选）
我没忍住实在太好用了，就又花好长时间，找对标-学概念-写提示词-调试
写了这个2.0，高级就完事了
布局2.0 我想做一个网页，整体是一个深紫色高级，简约风格，给人美的感受，体现宁静而悠长的感觉
这个设计将包括个人展示、照片轮播、社交媒体链接以及AI对话界面。以下是整合后的详细设计:
#整体布局:
单页面、响应式设计
主题为三分之二屏幕宽度，居中
我要时刻都有01在交替浮动，填满整个屏幕，浮动的0和1填满
跳动的ASCII码，体现编程的科技感
整体色调上选择深紫色、渐变
内容区域采用卡片式设计，深紫色、极简，圆角边框，轻微阴影
#导航栏:
固定在顶部，半透明背景
左侧:您的名字与logo
右侧导航链接:首页、信息源、作品集、联系
鼠标悬停时出现新的菜单栏
##导航栏与菜单栏交互规则如下：
信息源-AI绘画、AI编程、AI个人提效
作品集-AI实践手册、自媒体实践手册、沉思录、人生繁荣手册
#英雄区(Hero Section):
三分之二屏幕宽度，居中
中间为头像，裁剪为圆形
中间为方框的自我介绍，下一图层有一个圆圈，然后有egde图标chrome图 标，和一个头像图标围绕自我介绍旋转
#照片轮播区:
三分之二屏幕宽度，居中
图片轮播器
展示3-5张高质量个人照片或作品照片
两侧箭头按钮用于手动切换
底部小圆点指示当前照片位置
鼠标放在小圆点上时会显示对应的图片
#作品集区域:
网格布局展示作品缩略图
点击打开模态框查看详情
作品集为4个，分别为AI实践手册、自媒体实践手册、沉思录、人生繁荣手册，并配上合适的简约图标
#页脚区域:
版权信息
社交媒体图标链接，排成一行
每个图标使用相应的品牌颜色，鼠标悬停时轻微放大
媒体分别为微信，推特，github
#AI助手问答:
一个图标按钮始终浮动于右下角
可爱卡通的设计
点击打开AI助手进入对话框
##对话框包含以下元素:
a.顶部:标题栏、简短介绍、AI助手图标
b.中间:聊天形式的对话区，用户消息靠右，AI回复靠左，对话双方有默认头像
c.底部文本输入框，发送按钮、可选的切换主题按钮（主题有：镜界，AI知识推荐）
##额外功能:
清空对话历史、导出对话记录
响应式设计，适应不同设备，对话框可进行拖拽
##回复交互设计：
AI对话界面中，输入后显示加载动画
AI回复使用打字机效果逐字显示
长回复自动滚动到底部
#设计细节:
除中间三分之二以外的左右空白区域，由浮动的0和1填满，体现编程的科技感
现代简洁的无衬线字体
2-3种主色，保持整体协调
添加动画效果：滚动渐入
试下来还是有理解边界的，，不能一次性提太多要求，不然他会偷懒
先改整体布局和效果，最后再改文字和跳转链接
细致修改：（可选）（下面只是事例，根据具体情况和需求自行更改） 再次强调
出现只有进入瞬间有浮动效果
我看不到浮动，是因为和背景颜色重合了吗
结果他的回答没有更改我说的，那就再强调
我觉得还是颜色和背景图的问题，是不是因为区块的背景设置把效果挡住
出来了但是一卡一卡的
要围绕最大圆圈中心进行旋转，旋转半径要和圆圈半径保持一致
中等大小图标也围绕大圆圈旋转
自我介绍块再浅一点，可以用亮粉色
补充：
作品集增加鼠标悬浮轻微放大效果
旋转的中心点坐标还是不对
会出现中间衔接有卡顿
再来个灵魂一击deploy直接部署
还不快去试试，这东西，满满的成就感啊
Stable Diffuison | 开启AI绘画的可控纪元
Midjourney | 开启AI绘画的艺术纪元
Comfyui | 开启AI绘画的精调纪元
Ideogram | 开启AI绘画的设计纪元
