前端

面向用户界面、视觉品味、视频内容的 AI Skill 与工具。前端开发是 skill 组合叠加的过程 —— frontend-design 与 react-best-practices 是默认双底座、永远同步生效,按场景叠加 impeccable / ui-ux-pro-max / taste-skill,最后用 web-design-guidelines 收尾质检。

💡 跨场景:产品工作流的"画原型 Demo"环节(给 PM/stakeholder 看)就是走本页 SDD 流程 —— 同一套 skill,不同输出物。

开发

完整 SDD 流程: 🧠 思维三步走 → ⚙️ skill 组合叠加(边写边生效)→ 🔍 收尾质检

skill 组合关系:

┌─ frontend-design          (默认装,自动激活,任何 UI 任务都生效)
├─ react-best-practices     (必备搭子,写每个 React 组件就遵守)
├─ impeccable | ui-ux-pro-max  (二选一或都不用,看是否需要更强设计语言/产品类型化)
├─ taste-skill              (可选,反"模板感",仅品牌/营销页)
├─ better-icons             (可选,200k+ 图标库 + MCP,需要图标时调用)
├─ web-design-guidelines    (静态质检,原型完成 + 提交前两个时机跑)
└─ agent-browser            (运行时验证,真实打开浏览器看截图,补 SDD 闭环最后一公里)

💡 不分原型 / 上线代码 —— Demo 常被直接拿去上线,react-best-practices 与 web-design-guidelines 都要跟上,不因"只是给 PM 看"打折扣。

frontend-design

🎯 默认底座(自动激活) —— 装一次永远生效,任何前端任务的隐式底层。

GitHub 仓库 · anthropics/skills

🎯 用途 —— Anthropic 官方前端设计 skill,自动激活,引导 Claude 输出高品质 UI(独特字体、主色 + 锐利点缀、动效、非对称布局)。

💎 价值 —— 装上即生效,任何前端任务自动有"设计感",不用每次 prompt 强调。

react-best-practices

仓库实际名为 vercel-react-best-practices(vercel-labs 给所有 skill 加了 vercel- 前缀),功能不变。

🎯 必备搭子(边写边参) —— React/Next.js 40+ 规则按影响力排序,与 frontend-design 同步生效,不是后置质检。

GitHub 仓库 · vercel-labs/agent-skills

🎯 用途 —— Vercel 团队整理的 React / Next.js 性能优化指南,40+ 规则分 8 个类别按影响力排序;让 agent 在写组件时就避开 cascading useEffect、过重的 client-side import 等高频反模式。

💎 价值 —— 浓缩 Vercel 十年 React/Next.js 工程经验。写每个组件前先 reference 这套规则,把性能与架构问题挡在键盘上 —— 写完才审,重构成本远高于一开始就遵守。

📦 安装 —— npx skills add vercel-labs/agent-skills --skill vercel-react-best-practices --global

impeccable

🎯 品味驱动叠加 —— 23 个调味命令(typeset / animate / delight) + 反模式库,在不确定风格 / 品牌站 / 营销页时叠加。与 ui-ux-pro-max 二选一。

GitHub 仓库 · pbakaus/impeccable

🎯 用途 —— 加深的设计语言,带 23 个命令(typeset / animate / colorize / layout / delight 等)和反模式库;支持 brand(设计即产品:营销 / 作品集 / editorial)与 product(设计为产品服务:App UI / 工具 / Dashboard)两种模式。

💎 价值 —— 解决"说不出具体风格只要高级感"的场景;跨 Cursor / Claude Code / Gemini CLI / Codex 通用。

📦 安装 —— npx skills add pbakaus/impeccable

ui-ux-pro-max

🎯 数据驱动叠加 —— 161 色板 / 161 产品类型规则,已知做哪种产品(SaaS / dashboard / 落地页 / 移动端)时叠加。与 impeccable 二选一。

GitHub 仓库 · nextlevelbuilder/ui-ux-pro-max-skill · 官网

🎯 用途 —— 数据驱动的 UI/UX 设计智能库,内含 50+ 风格、161 色板、57 字体配对、161 产品类型决策规则、99 UX 指南、25 图表类型,覆盖 10 个技术栈;支持 plan / build / create / design / implement / review / fix / improve / optimize / refactor 多种动作。

💎 价值 —— 不只是"风格指南",而是"设计决策知识库";在你说"做一个 dashboard / SaaS / 落地页 / 移动端"时能直接调取对应产品类型规则与色板,可直出 React/Vue 代码。

📦 安装 —— npm install -g uipro-cli && uipro init --ai claude

taste-skill

🎯 可选风格特调 —— 反"模板感",仅适合品牌 / 营销页(别给 dashboard 用)。MOTION_INTENSITY / VISUAL_DENSITY 可调。

GitHub 仓库 · Leonxlnx/taste-skill

🎯 用途 —— 阻止 AI 产出 generic slop UI,强调高级排版、留白、运动感;提供可调参数 MOTION_INTENSITY(动效深度)和 VISUAL_DENSITY(信息密度)。

💎 价值 —— 框架无关(React / Vue / Svelte 都能用),适合追求"非通用模板感"的页面 —— 营销页、作品集、editorial 风格站点。Dashboard / 信息密集型后台不要用,会跟高密度需求打架。

📦 安装 —— npx skills add https://github.com/Leonxlnx/taste-skill

better-icons

🎯 可选图标库 —— 200k+ 图标(150+ 集合)+ MCP 接入,需要图标时按需调用,自动 sync 到项目文件,不在 chat 里贴 SVG 浪费 token。

GitHub 仓库 · better-auth/better-icons

🎯 用途 —— 同时提供 Claude Code skill 与 MCP server,内置 200k+ 图标(覆盖 150+ 集合);agent 通过 search_icons / get_icon / sync_icon / recommend_icons 直接搜索、检索、批量同步图标到项目文件;支持 React / Vue / Svelte / Solid 框架导出。

💎 价值 —— Agent 处理图标的标准答案 —— 不在 chat 里贴 SVG 浪费 token,直接 sync 到项目目录(如 src/icons/);自动学习偏好、批量获取、相似图标推荐。

📦 安装 —— npx skills add better-auth/better-icons · MCP 模式 npx better-icons setup

web-design-guidelines

🎯 收尾质检 —— a11y / 表单 / 动效 / 排版,按 Vercel guidelines 给 file:line 反馈。两个时机都跑:原型完成时 + 提交前。

GitHub 仓库 · vercel-labs/agent-skills

🎯 用途 —— 基于 Vercel Web Interface Guidelines 的 UI 审查 skill,以 file:line 形式标出可访问性、表单、动效、排版的具体问题;每次运行拉取最新规则,不靠陈旧内置检查。

💎 价值 —— 原型 / 代码完成后的"独立审查员",系统性补漏 a11y / UX 细节;与 frontend-design 互补 —— 一个负责出感觉,一个负责堵漏洞。原型完成时跑早发现,提交前再跑做最终把关。

📦 安装 —— npx skills add https://github.com/vercel-labs/agent-skills --skill web-design-guidelines

调试 / 运行时验证

写完代码 + 静态质检通过 ≠ 真实跑起来对 —— 这一步让 agent 像真人一样打开浏览器看一眼,补上 SDD 闭环最后一公里。

agent-browser

🎯 运行时验证 —— Vercel 官方,装机量 243K(浏览器类 No.1)。让 Claude 直接打开浏览器,导航 / 点击 / 截图 / 抓 DOM,完美匹配 agent 的 tool-use 范式。

GitHub 仓库 · vercel-labs/agent-browser · skills.sh

🎯 用途 —— Native Rust CLI(非 Node 包装层),通过 CDP 操控 Chrome/Chromium;提供 accessibility-tree 快照与紧凑的 @eN 元素引用,让 agent 高效理解页面结构;支持 sessions / 认证保险库 / 状态持久化 / 视频录制;另有 electron(VS Code/Slack/Figma 等桌面应用)、slack(收发消息)、dogfood(探索性测试)、vercel-sandbox、agentcore(AWS Bedrock 云浏览器)等专业子 skill。

💎 价值 —— 与 Playwright 等"写代码跑测试"的工具不同,agent-browser 把浏览器做成了 agent 工具 —— 看截图 → 决定下一步 → 点击 → 看新截图,1:1 命中 Claude 的 tool-use 范式。调试 UI 是否真的对、原型走通流程、QA 探索性测试首选;真要写回归测试再叠加 Playwright。

📦 安装 —— npx skills add vercel-labs/agent-browser@agent-browser -g -y && npm i -g agent-browser && agent-browser install(skill + CLI + Chromium 三步)

Windows 启动方式(必读)

Windows 上不要用 agent-browser open <url> 直启 —— Chrome 会因 crashpad 管道问题秒退。改用 connect 模式 手动启 Chrome 在 9222 端口,再让 agent-browser 接上去:

# 1. 启动 agent-browser 自带的 Chrome (独立 user-data-dir,避免与日常 Chrome 冲突)
$chrome = Get-ChildItem "C:\Users\$env:USERNAME\.agent-browser\browsers\chrome-*\chrome.exe" | Select-Object -First 1 -ExpandProperty FullName
$userDir = "C:\temp\agent-chrome-profile"
Start-Process -FilePath $chrome -ArgumentList `
  "--remote-debugging-port=9222", "--user-data-dir=$userDir", `
  "--no-first-run", "--no-default-browser-check", "--disable-crash-reporter", `
  "<目标URL>"

# 2. 让 agent-browser 接上去,然后正常用
agent-browser connect 9222
agent-browser get url                    # 验证连接
agent-browser screenshot foo.png --full  # 全页截图用 --full,不是 --full-page

如果之前 daemon 已起残留:Get-Process agent-browser-win32-x64 | Stop-Process -Force。

视频生成

用 React 组件 / HTML 程序化生成视频,把视频纳入工程化管线。

HyperFrames

GitHub 仓库 · heygen-com/hyperframes

🎯 用途 —— 用 HTML(+ CSS/JS)来编排视频内容,并提供预览与渲染能力,适合让 agent 直接产出可控、可复现的视频合成。

💎 价值 —— HTML-native、AI-first、渲染结果确定性强;适合自动化视频管线与"可被 agent 修改"的视频模板。

Remotion

GitHub 仓库 · remotion-dev/remotion

🎯 用途 —— 用 React 组件"程序化"生成视频(MP4 等),把动画 / 排版 / 数据驱动的视频生成放进前端工程体系;典型用法是 Node CLI 端 batch render。

💎 价值 —— 复用 React 生态(组件化、CSS / Canvas / SVG / WebGL),便于参数化批量生成、版本化管理视频模板。