# 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.

- Page: https://hebbmind.com/pt-BR/collections/ui-design-taste
- Updated: 2026-10-12

## Resources

- [DESIGN.md](https://hebbmind.com/pt-BR/cli/design-md.md): [CLI] Step 1: write colors, type, spacing and the reasons for them in DESIGN.md; lint checks contrast. Needs Node.js; alpha.
- [Figma MCP Server](https://hebbmind.com/pt-BR/mcp/mcp-server-guide.md): [MCP] Step 2, Figma files: frames, variables, components. Approved agents only; Starter plan or View/Collab seat: 6 calls/mo.
- [Figma Design to Code](https://hebbmind.com/pt-BR/skill/figma-implement-design.md): [Skill] Step 2, with Figma MCP Server: builds a frame with your components and tokens to match a screenshot. Uses several calls.
- [OpenDesign](https://hebbmind.com/pt-BR/mcp/open-design.md): [MCP] Step 3, explore: pick a direction, build web or mobile prototypes from DESIGN.md. macOS/Windows app; agent or API key.
- [Frontend Design](https://hebbmind.com/pt-BR/skill/frontend-design.md): [Skill] Step 4, commit in code: agent plans palette, type and layout for your brief and drops generic choices before coding.
- [Taste Skill](https://hebbmind.com/pt-BR/skill/taste-skill.md): [Skill] Step 4, or instead of Frontend Design: dials for layout variance, motion and density. Default v2 is experimental.
- [Chrome DevTools MCP](https://hebbmind.com/pt-BR/mcp/chrome-devtools-mcp.md): [MCP] Step 5: agent opens the page in Chrome and screenshots what it built. Needs Node.js, Chrome; usage stats on by default.
- [Impeccable](https://hebbmind.com/pt-BR/skill/impeccable.md): [Skill] Step 6: critique, audit and polish commands plus rules for typical AI-made UI problems. Run /impeccable init first.
- [Web Design Guidelines](https://hebbmind.com/pt-BR/skill/web-design-guidelines.md): [Skill] Step 6: reviews UI code against Vercel's Web Interface Guidelines, listing issues as file:line. Fetches rules each run.
- [Make Interfaces Feel Better](https://hebbmind.com/pt-BR/skill/make-interfaces-feel-better.md): [Skill] Step 7: optical alignment, concentric radii, shadows, hover states, hit areas. Quick and full modes; needs Node.js.
- [Skills For Designers and Engineers](https://hebbmind.com/pt-BR/skill/emilkowalski-skills.md): [Skill] Step 8, motion: picks easing and timing, reviews animations, says what not to animate. Installs the whole skill pack.
- [Accessibility Scan](https://hebbmind.com/pt-BR/skill/accessibility-scan.md): [Skill] Step 9: scans a live page for WCAG 2.2 issues, giving selector and suggested fix; doesn't edit. Needs Node.js, Chrome.

[Collections](https://hebbmind.com/pt-BR/collections.md)