做 Web 前端，用这一套
模型、Skill、组件、图标、动效、字体一次配齐。模型取自 LMArena WebDev 榜单，其余由编辑按用途挑选；每一项都能单独换。
编辑更新 2026-10-10 · 模型依据 LMArena WebDev 2026-10-08
角色首选备选 · 什么时候换
模型Claude Opus 5.5WebDev #1 · 1813省钱：Claude Sonnet 5.5（#3 · 1774，价格减半） · 开源：MiMo V2.6 Flash（#16 · MIT）Skillfrontend-designSkill · Anthropic完成后用 web-design-guidelines 按 Web 界面规范自查组件shadcn/ui库 · MIT要完全无样式、自己定设计系统时用 Base UI图标Phosphor Icons库 · MIT需要 AI 品牌 logo 时加 LobeHub Icons动效Motion + Motion AI Kit库 + 插件滚动叙事页面换 GSAP + gsap-skills字体Geist库 · OFL-1.1中文用霞鹜文楷；封面类视觉用 qiaomu-cover-fontsMCPFigma MCP server插件 · Figma没有设计稿时用 open-design 先出原型
带走这一套
AGENTS.md
# 前端约定 - 组件：shadcn/ui，按需 npx shadcn@latest add <component>，不另引 UI 库 - 图标：@phosphor-icons/react，默认 weight="regular" - 动效：motion/react；只给用户操作的反馈加动效，不做整页淡入 - 字体：Geist Sans / Geist Mono，中文回退霞鹜文楷 - 动手前用 frontend-design 定方案，完成后用 web-design-guidelines 自查
安装与用法
# Skill（Claude Code） /plugin marketplace add anthropics/skills /plugin install example-skills@anthropic-agent-skills # 审查 Skill 与 Motion AI Kit npx skills add https://github.com/vercel-labs/agent-skills/tree/main/skills/web-design-guidelines npx motion-ai # 依赖 npm i @phosphor-icons/react motion geist