UI design taste for agent-built apps
For designers and frontend devs making agent-built web UI look designed. Most items need a coding agent like Claude Code or Codex, Node.js and web code. Set the system, explore, commit, review, polish, animate, test accessibility. Figma MCP: paid Dev/Full seat. Checks don't replace design review.
12 件のリソース2026-10-12 更新
- DESIGN.mdCLIStep 1: write colors, type, spacing and the reasons for them in DESIGN.md; lint checks contrast. Needs Node.js; alpha.google-labs-code/design.md28.4k
- Figma MCP ServerMCPStep 2, Figma files: frames, variables, components. Approved agents only; Starter plan or View/Collab seat: 6 calls/mo.figma/mcp-server-guide2.1k
- Figma Design to CodeSkillStep 2, with Figma MCP Server: builds a frame with your components and tokens to match a screenshot. Uses several calls.figma/mcp-server-guide2.1k
- OpenDesignMCPStep 3, explore: pick a direction, build web or mobile prototypes from DESIGN.md. macOS/Windows app; agent or API key.nexu-io/open-design102k
- Frontend DesignSkillStep 4, commit in code: agent plans palette, type and layout for your brief and drops generic choices before coding.anthropics/skills182k
- Taste SkillSkillStep 4, or instead of Frontend Design: dials for layout variance, motion and density. Default v2 is experimental.Leonxlnx/taste-skill97.9k
- Chrome DevTools MCPMCPStep 5: agent opens the page in Chrome and screenshots what it built. Needs Node.js, Chrome; usage stats on by default.ChromeDevTools/chrome-devtools-mcp53.7k
- ImpeccableSkillStep 6: critique, audit and polish commands plus rules for typical AI-made UI problems. Run /impeccable init first.pbakaus/impeccable81.9k
- Web Design GuidelinesSkillStep 6: reviews UI code against Vercel's Web Interface Guidelines, listing issues as file:line. Fetches rules each run.vercel-labs/agent-skills32.5k
- Make Interfaces Feel BetterSkillStep 7: optical alignment, concentric radii, shadows, hover states, hit areas. Quick and full modes; needs Node.js.jakubkrehel/make-interfaces-feel-better3.7k
- Skills For Designers and EngineersSkillStep 8, motion: picks easing and timing, reviews animations, says what not to animate. Installs the whole skill pack.emilkowalski/skills46.6k
- Accessibility ScanSkillStep 9: scans a live page for WCAG 2.2 issues, giving selector and suggested fix; doesn't edit. Needs Node.js, Chrome.AccessLint/skills107
