제안하기

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 업데이트

  1. 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
  2. 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
  3. 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
  4. 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
  5. Frontend DesignSkillStep 4, commit in code: agent plans palette, type and layout for your brief and drops generic choices before coding.anthropics/skills182k
  6. Taste SkillSkillStep 4, or instead of Frontend Design: dials for layout variance, motion and density. Default v2 is experimental.Leonxlnx/taste-skill97.9k
  7. 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
  8. ImpeccableSkillStep 6: critique, audit and polish commands plus rules for typical AI-made UI problems. Run /impeccable init first.pbakaus/impeccable81.9k
  9. 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
  10. 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
  11. 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
  12. 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
Markdown 버전(에이전트용)