用AI零代码搭建作品集网站｜Lovable Workshop 第一周回顾✨
上周，我们完成了「用Lovable从零搭建作品集网站」第一期 Workshop，不少同学已经从“只会用Behance做作品集”，进阶到了拥有可分享的独立在线作品集URL。
这篇文章就带大家回顾第一周的核心内容，也为周末的第二期做好准备👇
🎯 为什么要做这个 Workshop？
很多同学都面临过这些困境：
🎾 用Behance做作品集，总觉得不够专业、缺少个人品牌感
🎾 想做独立portfolio网站，但不会写代码，又不想被模板工具限制
🎾 AI工具只停留在“和ChatGPT聊天”，没法真正落地成产品
而这次 Workshop 的目标很明确：
✅ 让你拥有一个可分享的在线作品集URL
✅ 掌握「用AI构建产品」的完整方法论
✅ 方法可复用至 Cursor / V0 / Bolt 等任何AI开发工具
一句话总结：写好Prompt = 写Creative Brief，AI = 你的全栈开发团队。
🧱 核心概念：Vibe Coding 是什么？
我们把AI编程分成了三个阶段，
而这次 Workshop 就是带你直接跳到Level 3：
Level 1 AI = 搜索引擎替代品 问ChatGPT问题 → 复制粘贴文字
Level 2 AI = 写作/分析助手 让AI写文案、分析数据、总结文献
Level 3 AI = 全栈开发团队 用自然语言描述需求 → AI生成可运行的完整网站
这就是「Vibe Coding」——设计师用自己的视觉审美、用户体验思维和清晰表达，让AI帮你把想法变成可上线的网站，完全不用写一行代码。
🛠️ 工具选择：为什么是 Lovable？
对比传统建站工具和其他AI原生工具，Lovable 对设计师/学生非常友好：
🟣 对比传统工具（Wix / Cargo / Squarespace）
🎾 传统工具：$14-25/月，只能填模板，受限于平台
🎾 Lovable：免费版够用，生成真实可导出的代码，未来可无限定制；Pro版$25/月（学生半价$12.5），比Cargo更便宜灵活
🟣 对比其他AI原生工具（Cursor / V0 / Bolt）
🎾 Cursor：需本地安装，面向开发者
🎾 V0：只生成前端组件，无法一键部署
🎾 Lovable：浏览器打开即用，零安装；对零代码用户最友好，视觉产出质量高，还包含一键发布，直接拿到可分享URL
🧠 核心方法：多AI协作写 Prompt
我们不建议直接在Lovable里写需求，而是用「多AI协作」的工作流，让输出更精准：
1. 构思 Brief：用 Gemini / Claude 先描述你的网站需求，让AI帮你细化结构、明确模块
2. 优化 Prompt：把Brief翻译成Lovable友好的技术语言描述，让AI更懂你要什么
3. 生成网站：把优化后的Prompt丢给Lovable，等待30-90秒即可看到预览
4. 截图反馈：不满意就截图，丢给Gemini或Lovable问「怎么改更好」，快速迭代
💡 小技巧：先在其他AI里写好Prompt再粘贴到Lovable，能节省宝贵的credits！
🎨 动手前：先找视觉灵感
好的视觉参考能让AI生成的网站更符合你的审美，推荐这几个灵感库：
🎾 Mobbin (mobbin.com)：真实App/Web设计模式库，搜「portfolio」看作品集设计
🎾 Dribbble (dribbble.com)：设计师社区，搜「portfolio website」看流行趋势
🎾 21st.dev：React + Tailwind 组件库，Lovable原生集成
🎾 Lovable模板库 (lovable.dev/templates)：官方模板，直接Remix修改最快
✨ Pro Tip：在Prompt里加一句 Reference style: [贴URL或描述]，让AI直接学习参考风格！
🚀 三步生成你的作品集网站
Step 1：写你的 Prompt
Step 2：生成网站
Step 3：迭代优化
我们提供了两种免费/付费迭代方式，帮你把网站打磨到完美：
🔹 Visual Edits（免费，不花credits）
🎾 点击Edit按钮（铅笔图标）
🎾 鼠标悬停出现蓝色高亮框，点击选中后直接修改：文字内容、字体大小、颜色、间距
🎾 适合：微调文字、改颜色、调间距
🔹 Prompt迭代（花credits）
🎾 在Chat区描述修改需求，比如：把Hero背景改为深色渐变，标题居中，字体放大到48px' Only modify the hero section, do not change others
🎾 适合：布局变更、加新功能
💰 免费版每天有5个credits，大概能完成3个长任务，能用免费改的，绝不花credits！
本周分享：
方法论深化（赛马机制 + Brief文档）→ 迭代优化 + 加详情页 → 正式部署上线拿URL
如果你也想拥有一个零代码、可定制、专业感拉满的作品集网站，周末第二期 Workshop 等你来！
