[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"$frFTYdkvNbHXGa8_hj_y2Ltq3jHkKdtK9jHzb2uTwlQk":3},{"item":4,"related":43},{"id":5,"type":6,"title":7,"slug":8,"summary":9,"body":10,"coverUrl":11,"productScreenshots":12,"productLinks":13,"authorName":14,"authorUrl":15,"authorSubject":16,"category":17,"tags":22,"sourceLabel":35,"sourceName":35,"sourceUrl":35,"status":36,"seoTitle":35,"seoDescription":35,"canonicalUrl":35,"isFeatured":37,"sno":38,"sortOrder":39,"publishedAt":40,"updatedAt":41,"createdAt":42},"b53e8d96-5ee6-448e-b249-5573d6adf6d4","article","氛围编程入门","vibe-coding-intro","以网页制作为例，介绍氛围编程涉及到的核心概念，帮助新手入门","这是一篇写给完全零基础新手的指南，内容包括：\n\n1. 什么是网页背后的“积木块”（HTML、CSS、JS 到底在干什么）\n2. 什么是 Vibe Coding\n3. 如何用 Vibe Coding 亲手做出你的第一个网页\n\n## 第一步：认识网页的三个“演员”\n\n一个网页，无论它看上去多复杂，都只是三种东西在合作演戏：\n\n- HTML —— 这是网页的“骨头和肉”\n\n它负责把内容放在网页上。比如：标题文字、按钮、图片、输入框。你可以把它想象成盖房子的结构：先有墙，才有地方挂画。\n\n- CSS —— 这是网页的“衣服和化妆”\n\n它负责让骨头和肉变得好看。颜色、大小、间距、位置，全归它管。还是那个房子：墙是 HTML，但墙刷成粉色还是蓝色，沙发摆左边还是右边，就是 CSS 说了算。\n\n- JavaScript (简称 JS) —— 这是网页的“大脑和动作”\n\n它负责让网页动起来。你点击按钮弹出“你好”，或者网页自动刷新天气，都是 JS 在干活。房子里的电灯开关：你按下开关（动作），灯亮了（结果）——这个“动”就是 JS。\n\n- 举个例子\n\n你在网页上看到一个红色的“购买”按钮。\u003Cbr>\n“按钮”两个字本身 = HTML\u003Cbr>\n红色、圆角、大尺寸 = CSS\u003Cbr>\n点击按钮后弹出“已加入购物车” = JavaScript\n\n这三个演员，平时就住在一个叫 文件 的“剧本”里。最常见的剧本，就是后缀是 .html 的普通文件。\n\n## 第二步：HTML文件是什么？怎么打开它？\n\n你不需要安装任何特殊的软件。一个 .html 文件其实就是一本用“网页语言”写好的剧本，一本只有电脑能看懂的剧本。\n\n- 怎么创建一个 .html 文件？\n\n在电脑上新建一个文本文档（Windows 的记事本，或 Mac 的文本编辑都可以），然后把它的名字从新建文本文档.txt 改成 我的网页.html。系统可能会问“改变后缀名可能导致文件不可用”，点是就行。现在，这个文件就变成了一个网页剧本。\n\n- 怎么打开看效果？\n\n直接双击这个 .html 文件，它就会自动用你正在用的浏览器（比如 Chrome、Edge）打开。浏览器就是“演员”，它负责把剧本演出来给你看。\n\n## 第三步：什么是 Vibe Coding？\n\n传统的写网页，是你自己一行一行去写 HTML、CSS、JS 的剧本。你得记住很多“咒语”，漏一个符号整个页面就白屏了。\n\nVibe Coding（氛围编程） 换了一种完全不同的思路：\n\n你不需要写代码，你只需要用日常说话的方式，告诉一个 AI（比如 ChatGPT、Claude、DeepSeek 等），你想要什么。然后 AI 直接把完整的 .html 文件剧本写好给你。\n你的工作变成了：说想法 → 看效果 → 再提修改意见，就像和一个懂技术的美工朋友聊天。\n\n“Vibe”这个词很贴切，你靠的是感觉和描述：“我要那种深夜小酒馆风格的页面，带一个暗色背景，中间有一句会慢慢浮现的欢迎语”，而不是去想代码。\n\n这就好比你盖房子，以前得自己当木工、泥瓦匠；现在你成了设计师+房主，只管说：“我要一扇落地窗，采光要特别好”，AI 泥瓦匠去帮你实现。\n\n## 第四步：开始你的第一个 Vibe Coding 项目（全程 5 分钟）\n\n下面跟着做，什么都不用懂。\n\n1. 打开你喜欢的任何一个 AI 对话工具\n\nChatGPT、Claude、Kimi、DeepSeek……哪个顺手用哪个。\n\n2. 用最直白的话告诉它你的想法\n\n复制下面这段话，或者自己改一改，发给 AI：\n\n```\n请帮我写一个完整的网页，要求：\n\n· 背景是柔和的深蓝色，像夜空\n· 网页正中间用白色大字写着“欢迎来到我的小站”\n· 字的下面有一个粉色的按钮，写着“点我一下”\n· 点击按钮后，按钮会变成绿色，并且文字变成“你成功啦！”\n· 把所有的 HTML、CSS、JS 都写在一个 .html 文件里，代码要完整，能直接保存运行\n· 最后告诉我这个文件怎么保存和使用\n```\n\n3. AI 会给出一大段代码\n\n它通常会给你一个代码块，类似这样（你不用看懂）：\n\n```html\n\u003C!DOCTYPE html>\n\u003Chtml>\n\u003Chead>...\u003C\u002Fhead>\n\u003Cbody>...\u003C\u002Fbody>\n\u003C\u002Fhtml>\n```\n\n直接全选，然后按 Ctrl+C（Mac 按 Cmd+C）复制，或点击下载按钮保存到电脑中。\n\n4. 把它保存成网页文件（若无法直接下载）\n\n- 在桌面上新建一个文本文档（记事本\u002F文本编辑）。\n- 把复制的代码粘贴进去。\n- 点“文件” → “另存为”。\n- 在文件名那里输入：my-first-page.html。重点：一定要把保存类型选为“所有文件”，编码选 UTF-8，然后保存。\n- 文件图标会变成浏览器的样子。\n\n5. 双击打开，见证奇迹\n\n浏览器打开，你会看到一个深蓝色星空的页面，正中间有你写的字和按钮。点击按钮，颜色变了，文字也变了。\n你刚刚做出了一个带交互功能的网页。\n\n## 第五步：用“Vibe”继续改，越玩越熟\n\n这才是 Vibe Coding 最有趣的地方。页面做出来了，但你可能觉得：“按钮不够圆”“字太小了”“背景要是能有点点星光就更好了”。\n\n你完全不用自己碰代码。继续跟 AI 聊天就行：\n\n“按钮再大一点，圆角一些，鼠标放上去要变小手”\n“给背景加上一些缓慢移动的星星”\n“再添一个能输入名字的框，点击按钮后下面显示‘xxx，你好’”\n\n每一次提要求，AI 都会再给你一版完整的代码。你只需：\n全选复制 → 粘贴进原来的 .html 文件覆盖全部旧内容 → 保存 → 刷新浏览器\n\n修改、看效果，再修改、再看。这就形成了一个纯粹的 “描述-观看” 循环，完全不需要学编程语法。\n\n## 你已经学会了\n\n总结一下，你要记住的其实就是这三层关系：\n\n- 网页 = HTML（内容）+ CSS（美化）+ JS（动作）\n- 做网页的老方法 = 自己学每一种语言，一行行敲\n- Vibe Coding 新方法 = 把你想要的样子说给 AI → AI 写好一个 .html 文件 → 你双击看戏\n\n从今天开始，你已经不是网页的局外人了。去试着做一张给朋友的生日卡片、一张自己的作品展示页、一个小倒计时器……不会的，就问 AI。\n\n你只负责想象，剩下的，都交给 Vibe。","https:\u002F\u002Foxqtewbrpuiouqqjrvdv.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fpublic-media\u002F2026-07-17\u002F538e5262-96da-46df-8e42-8f5156fe675e.jpg",[],[],"龙家轩","https:\u002F\u002Fweatheraintbad.com","f39339b1-aaa6-4e86-b0c2-a6e6a21113b5",{"id":18,"name":19,"slug":20,"description":21},"d6750616-07d9-4350-8485-1834c77be3d2","指南","guide","指导建议，仅供参考",[23,27,31],{"id":24,"name":25,"slug":26},"0848beb4-db26-4fb8-b391-f852a11be192","AI编程","ai-coding",{"id":28,"name":29,"slug":30},"4ab4d31d-2daf-4bd3-9d99-c7210c4943bf","网页制作","web-making",{"id":32,"name":33,"slug":34},"144abe77-0dc6-4f66-a176-20bddb1c0bfa","编程","coding",null,"published",false,53,0,"2026-07-17T00:00:00.000Z","2026-07-18T14:04:32.156Z","2026-07-17T05:12:58.995Z",[44,54,61],{"id":45,"type":6,"title":46,"slug":47,"summary":48,"coverUrl":49,"authorName":50,"sno":51,"publishedAt":52,"createdAt":53},"7cc644a5-e0de-4d7b-802e-9e8b69677e12","AI 生成的代码会不会复制开源项目","ai-code-open-source-reference-license","AI 生成代码不等于天然没有来源。本文区分常见写法与高相似片段，解释代码引用、许可证、依赖供应链和轻量来源检查，帮助团队把合规当成代码质量的一部分。","\u002Fuploads\u002F2026-09-13\u002F920327ad-de7f-4caa-a2f4-816d467c9f9c.jpg","Foundit",40,"2026-09-13T00:00:00.000Z","2026-09-13T11:55:49.911Z",{"id":55,"type":6,"title":56,"slug":57,"summary":58,"coverUrl":59,"authorName":50,"sno":51,"publishedAt":52,"createdAt":60},"190a2a0d-4b47-40f7-902a-00ac69ce1b15","AI 编程时代，为什么 Git 和 Pull Request 更重要了","ai-coding-git-pull-request-safety-net","AI 让改动出现得更快，也让变化更难凭记忆追踪。本文解释小提交、Pull Request、自动检查和人工批准如何把 AI 编程变成可比较、可验证、可回滚的协作流程。","\u002Fuploads\u002F2026-09-13\u002F95ac3b51-0915-4200-8130-4ba3195fd935.jpg","2026-09-13T11:56:01.900Z",{"id":62,"type":6,"title":63,"slug":64,"summary":65,"coverUrl":66,"authorName":50,"sno":67,"publishedAt":68,"createdAt":69},"54d83c94-d588-400d-9d13-42daa20331e2","CAS：文件的身份可以由内容决定","content-addressable-storage-ai-coding","内容寻址存储 CAS 用内容摘要识别文件和构建产物，解释 AI 编程工具、容器和缓存为什么能复用结果。","\u002Fuploads\u002F2026-09-14\u002F3fab23b3-8bcd-4a3b-bf5a-2ab895ce3a10.jpg",41,"2026-09-14T00:00:00.000Z","2026-09-14T15:01:41.114Z"]