Codex Vibe Coding 工具链：20 个反复用的超好用建站 Skill

最近 3 个月，我疯狂地用 Codex 去 vibe coding，也经历了不少"AI 无法做到我想要效果"的体验。最开始 AI 生成的网站，几乎都有同一种味道：紫色渐变、卡片堆叠、假数据、按钮能看不能用、移动端一缩就乱……

但这些 Skills 一搭配，问题大幅减少，而且也能让 Codex 更准确地 get 到我的需求。下面推荐 20 个我最近 3 个月使用最频繁、综合体验最好的建站 Skills。

Frontend App Builder — 最核心的建站 Skill。适合从 0 做 Landing Page、Dashboard、产品页、工具型 Web App。它不是简单生成 HTML/CSS，而是让 Codex 先进入"前端设计师"状态，再进入"工程实现"状态：视觉概念 → 设计系统 → 实现 → 浏览器验证。
Frontend Design — 解决审美问题。引导 Codex 在配色、字体、结构、质感上做更明确的设计选择，适合品牌页、作品集、产品官网。相当于给 Codex 加了一层设计品控。
Figma Implement Design — 如果你有 Figma 设计稿，这个 Skill 能把布局、组件、design token 还原成可维护的前端代码。
Frontend Testing Debugging — 专门处理 dev server、控制台错误、UI 回归、交互 bug 和视觉 QA。让 Codex 从"我写完了"变成"我打开浏览器测过了"。
Playwright Interactive — 保持一个浏览器会话反复刷新、点击、截图，适合 tab、modal、表单、动画状态等复杂交互调试。
Playwright — 浏览器自动化基础能力，打开页面、填写表单、点击、截图、检查响应式表现。

React Best Practices — 来自 Vercel Engineering，关注组件结构、数据获取、性能、bundle、渲染方式。能让 Codex 写的代码更像工程项目，而不是一次性 Demo。
shadcn — shadcn/ui 是现在 AI 建站非常常见的组件体系。适合做后台、Dashboard、SaaS 工具页、设置页。

Impeccable — 减少 AI 前端常见的模板味。关注排版、空间、视觉重点、页面节奏。觉得 AI 页面"能用但不好看"可以试试。
Imagegen — 生成 Hero 图、产品图、插画、背景纹理。让网站从"纯代码页面"变成更完整的视觉作品。
Extract Design System — 从参考网站提取颜色、字体、间距、圆角等 design primitives。把"我想要这个感觉"变成可执行的 design token。
Theme Factory — 建站前先建立主题系统：主色、辅助色、字体层级、暗色模式、按钮风格。避免页面里每个组件像单独生成出来的。
Figma Generate Design — 把页面/应用界面生成到 Figma 中，适合有设计流程的团队。
Figma Create Design System Rules — 建立设计系统规则：按钮尺寸、字体层级、组件间距、颜色使用。
Figma Code Connect Components — 把 Figma 组件和代码组件映射起来，适合有设计系统和组件库的项目。

UI Animation — CSS transition、keyframes、Framer Motion、弹簧动效、easing。交互有细节，网站才有高级感。
Design Motion Principles — 偏动效审美和原则：动效是否有目的、过渡是否自然、层级是否清晰。相当于动效设计层。
React Component Performance — 分析重复渲染、慢列表、昂贵计算、状态拆分和 memo 使用。页面再好看，卡顿就廉价了。
AccessLint — 检查 WCAG、语义 HTML、heading 结构、ARIA、颜色对比。让 Codex 做出来的不只是"看起来能用"，而是更专业。
Screenshot — 截参考网站、截当前页面、截局部 bug、对比修改前后效果。基础但非常实用。

以上的 Skills 都是本人亲测好用的，你可以直接把文章丢给你的 Codex 让其自己安装。从核心开发到设计质感，从动效细节到性能优化，这套工具链基本覆盖了 AI 建站的全流程。

感谢观看～