Vibe Coding 容易卡在「生成很快、上线很慢」。开源 Skill 的价值,是把经验固化成可版本化的约束:先定设计系统,再生成页面,再去塑料感,最后压代码体积。下面四个 Skill 覆盖这条链路的关键节点。

ui-ux-pro-max:一键生成完整设计系统

它擅长先产出风格、配色、字体与组件规范,而不是直接甩一整页随机布局。用法建议:在对话里先声明行业、气质与禁忌色,再让它输出 token(颜色、字阶、圆角、阴影、动效时长)。有了系统,后续页面生成才不会每页换一套脸。

先落地设计 token,再批量生成页面
先落地设计 token,再批量生成页面

impeccable:一句 /polish 去掉塑料感

AI 初稿常见问题是对比过强、间距均质、文案空泛、装饰过多。impeccable 类 Skill 用「先删后加」的打磨协议:收主色、拉开节奏、把形容词换成可验证结果。把它放在设计系统之后、动效之前,返工最少。

react-bits:现成动效组件做点睛

环形画廊、星空背景、视差卡片等组件适合做首屏或章节转场的「一个」亮点。生产环境务必动态加载非首屏模块,并准备静态降级。动效服务叙事,不替代信息架构。

把臃肿生成稿压到可维护的模块规模
把臃肿生成稿压到可维护的模块规模

karpathy-skills:按规范精简代码

生成稿动辄上千行、重复样式与无效抽象。用规范驱动的精简 Skill,把页面压到可读、可测、可交接。建议验收:单文件职责清晰、无用依赖清零、核心路径有注释。四个 Skill 串联:系统 → 生成 → 打磨 → 精简,才是可持续的开源 AI 网页工作流。