Vibe Coding 视觉词典（上篇）：布局、页面结构、导航与常用组件
文章针对 AI 做网页时指令模糊的问题，提出了“视觉词典”概念。通过拆解页面布局、结构、导航和组件四个层级，提供了 26 个具体的网页设计模式（如 Bento Grid、Masonry Layout、Sticky Navbar）。每个词条包含概念说明、适用场景及可直接复制给 AI 的提示词，旨在帮助用户更精准地指挥 AI 生成高质量的网页设计。
相关文档
两个网站和两个 Skills，拯救你的 vibe coding 审美
文章针对 AI 编程生成的网页千篇一律（紫色渐变、圆角卡片、Inter 字体等）的问题，推荐四个工具：getdesign.md 提供现成网站的 DESIGN.md 设计参考，让 AI 按指定风格编写；libraries.dev 提供 UI 效果库，可直接复制 prompt 添加视觉组件；Impeccable 是项目完成后的设计审查 Skill，可对页面做 polish、audit、critique 等操作；OpenDesign 是本地优先的设计 Agent 工作空间，强调设计系统和资产复用。作者强调 vibe coding 不等于把审美外包给 AI，颜色、留白和取舍仍需人做决定。
Vibe Coding 网页动效词典（中篇）：视差滚动、磁吸按钮与鼠标跟随
本文是网页动效词典系列的中篇，从第 17 到第 36 个动效词条，系统讲解了三大类网页动效：进阶文字动效（按字符显现、打字机、乱码解码、文字变形）、滚动与空间动效（视差滚动、多层视差、横向滚动、滚动缩放、固定式滚动叙事、图片序列、滚动吸附、进度提示）以及鼠标与指针动效（磁吸按钮、倾斜卡片、光标跟随、聚光灯、跟随眼睛、光标拖尾）。每个词条都说明了效果原理、常见类型、适用场景，并附上可直接使用的 AI 提示词，帮助开发者用 vibe coding 方式实现精致的网页交互效果。
Vibe Coding 网页动效词典（上篇）：教你准确描述页面怎么动
本文是一篇 Vibe Coding 网页动效教程（上篇），旨在帮助读者用准确的术语向 AI 描述网页动效。文章先介绍 UI、UX 和 Vibe coding 的概念，提出网页动效的四层结构：技术工具（CSS、Motion、GSAP、Three.js 等）、触发方式、动效类型和 UX 规则。上篇重点讲解触发方式（悬停、焦点、点击、指针、视口、滚动、手势、页面加载、状态变化、定时）及动效类型的基础部分（Easing、Duration 等），每个词条配有可直接使用的提示词示例，帮助读者清晰表达脑中的动效效果。
手写代码的时代已经过去了：一次零基础的 vibe coding 全记录
作者记录了利用 Claude Code 和 AI 辅助工具，从零开始开发 AI 阅读插件 ReadCue 的全过程。文章探讨了 HTML 在 AI 时代的复兴、全新的设计开发范式，以及程序员如何从手写代码转向架构决策和产品定义。
设计师指南：如何通过 Vibe Coding 快速构建精美的初创公司落地页
本文由设计师 clear 分享了如何利用 AI (Vibe Coding) 在 4-6 小时内构建高质量初创公司落地页的完整工作流。文章详细介绍了技术栈的选择（Cursor、Claude Code、Tailwind CSS、Framer Motion 等），并重点强调了分步构建的策略：从结构搭建、设计系统应用到内容填充，再到最后的细节打磨和移动端适配。作者指出，具体的提示词、参照现实设计案例以及保持视觉一致性是区分“Vibe Code”成品与垃圾代码的关键。
让卡片设计一下子高级起来的线条动效提示词附上直接复刻
作者参考 ElevenLabs 官网安全模块，分享了一组让卡片设计显得高级的线条动效方案，并提供完整提示词可直接复刻。设计关键在于：只用黑色细线，实线画本体、圆点虚线画辅助线营造手作感；三个图形不按同一框绘制，通过大小调整达到视觉平衡；每个图标有各自的结构演示动画（球体旋转、薄板错开归齐、螺旋重长）。文中详细说明了入场画线、悬停交互、防打断处理等细节，并给出单文件 HTML 的完整实现提示词，可交由 Claude 或 ChatGPT 生成，适用于官网功能介绍、定价页、课程流程等场景。
Vibe Coders Are Getting Sued: 每次上线前的安全检查清单
文章以南非一家咖啡连锁店用 Claude 构建的内部仪表盘泄露 132 个门店敏感数据为例，说明 AI vibe coding 应用普遍存在的安全隐患：有登录界面但缺乏后端权限控制。作者指出 WIRED 报道发现超过 5000 个 vibe coded 应用几乎无安全措施。作为运营五家 AI 业务、两家面向真实用户发货的创始人，作者分享了一份上线前安全检查清单，并升级为一键粘贴到 Claude Code 或 Cursor 的提示词，让 AI 自动执行六步检查：法律合规（隐私政策、数据位置、GPL 许可）、数据库安全（行级权限 RLS、服务端验证）、登录流程测试、安全审计（OWASP、密钥泄露）、滥用与成本控制（限流、机器人防护）、扫描器修复，最后输出通过或需修复的结论。
Codex 终于有自己的 UIUX 设计外挂了
文章介绍了 Codex 的 UI/UX 设计增强工具 UI UX Pro Max，包含 192 条行业设计规则、79 种 UI 风格、192 套配色方案、74 种字体组合，并支持 React、Next.js、Vue、Flutter 等 22 种技术栈。作者演示了如何通过一段提示词在 Codex 中安装配置该 Skill，并用其生成高端 AI SaaS 官网，解决了以往 AI 生成页面廉价感强、配色布局千篇一律的问题。评论区也讨论了 Skill 作为能力封装新形态的意义与实际效果。
不用一个 3D 模型，用 AI 写代码"拍"出 3 分钟亚马逊雨林纪录片
本文是一篇手把手教程，讲解如何在不使用任何 3D 模型、贴图或照片的情况下，用 AI 编程助手（Claude Code）写代码生成一部 3 分 05 秒的亚马逊雨林竖屏纪录短片。作者介绍了三个关键方法：先画以米为单位的平面图作为总契约、把场景拆成 13 个区让多个 AI 并行施工、以及通过截图对比迭代改进。教程涵盖生成参考图、搭建地基（固定随机种子、统一材质光照）、多智能体分工、镜头安排、黄昏到月夜的光线变化、渲染成片及用开源 AI 模型配环境音的完整流程，并总结了常见坑与解决方案。
人人都能做产品：一次性分享我的 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 先做安全审计但需人工验证越权测试和支付流程，最后附一份上线前贴墙检查清单。
