从零建站实操：我用AI工具5分钟做出了个人作品集网站

个人实操记录 | 2026年7月前阵子朋友想做个人作品集网站展示项目经历找外包报价3000起步建站平台模板又太千篇一律自己学编程更是不现实。我之前用过一款叫AiPy的AI执行工具朋友给的体验码uv2B能直接用大白话描述需求让它写代码就拿来试了试建站结果确实可行把过程记录一下。一、需求描述朋友的需求不复杂单页面网站有导航栏、英雄区、关于我、项目展示、联系方式五个板块深色主题搭配橙色点缀项目用卡片布局手机端能正常显示。打开软件新建任务后我在输入框里把需求一次性写清楚帮我做一个个人作品集网站要求1. 单页面包含导航栏、英雄区、关于我、项目展示、联系方式五个板块2. 配色用深色主题主色调深蓝点缀橙色3. 项目展示用卡片布局至少放3个项目4. 响应式设计手机端也能正常显示5. 最终输出完整的HTML文件二、执行过程点击发送后AiPy没有直接开始写代码而是先做了一轮需求分析。它自动分配了三个角色视觉设计师Leo负责配色方案前端架构师Eva负责响应式和交互质量检测师Max负责代码质量和兼容性验收。然后加载了一站式开发坊技能进入需求定义阶段逐个板块梳理具体要求。这个前置分析大概花了1分钟左右之后它开始正式写代码。写完后自动切换到预览标签页直接展示网站效果。左侧工作目录里也出现了生成的portfolio.html文件。三、网站效果先看网站顶部。导航栏左侧是Portfolio.品牌名右侧有首页、关于我、项目、联系四个菜单项带毛玻璃模糊背景效果。英雄区大标题用代码创造令人惊叹的数字体验其中数字体验四个字用了橙色高亮下方有查看作品和联系我两个按钮。整体深蓝背景搭配橙色点缀视觉对比度很强。往下滚动是项目展示板块采用卡片布局。这次生成了两张项目卡片第一张是智能数据分析平台描述AI驱动的数据可视化平台卡片顶部用深蓝色渐变背景配柱状图图标第二张是电商管理后台全功能电商管理系统卡片顶部用深绿色渐变背景配购物车图标。卡片在深色背景下层次分明视觉上不单调。四、交付总结完成后它输出了一份交付总结列出了技术亮点。视觉方面用了深蓝#0a0e1a做主背景橙色#f57c00做按钮和高亮点缀英雄区标题用蓝橙渐变文字导航栏做了毛玻璃模糊效果。响应式方面设了两个断点桌面端大于992px时三栏卡片布局平板端768-992px时两栏自适应布局。五、我的评估先说做得好的地方需求还原度高。五个板块、深蓝橙色配色、卡片布局、响应式设计全部实现了没有偷工减料。前置分析有价值。自动分配专家角色的做法说明AiPy内部做了任务拆解不是简单生成一段代码就交差。这对复杂任务来说比较靠谱。预览功能省事。生成后直接在工具里看效果不用自己开浏览器加载文件不满意可以继续追问修改。再说局限项目卡片只有2个。提示词写了至少3个项目实际只生成了2个需要追问补充。示例内容需要替换。项目描述是AI编的正式使用前必须替换成真实信息。没有部署环节。生成的是本地HTML文件上线还需要自己部署到GitHub Pages或Vercel等平台。我的建议把生成的网站当作起点。先用它快速搭出框架和样式再手动替换内容、补充项目卡片、部署上线。比从零手写或改模板效率高不少。六、两个进阶技巧1. 迭代修改第一次出来的网站不满意直接在输入框追问就行。比如项目卡片再加一个改成三列布局英雄区按钮颜色换成绿色系——它会在当前基础上修改不需要重新描述整个需求。这个上下文记忆功能在迭代优化时很方便。2. 指定技术栈如果对技术有偏好在提示词里直接指定。比如用Tailwind CSS做样式项目展示加Framer Motion动画联系表单用react-hook-form验证。它会按指定技术栈生成代码结构方便有开发能力的人在此基础上二次开发。七、总结整体体验下来用AiPy建站的核心流程是描述需求 → 分析执行 → 预览效果 → 迭代修改。从输入需求到看到网站不到5分钟。需要注意的几点需求描述尽量具体板块、配色、布局、响应式全写上生成后先预览再追问修改正式上线前替换示例内容并部署到托管平台。对不会写代码的人来说这可能是目前最快搭建网站的方式之一。对会写代码的人来说用它快速出原型再二次开发也比从零开始效率高。朋友那个作品集网站最后又追问了两轮微调配色和补项目卡片前后花了不到10分钟比我预期快很多。以上为个人实操记录仅供参考。AiPy Pro 官网https://www.aipyaipy.com/?referralaipy_uv2B邀请码uv2B