手写代码的时代已经过去了：一次零基础的 vibe coding 全记录
作者记录了利用 Claude Code 和 AI 辅助工具，从零开始开发 AI 阅读插件 ReadCue 的全过程。文章探讨了 HTML 在 AI 时代的复兴、全新的设计开发范式，以及程序员如何从手写代码转向架构决策和产品定义。
相关文档
Vibe Coding 视觉词典（上篇）：布局、页面结构、导航与常用组件
文章针对 AI 做网页时指令模糊的问题，提出了“视觉词典”概念。通过拆解页面布局、结构、导航和组件四个层级，提供了 26 个具体的网页设计模式（如 Bento Grid、Masonry Layout、Sticky Navbar）。每个词条包含概念说明、适用场景及可直接复制给 AI 的提示词，旨在帮助用户更精准地指挥 AI 生成高质量的网页设计。
设计师指南：如何通过 Vibe Coding 快速构建精美的初创公司落地页
本文由设计师 clear 分享了如何利用 AI (Vibe Coding) 在 4-6 小时内构建高质量初创公司落地页的完整工作流。文章详细介绍了技术栈的选择（Cursor、Claude Code、Tailwind CSS、Framer Motion 等），并重点强调了分步构建的策略：从结构搭建、设计系统应用到内容填充，再到最后的细节打磨和移动端适配。作者指出，具体的提示词、参照现实设计案例以及保持视觉一致性是区分“Vibe Code”成品与垃圾代码的关键。
人人都能做产品：一次性分享我的 12 个真实案例，给你找点灵感
作者龙海分享了自己用 AI 编程打造的 12 款真实产品案例，按生活、阅读、效率三大类展开。生活类包括听歌收音机「拾音FM」、互动游戏「中国故事」、音乐聚合工具 MusicBridge 和定时提醒锻炼的 FitGate；阅读类包括 Obsidian 播客文字稿插件、扫描 PDF 转 EPUB 的 Skill、Telegram 一句话下载电子书的 Skill；效率类包括灵感便签工具「灵感晾台」、优化 X 网页版的浏览器插件 OhMyX 等。作者强调需求来源于生活痛点，AI 编程时代是技术平权的年代，鼓励读者动手构建自己的产品。
超详细 Chrome 教程，从浏览搜索到上架扩展
这是一篇面向新手小白的 Chrome 浏览器超详细教程，分为上下两篇。上篇讲解如何把浏览器用快，涵盖安装方式、账号同步、地址栏搜索运算符（t/b/h/@等）、标签页快捷键与分组、书签历史下载面板、开发者工具及 chrome:// 隐藏页面等实用操作技巧。下篇讲解如何用 Vibe Coding（借助 AI 编写代码）从零开发一个 Chrome 扩展，包括扩展的目录结构、Manifest V3 的清单、Service Worker、Content Script、Popup 等核心概念，以及调试方法、上架 Chrome 应用商店的流程，并介绍了上架后通过扩展赚钱的四条路径，引用 Superpower ChatGPT 等月入数万美元的真实案例。
Vibe Coding 做出来的 App 上线检查清单
文章针对用 AI 快速搭建 App（Vibe Coding）后常见的隐患，提出上线前按风险分 6 层自查的清单：密钥泄露、数据越权（RLS/IDOR）、成本与支付、稳定性异常场景、合规审核（App Store 与国内上架要求）、上线后监控与回滚。每层提供可复制的命令、SQL 或提示词，建议用 Claude Code 先做安全审计但需人工验证越权测试和支付流程，最后附一份上线前贴墙检查清单。
2 万 Star，我的 AI 编程教程被豆包推荐了！
程序员鱼皮开源的《Vibe Coding 零基础入门教程》9个月内 GitHub 突破 2 万 Star，内容从几十篇扩充到 170 篇，并被豆包等 AI 平台推荐。教程覆盖基础入门、AI 编程工具（Cursor、Codex、Claude Code 等）、模型实测横评、近 30 套项目实战、经验技巧、产品变现和编程学习资源，还包含 18 篇 OpenClaw 保姆级教程。文章介绍了教程结构、适合人群、学习路线及近 3 个月的更新内容，同时推广配套的 B 站霸榜视频课程，强调教程完全免费开源并将持续更新。
卡兹克零基础靠 AI 做的 AIHot，我作为程序员认真读了一遍源码
作者以程序员视角深入分析了数字生命卡兹克零编程基础、纯靠 AI 构建的开源项目 AIHot（AI 热点新闻聚合网站）。文章详细解读了项目的技术选型与架构：TypeScript 全栈 monorepo、React Router SSR 前端、Fastify API、pg-boss 任务队列，以及 RSS、网页爬虫、JSON 接口、推特、微信公众号等六种信源采集方式。重点剖析了其基于大模型的文章处理流程：预筛、五维度加权打分、摘要生成、向量聚簇归组。作者由此引申讨论 AI 时代软件工程可维护性标准的转变：程序员注意力从代码实现转向架构设计与约束，类比铝从贵金属到飞机材料的价值观变迁。
如何用 Claude 制作游戏并实现被动收入
作者拥有6年游戏开发经验，制作过120多个游戏原型，但前100个几乎没有赚钱，转折点在于理解了分发的重要性。文章分享了作者如何借助 CrazyGames、Coolmath Games 等已有海量用户的网页游戏平台发布游戏，而非盲目自行推广。开发上，作者大量使用 AI 工具（Claude Code、Codex、AgentsGuild）进行 vibe coding，主要制作2D休闲益智类游戏。文章还讲解了游戏提交平台的流程、激励式广告变现方式、留存与参与度对收入的影响，以及如何通过数据分析持续迭代游戏。核心观点是：好的游戏只是起点，分发与用户参与度才是真正赚钱的关键。
两个网站和两个 Skills，拯救你的 vibe coding 审美
文章针对 AI 编程生成的网页千篇一律（紫色渐变、圆角卡片、Inter 字体等）的问题，推荐四个工具：getdesign.md 提供现成网站的 DESIGN.md 设计参考，让 AI 按指定风格编写；libraries.dev 提供 UI 效果库，可直接复制 prompt 添加视觉组件；Impeccable 是项目完成后的设计审查 Skill，可对页面做 polish、audit、critique 等操作；OpenDesign 是本地优先的设计 Agent 工作空间，强调设计系统和资产复用。作者强调 vibe coding 不等于把审美外包给 AI，颜色、留白和取舍仍需人做决定。
开源100万月活级产品AIHOT，愿每个行业也都有自己的「AIHOT」
作者宣布将其月活百万的AI热点资讯网站AIHOT正式开源。AIHOT最初是公司内部监控热点找选题的飞书机器人，经过七八个月迭代发展成百万月活产品。作者一直想开源但因旧架构质量差而不敢。利用中秋假期，作者借助Claude Opus 5.5、GPT-6 Astra等AI工具，采用'将旧代码蒸馏为功能文档再重写'的第一性原理方法，用3天完成项目重构，上线AIHOT 2.0并开源，包括采集流程、评分流程及所有Prompt，希望各行各业都能基于此框架打造自己的行业热点监控产品。
仅 2 小时，我就搭建了一个 AI 模特摄影棚
作者分享了其产品经理 harness 6.0 版本的开发实践：用它在 Claude Code 中仅用两小时从零构建了一个 AI 模特出图工具「视镜」。6.0 针对传统 Vibe Coding 的痛点，重点强化了需求拷问（五层漏斗提问法、Mom Test、魔鬼代言人等）和界面设计（自带视觉组件包）两个环节，精简其余规则，把具体执行交给推理能力日益增强的模型。文章详细展示了九轮需求确认、26 页设计稿生成、十个开发阶段的完整流程，提出主控文件只需规定六件事、以需求清单驱动进度的方法论。
我把《清明上河图》做成了可以互动的横向交互插画
作者以《清明上河图》为题材，用 Codex 辅助开发了一个可横向行走的交互插画项目。文章详细记录了从最初需求定义、视觉规则制定到技术选型的全过程：放弃 Three.js 改用 Canvas 2D 分层绘制，将鸟瞰式原画重构为适合人物行走的宋代街道，包含三个街区、141 位动态人物、虹桥过船和清明时雨等互动事件。开发中通过迭代修复遮挡、坐标、卡顿等问题，将帧率从 25 FPS 优化到 55 FPS，并配套 48 项自动测试，最终实现了用户可参与宋代街市生活的沉浸式体验。
