适合谁
前端质量 / UI 审计：适合审查和升级已有网站的视觉、响应式、可访问性和交付质量。
Codex 用法
优先按具体技能或原项目安装方式使用，不建议把归档目录整包复制。
Codex 可优先使用 .codex/skills，常用链路：audit -> critique -> polish。
许可证 / 风险
Apache-2.0。适合复用，但仍需保留原许可声明。
推荐工作流
audit 找技术质量问题；critique 看信息架构和体验；normalize 统一设计系统；polish 做交付前收尾。
什么时候用
当页面已经能跑，但看起来模板化、移动端粗糙、层级不清或缺少可访问性细节时，用这组技能收益最高。
Codex 落地
优先安装或复制 `.codex/skills` 下的明确技能。不要一次调用所有命令，先 audit，再按 P0/P1 问题逐项修。
🎨 Impeccable 技能拆解全景图
像搭积木一样
像搭积木一样
看懂这个系统
这个项目是给 AI 编程工具用的"设计教练"，帮它做出漂亮的网页。不用懂代码，看完这张图你就明白了。
🏗️ 五层积木塔
这个系统像一栋五层的房子，每层有不同的功能。越往上越接近用户，越往下越底层。
第 5 层 · 门面
网站展示层 (public/)
你在浏览器里看到的网页。包括首页、案例展示、反面教材页面。你能访问的一切都在这里。
第 4 层 · 工具箱
编译输出层 (dist/)
把源文件变成不同 AI 工具能用的格式。比如给 Cursor 用的、给 Claude Code 用的、给 Gemini 用的 —— 同一个人化不同的妆。
第 3 层 · 菜谱
源技能层 (source/skills/)
20 个设计"口诀"。比如 /audit 是"挑毛病"、/polish 是"打磨细节"、/delight 是"加点惊喜"。每个技能都有详细的指导手册。
第 2 层 · 工厂
构建系统 (scripts/, lib/)
自动化流水线。把技能从"一份原版"复制编译成"多份定制版"，适配不同 AI 工具的格式要求。
第 1 层 · 地基
基础设施 (server/, functions/)
运行在云端的服务器。处理网站访问、文件下载、用户反馈等请求。
⚡ 核心功能场景
这个工具能做什么？按重要程度排序，最常用的排在最前面。
1
🎨 指导 AI 做出漂亮网页
这是 Impeccable 的核心超能力。它教会 AI 什么该做、什么不该做。比如"别用 Inter 字体"、"别在彩色背景上用灰色字"、"别把所有东西都塞进卡片里"。
/frontend-design → 生成一个"看起来像人做的"网页
2
🔍 审计体检
像体检一样全面检查网页。看看颜色对比够不够、响应式有没有问题、加载快不快。
/audit → "报告：发现 5 个问题"
3
✨ 打磨抛光
出货前的最后一道工序。对齐像素、调整间距、统一字体。让细节经得起放大镜看。
/polish → "好了，可以发货了"
4
🎭 风格改造
把平淡的设计变得有趣。或者把太花哨的弄得更低调。完全看你需要。
/bolder → "再大胆一点！"
/quieter → "低调一点"
/quieter → "低调一点"
5
🎬 加点"魔法"
加上恰到好处的动画。让页面动起来，但不要太过分。
/animate → "给按钮加个hover效果"
6
📝 文字润色
把"技术黑话"变成人话。让按钮文字、提示信息更容易懂。
/clarify → "别叫 Error 404 了，说'页面消失了'"
7
🧩 组件提取
把重复的代码变成可复用的零件。一次编写，到处使用。
/extract → "这个按钮我以后还要用"
8
📱 响应式适配
让同一个页面在手机、平板、电脑上都好看。不是简单缩小，而是因地制宜。
/adapt → "手机上这样排"
🧰 SaaS 工具箱
这个项目用了哪些"外包服务"？它们各自干什么活？为什么免费？什么时候需要花钱？
B
Bun
运行环境和打包工具
像厨房里的料理机。帮你快速运行代码、装依赖包、打包文件。项目里的 npm/yarn 命令它都能干，而且 快得多。
免费额度
✅ 完全免费
目前个人使用完全免费
什么时候升级：暂无付费计划，一直免费用
配合： Cloudflare Pages（部署）
CF
Cloudflare Pages
网站托管和 CDN
像租了一个铺面。它把你的网页放在全球各地的服务器上，有人访问就就近分发，速度快，还抗打（防DDoS）。
免费额度
✅ 500分钟/月
付费版：$5/月起，无限分钟
什么时候升级：流量大时（每月超过 500 分钟）
配合： Bon（触发构建）、用户（访问）
S
Supabase
数据库和认证
像租了一个仓库存东西。用户数据、许可证状态、付费记录都存在这里。免费版足够个人项目用。
免费额度
✅ 500MB 存储 + 无限 API 请求
付费版：$25/月起，8GB 存储
什么时候升级：数据超过 500MB 或需要更多项目
配合： Stripe（付款）、用户（登录）
S
Stripe
支付网关
像雇了个收银员。用户刷卡付钱，它负责安全处理付款信息，然后通知"钱到了，可以发货"。
收费
✅ 首年免收年费
手续费：每笔交易 2.9% + $0.3
什么时候升级：交易量大可谈更低费率
配合： Supabase（记录）、Cloudflare（展示）
💬 这群"人"是怎么配合干活的？
一个开发者用 Impeccable 做一个漂亮的官网。完整展示每个环节谁在干活。
📚 大白话百科
这些词儿到底什么意思？用日常例子讲给你听。
WebCodecs
像视频网站的"播放器内核"。网页要播视频，得有个东西来解压缩视频文件、把一帧帧画面显示出来。WebCodecs 就是浏览器内置的这个播放器底层。
FFmpeg
像视频届的"瑞士军刀"。能转换格式、剪辑、加字幕、做特效。命令行工具，很强大但需要学习。
H.264
像视频的"压缩算法"。一段 1GB 的视频，用 H.264 压完可能就 100MB 了，但看起来差不多。几乎是所有视频网站通用的格式。
30fps
像翻书的速度。每秒翻 30 页，书里的内容就像动起来一样。电影一般是 24fps，网页动画 30fps 就挺流畅了。
Mux
像视频托管商。帮你存视频、CDN 分发、还提供播放统计数据。收费但省心。
MP4 容器
像快递盒。把视频文件、音频文件、字幕"打包"成一个文件。MP4 就是最常见的那个"盒子"。
Motion
动效库，像做动画的"画具"。帮你做交错入场、滚动视差、页面转场等效果。
Playwright
像自动化测试员。帮你模拟点击、填表、截图，检测网页是否正常工作。