ai.vibecoding

用自然语言，创造可运行的作品。

The art of Vibe Coding.

线上站点 | GitHub 仓库

项目定位

ai.vibecoding 是一个静态展示站，用来讲清楚自然语言编程、AI Agent 工作流、上下文工程与确定性交付之间的关系。

它不是工具罗列页，也不是 Prompt 资料堆。它的目标是用一条完整的叙事路径，把“先理解、再约束、后实现、最后验证”的工程观讲清楚。

当前站点包含中英文切换、日夜模式、可复制指令、二维码联系弹窗，以及一套面向 Agent 协作的核心指令库。所有页面文案统一维护在 src/content/site.tsx，避免界面、文档和提示词各写一份导致漂移。

导航信息架构以页面真实 section 为准：第一性原理、前置基建、生态矩阵、交付管线、指令库。中英文导航、section eyebrow 和文档说明必须一起维护。

技术栈

• React 19
• TypeScript
• Vite 6
• Tailwind CSS v4
• motion/react
• lucide-react
• Netlify 静态部署

本地启动

Windows 推荐直接双击根目录的 start.bat。

macOS / Linux：

sh start.sh

也可以手动执行：

npm install
npm run dev

默认地址：

http://localhost:3000

构建验证

每次交付前运行：

npm run lint
npm run build

构建产物输出到 dist/。dist/、node_modules/、.netlify/ 和本地日志文件不提交。

涉及页面体验时，还必须打开真实浏览器截图验证。至少检查当前问题位置、桌面宽度、必要时移动端宽度、控制台错误、主题切换和语言切换。

页面结构

Hero
Concept
Environment
Tools
ContextEngine
Workflow
Prompts
Deployment
Manifesto
Footer

核心文件：

• src/content/site.tsx：全站中英文内容、提示词正文、工具卡片和页脚文案。
• src/context/SiteSettings.tsx：语言、主题、html lang、SEO meta 和本地偏好。
• src/index.css：Tailwind v4 入口和主题变量。
• src/components/sections/Hero.tsx：首页文案与 Claude Code 终端模拟。
• src/components/layout/Navbar.tsx：品牌回顶部、语言切换、日夜模式切换。
• src/components/layout/Footer.tsx：联系入口、二维码弹窗和页脚收尾。

协作约束

• AGENTS.md 是项目协作规则的单一事实源。
• CLAUDE.md 只负责把 Claude Code 指向 AGENTS.md，不再维护重复规则。
• 这个仓库当前是纯静态前端站点，不依赖后端服务、Express、Gemini SDK 或运行时环境变量。
• 如果要改文案、提示词或双语内容，优先改 src/content/site.tsx，再同步 PROMPTS.md 中的说明。
• 如果要改主题，优先改 src/index.css 的 CSS variables，不要把颜色散落到组件里。
• 任何交付都必须至少经过一次 npm run lint、npm run build 和真实浏览器验证。
• 任何新增功能、页面文案、导航、部署路径、启动方式或协作流程变更后，都要同步相关文档，不能等用户提醒。

编码约定

• 仓库文本文件统一使用 UTF-8。
• Windows PowerShell 默认编码可能把中文误显示成乱码；遇到这种情况，优先用 Get-Content -Encoding utf8 复核，不要直接把显示异常当成文件已损坏。
• .editorconfig 和 .gitattributes 已提供默认编码与换行护栏，后续修改请继续遵循。

部署

生产环境部署在 Netlify：

https://qinxujun-ai-vibecoding.netlify.app

GitHub Pages 镜像：

https://qinxujunai.github.io/qinxujun-ai-vibecoding/

构建配置见 netlify.toml：

[build]
  command = "npm run build"
  publish = "dist"

手动部署命令：

npx netlify deploy --prod --build