Build a Web frontend with this set
Model, skill, components, icons, motion, and type in one set. The model comes from the LMArena WebDev board. An editor picked the rest by job. Each row can be swapped.
Edited 2026-10-10 · Model basis LMArena WebDev 2026-10-08
RolePrimaryAlternative · when to switch
ModelClaude Opus 5.5WebDev #1 · 1813Value：Claude Sonnet 5.5（#3 · 1774，half the token price） · Open：MiMo V2.6 Flash（#16 · MIT）Skillfrontend-designSkill · AnthropicAfterward, review with web-design-guidelinesUIshadcn/uiLibrary · MITUse Base UI for a fully unstyled design systemIconsPhosphor IconsLibrary · MITAdd LobeHub Icons when you need AI brand marksMotionMotion + Motion AI KitLibrary + pluginSwitch scroll storytelling to GSAP + gsap-skillsTypeGeistLibrary · OFL-1.1Use LXGW WenKai for Chinese. Use qiaomu-cover-fonts for covers.MCPFigma MCP serverPlugin · FigmaWith no design file, prototype first in open-design
Take this set
AGENTS.md
# Frontend - Components: shadcn/ui, added with npx shadcn@latest add <component>. Do not add a second UI kit. - Icons: @phosphor-icons/react, default weight="regular" - Motion: motion/react. Animate feedback to a user action. Do not fade the whole page in. - Type: Geist Sans / Geist Mono, with LXGW WenKai as the Chinese fallback - Plan with frontend-design before coding. Review with web-design-guidelines after.
Install and use
# Skill (Claude Code) /plugin marketplace add anthropics/skills /plugin install example-skills@anthropic-agent-skills # Review skill and Motion AI Kit npx skills add https://github.com/vercel-labs/agent-skills/tree/main/skills/web-design-guidelines npx motion-ai # Dependencies npm i @phosphor-icons/react motion geist
Not for
Native mobile For Kotlin / Compose, open “Build an Android app”. The model order is different.
Mostly backend and scripts When the interface is a thin layer, pick the model from Terminal-Bench.
A tight budget Swap the model for Claude Sonnet 5.5 (half the price, 39 points lower) or open-weight MiMo V2.6 Flash. Leave the rest.