🏆 Vercel 官方开源了一套给 AI coding agent 用的技能包，等于把 Vercel 工程团队的前端经验直接装进 Claude Code。 GitHub 上 29K stars，官方出品背书够硬。 以前让 AI 写 React 组件，跑起来就算胜利，但性能反模式、bundle 体积、服务端瀑布请求一堆坑根本没人管。装上 react-best-practices 之后，AI 会按 40 多条 Vercel 内部规则写代码，相当于每次提交前都有 Vercel 工程团队帮你做 code review。 写 UI 时也一样，web-design-guidelines 能按 100 多条规则检查无障碍、焦点状态、动画、深色模式这些细节，省掉人工逐行对设计规范。 最爽的是 vercel-deploy-claimable，在 或 Claude Desktop 里聊几句就能直接部署到 Vercel，自动识别 40 多个框架，返回预览 URL 和可认领的 claim URL，分享前不用手动折腾 CLI。 安装也很简单，npx skills add vercel-labs/agent-skills 一行就装上。 GitHub：

推荐 @MengTo 为设计师和开发者们开源的 Skills MengTo 是 @designcodeio 和 创始人，在设计和开发结合方面有非常深的积累，他的分享必须关注起来，这个开源项目把设计指令、工作流、风格系统、抓取与调试经验都沉淀成了「四大类、75 个 Skills」 1. Codex workflows - 10 个 可复用的 Agent 操作流程（抓取、转 prompt、性能剖析、内容生产） video-to-superprompt、stitched-full-page-capture、html-to-interaction-prompts、daily-ui-inspiration-capture、optimize-web-animations、performance-profiling 2. Media - 2 个 按用途/裁切/比例挑选高质量图片素材 aura-asset-images、unsplash-asset-images 3. UI - 1 个 “像设计系统一样写 prompt”的方法论 design-first-ui-prompting 4. Web design - 62 个 落地页结构、动效系统、WebGL/3D、CSS 处理、布局系统、视觉风格 landing-page、pricing-page、gsap、threejs、tailwindcss、animation-on-scroll、globe-gl、cobejs、vantajs、progressive-blur、css-border-gradient、各种 dark/glass/skeuomorphic 风格包 ... 旗舰工作流：从参考视频到一键 HTML 1. video-to-superprompt —— 输入一段参考视频（设计稿/落地页/动画录屏），用 ffprobe+ffmpeg 抽帧，按“故事 / 布局 / 运动 / 视觉 / 技术重建 / 可访问性”六层分析，输出一个长到不看原视频也能重建的 paste-ready prompt，明确点名 GSAP ScrollTrigger、Lenis、Three.js、video.currentTime scrubbing 等具体机制。 2. html-to-interaction-prompts —— 把已有 HTML 页面（如 Aura Build 产物）拆成“单段/单动画/单按钮/单 hover/单 WebGL 效果”的可复用 prompt 文章。 3. stitched-full-page-capture —— 解决 Framer 等懒加载/滚动动画站点 fullPage 截图发白的痛点：滚动预热 → 视口分步截图 → 垂直拼接 → 用拼接图重切 section crop，并写回 manifest。配套 Playwright + ffmpeg 脚本。 4. daily-ui-inspiration-capture —— 把“浏览 + 抓取 + 参考研究 + prompt 生成”组合成每日自动循环，产出 prompt pack。 两个值得细读的 Skill 范式 1. design-first-ui-prompting 给出了一套固定 prompt 骨架：GOAL → FORMAT → LAYOUT → TYPE SYSTEM → COLOR+MATERIAL → IMAGERY → COPY → CONSTRAINTS → NEGATIVE PROMPT，并强调三个关键技巧： · “Variants > rerolls”：先锁定布局+层级+文案，再每次只改一个变量（角度/强调色/卡片排布/背景调子）。 · 2-pass 字体工作流：模型常拼错字时，先无字生成留出文字安全区，再回 Figma 排版。 · Constraints card：用 FONT / STYLE / MODE 三行小面板像 mini style guide 一样锚定输出。 2. landing-page 则示范了一个“设计 + 转化 + SEO”三合一 SOP：先收集页面目的/受众/证据/约束，再给核心结构（首屏 5 要素 → 中段论证 → 底部异议处理），列出 4 种布局选型、6 条高转化策略、headline/CTA 文案模板、逐节迭代顺序、SEO/AEO 清单和常见坑——典型地体现了“Skill = 操作规程”的写法。

测了最流行的5个前端页面设计 Skill。 我觉得 ui-ux-pro-max 非常一般，自带太多模版、规则反而限制模型发挥。 ① 动效方面 emil-design-eng 最好。 ② 网页规范+无障碍，Vercel团队的 web-design-guidelines 最好 ③ taste-skill 的AI味最小，而且文案简洁。 Anthropic 自带frontend-design万金油，用的人太多，即将成为新的 AI 味。 所有测试案例和效果见评论区