前端三件套安排：Vue/React/UI 三个 Skills 装上，AI 代码终于不“AI 味“了

前端三件套安排Vue/React/UI 三个 Skills 装上AI 代码终于不AI 味了【免费下载链接】skillsSkills Catalog for Codex项目地址: https://gitcode.com/GitHub_Trending/skills4/skills如果你最近让 AI 写过前端页面大概率会撞见同一批熟面孔圆角 8px 的卡片、#667eea到#764ba2的紫蓝渐变、随手硬编码的十六进制色值、同一套布局模板换个标题就交差。生成速度越来越快代码风格却越来越同质行业内把这叫AI 味AI slop。问题不在模型本身——Claude、GPT、Codex 的推理能力早就够用缺的是约束模型没有被告知你这个项目的设计 token 是什么、组件库有哪些、按钮有几种变体、样式该写在哪里。Agent Skills 的解法是把这些只有资深前端才知道的隐性工程经验打包成可发现、按需加载的指令文件夹让通用 Agent 变成懂你项目的前端工程师。社区里的热度已经说明问题掘金上《分享前端项目常用的三个 Skills——Vue、React 与 UI 核心 Skills》一文获得 1.8 万阅读作者直言三个技能的作用就是让 AI 生成的代码风格更统一、更专业《前端领域 30 个值得安装的 Agent Skills》则把frontend-design这类技能直接归类为告别 AI 味儿的设计/视觉类技能。本文结合开源 skills 仓库OpenAI 官方 Codex Skills Catalog的源码讲清楚这三个技能各自解决什么问题、按什么顺序装、以及装上之后代码到底差在哪。AI 味的本质模型没有约束而不是模型不够聪明先拆一个反直觉的事实大模型在预训练里见过海量前端代码它知道什么是好代码只是不知道你现在要什么。没有约束时模型会默认选择它见过最多次的统计平均风格——这正是 AI 味公式化的来源。Skills 通过一套结构化的技能说明书把约束注入进去。在 OpenAI skills 仓库中skill-creator 把 Skill 的标准结构定义得很清楚每个技能由一个必需的SKILL.mdYAML frontmatter 元数据 Markdown 指令和可选的scripts/、references/、assets/资源目录组成。frontmatter 里的name和description决定 Agent 何时发现并加载这个技能references/则存放按需加载进上下文的参考文档。这里有个关键设计渐进式加载。正如社区技术分析文章所总结的Skills 采用L1 索引层YAML Frontmatter— L2 指令层SKILL.md— L3 资源层Scripts/References的三层结构Agent 默认只读到最轻量的元信息真正执行任务时才按需拉取深层文档。skill-creator 里甚至有一句直白的工程判断The context window is a public good——上下文窗口是公共资源Skills 与系统提示词、对话历史共享同一预算所以只在模型真正缺的地方补上下文每一段都要论证它值回 token 成本。这解释了为什么 Skills 优于把一万字前端规范塞进系统提示词约束不是越多越好而是在关键时刻、以最省 token 的方式出现。前端三件套风格统一、组件规范、UI 还原社区里高频推荐的前端三件套是vue-skills、react-skills、ui-skills部分生态中对应frontend-design。三者分工清晰且恰好对应三条不同的AI 味来源Vue / React 技能解决组件规范AI 味最重的表现之一是组件滥用能用一个div解决的偏要嵌套三层已有现成 Button 偏要手搓一个新按钮命名忽而Btn忽而Button。Vue 与 React 技能的核心作用是把框架最佳实践固化成指令——组合式 API 的用法、Props 的类型约束、scoped样式边界、组件拆分粒度、目录命名约定。这不是空泛的多写注释而是可执行规则。以仓库里同属前端领域的 chatgpt-apps 为例它在处理 React 组件时强制要求复用现有组件而不是重复造轮子并给出了明确的脚手架产物清单工具方案、widget 骨架、MCP Apps bridge 接线。技能里定义得越具体模型输出的随机性就越低——从自由发挥变成照着流程走。UI 技能解决设计还原比代码风格更头疼的是视觉还原。模型生成的页面经常形似而神不似间距靠猜、字号靠感觉、色值随手取导致每个页面都像不同的设计师画的。UI 类技能把像素级还原变成强制流程。仓库中的 figma-implement-design 是这一思路的范本它规定实现 UI 必须走七步流程解析 Figma URL 提取节点 →get_design_context拉取结构化设计数据 →get_screenshot获取视觉基准 → 下载资源 → 翻译成项目规范 → 达成 1:1 视觉一致 → 对照截图逐项验证。其中几条规则直击 AI 味要害禁止硬编码优先使用设计 tokenprimary-500、primary-hover而非写死色值禁止无谓引入图标包资源一律来自设计稿 payload防止每个项目都被塞进同一套图标库复用优于重写项目里已有按钮、输入框、排版组件就必须扩展它而不是新建一个组件可组合、可复用Props 必须有 TypeScript 类型。更进一步的 figma-create-design-system-rules 会把这类约定固化成仓库级的AGENTS.md/CLAUDE.md/.cursor/rules规则文件把团队的设计语言变成所有 AI 编码工具默认遵守的契约——这正是社区文章里反复提到的规范驱动开发SSD落地形态把 vibe coding 的自由探索约束到结构化规范内而不是靠每轮对话重复强调。安装顺序与优先级配置技能装太多反而互相打架。社区里《agent-skills 与 Superpowers、Pocock skills 怎么选》一文给出了一个很重要的结论主路由框架不可叠加应按需 cherry-pick 单个技能。前端三件套的合理安装顺序应该是先装 UI/设计类——它定义全局的视觉基准色板、间距、字号、圆角是其他技能的输出参照物再装框架技能——Vue/React 定义代码组织方式与视觉基准结合才产出风格统一的代码最后沉淀项目级规则——用AGENTS.md记录本项目独有的组件清单与命名约定实现团队级复用。安装本身在 Codex 生态里已高度工具化。仓库的 skill-installer 提供了完整的安装链路skills/.system/下的技能如skill-installer本身随 Codex 最新版自动预装无需手动操作curated精选技能可直接按名字安装例如$skill-installer gh-address-comments来自其他仓库或私有仓库的技能则通过脚本install-skill-from-github.py指定--repo/--path安装支持--method download|git双通道安装目标是$CODEX_HOME/skills/默认~/.codex/skills装完重启 Codex 即可生效。对应地list-skills.py会列出可选技能并标注哪些已安装方便先盘点再动手。社区情报中还有一个值得注意的信号2026 年上半年 Skills 生态开始平台化腾讯上线了中国专供的 AI Skills 社区 SkillHubGitHub 上 Skills 生态也呈现爆发趋势。安装不再是玄学而是一个标准化的包管理流程——装技能的门槛越低越应该克制地装。装上前后同一个按钮两种代码理论讲完看一个具体的实测对比。以最典型的 Button 组件为例未安装任何前端技能时AI 输出的典型AI 味代码长这样// 没有约束的典型输出硬编码 内联样式 无类型 export function Btn({ text }: any) { return ( button style{{ backgroundColor: #6366f1, color: #ffffff, borderRadius: 8, padding: 10px 24px, fontSize: 14, boxShadow: 0 2px 8px rgba(99,102,241,0.4), }} onClick{() console.log(clicked)} {text} /button ); }代码能跑但问题很典型色值、圆角、阴影全部硬编码成魔法数字props 用any样式与结构耦合更重要的是——它和项目里其他 17 个按钮的观感没有任何血缘关系。装上 UI/设计技能并接入项目设计系统后同一份需求输出会变成这样// 遵循设计 token 与组件库约束的输出 import { Button } from /components/ui/button; interface PrimaryButtonProps { label: string; size?: sm | md | lg; disabled?: boolean; onClick?: () void; } export function PrimaryButton({ label, size md, disabled, onClick, }: PrimaryButtonProps) { return ( Button variantprimary size{size} disabled{disabled} onPress{onClick} {label} /Button ); }两者的差异正是 figma-implement-design 里白纸黑字的规则在起作用用设计系统的variant/size而非内联 style色值映射到项目 tokenprops 有完整 TypeScript 类型且直接复用了项目已有的Button组件而不是再造一个。Vue 场景同理——有规范约束时AI 会输出script setup langtsscoped样式 CSS 变量引用 token 的结构而不是在style里写满全局污染的选择器。需要泼一盆冷水的是对比效果依赖两个前提。一是仓库内确实存在可复用的设计系统与组件库技能负责遵守不负责无中生有——figma-implement-design 明确要求项目应已建立设计系统或组件库优先二是规则要持续维护figma-create-design-system-rules生成的AGENTS.md需要随着组件库演进同步更新否则技能会固守过期规范。理性收尾技能是约束不是银弹回看整个 2026 年上半年的社区讨论对 Skills 的定位其实已经收敛到一个共识它替代的不是开发者的判断而是把隐性工程经验外化给模型的载体。前端三件套的价值在于把风格统一、组件规范、UI 还原这三件最消耗人工 review 精力的事变成模型默认执行的前置约束——治的是 AI 味省的是反复这里圆角不对、那里色值不对的拉锯。但装技能和写代码一样需要克制主路由类框架技能不要叠加按需 cherry-pick优先选择官方维护、有测试保障的技能项目级规则用仓库内的AGENTS.md沉淀。约束给到位了模型才能真正发挥它见过海量好代码的优势——AI 味消失的那一刻不是模型变得更聪明而是它终于知道你要什么了。【免费下载链接】skillsSkills Catalog for Codex项目地址: https://gitcode.com/GitHub_Trending/skills4/skills创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考