Codex + 4 个 Skills：审美、动效、工程、测试一条龙

Codex + 四大开源 Skills 的组合，让 AI 拥有完整的「审美、动效、工程思维、测试思维」，直接拉满 AI 前端开发的上限。

01 Taste Skill（v2 新版）：给 AI 装上审美大脑

绝大多数 AI 生成页面的通病：无设计逻辑、层级混乱、配色杂乱、留白随意、同质化严重，看着永远像「半成品模板」。

Taste Skill 最新 v2 版本彻底重构工作逻辑，从「被动建议」升级为「强制规范」，彻底杜绝廉价 UI 设计。核心能力：

• 需求前置推理：生成代码前先解读项目定位、受众、品牌风格，定制专属设计语言
• 三档位精细化调控：1-10 数值自由调节布局方差、动效强度、页面视觉密度，适配极简/轻奢/工业多种风格
• 标准化设计体系：统一排版、间距、配色、层级规则，自带反劣质设计（Anti-Slop）机制
• 出厂预检机制：页面交付前自动校验设计规范，杜绝排版瑕疵、视觉漏洞

高级的网页设计，从来不是元素堆砌，而是有章法的视觉秩序。

02 GSAP Skill：告别廉价动效

静态页面靠模板，高端页面靠动态。普通 AI 生成的动画，普遍存在卡顿、生硬、逻辑混乱、适配差等问题，一眼就能看出是 AI 半成品。

GSAP 作为全球顶级网页动画开源库，专属 AI 技能包让 Codex 精准掌握专业动效逻辑，规避所有新手误区。核心能力：

• 专业时间轴动画：精准控制动画顺序、时长、间隔，告别杂乱动效
• 滚动联动特效：页面滚动触发元素入场、展示、渐变、缩放效果
• 全框架适配：兼容 React/Vue/Svelte/原生 JS
• 性能极致优化：自动规避重排重绘，动画流畅不卡顿

静态页面只能传递信息，动态交互才能塑造品牌质感。

03 Ponytail Skill：极简工程思维

AI 写代码速度极快，但最大短板从未改变：过度开发、代码臃肿、重复冗余、结构混乱、难以维护。

Ponytail 主打「极简高效、不做无用功」，在不丢失功能、安全性、兼容性的前提下极致精简代码。核心能力：

• YAGNI 极简原则：剔除所有无用代码、多余组件、无效逻辑
• 原生能力优先：能用浏览器原生属性，绝不额外引入第三方依赖
• 项目结构重构：统一组件化规范，提升代码复用性与可维护性
• 实测高效提效：平均减少 54% 代码量，降低 20% 开发成本、27% 耗时

优质 AI 代码，不在于写得多，而在于写得精、跑得稳、改得快。

04 Playwright MCP：AI 全自动测试

传统 AI 开发的最大漏洞：只管生成，不管校验。AI 写完代码后，错位、失效、适配 bug、点击无响应等问题频发，必须人工逐页测试。

微软官方 Playwright MCP 补齐最后一环，让 Codex 拥有全自动浏览器测试能力：

• 全自动浏览器操作：启动、页面跳转、元素点击、表单输入
• 智能页面快照检测：精准捕捉样式错位、功能失效、适配异常
• 全场景兼容：移动端、桌面端、多浏览器环境
• 问题自动定位 + 智能修复：完成「开发-测试-修复」全闭环

四大 Skills 完整工作流

四大技能各司其职、层层递进，组成 AI 前端工业化开发流水线：

1. Taste Skill 打底：标准化审美设计，产出高颜值页面架构
2. GSAP Skill 赋能：叠加高阶丝滑动效，提升交互体验
3. Ponytail Skill 优化：精简冗余代码，夯实工程质量
4. Playwright MCP 校验：全自动测试修复，保障交付稳定

从设计到动效到代码到测试，全程 AI 自主完成，无需人工反复微调、改错、优化。

真正的核心竞争力，不是「会用 AI 写代码」，而是懂得搭建 AI 工作流——用专业技能包约束 AI、赋能 AI，让工具产出高质量、可落地、可商用的成熟产品。