Andrew Bulgakov

Design with agents: copy, don't invent

Agent UI looks vibe-coded until you hand it a reference. The loop I use.

NoteAI playbook
  1. Pick a named reference that already ships the quality you want.
  2. Have the agent extract its design system into docs/DESIGN.md with exact values: type scale, spacing, radii, controls, motion. Build only from that doc.
  3. Use real components, not hand-rolled ones. shadcn, Geist, Lucide.
  4. Install taste as a skill:
npx skills add Leonxlnx/taste-skill
npx skills add benjitaylor/skills --skill stageshow
npx skills add anthropics/skills --skill frontend-design
  1. Compare screenshots side by side with the reference before calling it done.

Banned

  • Beams, scroll reveals, counting numbers and other decorative motion.
  • Many colors, glows, colored tags, cream backgrounds.
  • Eyebrow labels and tiny captions.
  • Big hero type on a minimal page.

Related