Former Figma Engineer's 7 Principles for AI-Assisted Design

Always Consider the Whole

The design process follows three steps from Christopher Alexander's Notes on the Synthesis of Form : list all constraints, consider solutions satisfying them, and if constraints change, return to step one. Constraints include typography rules, workflows, and business logic states. Skipping step three leads to "whack-a-mole" design — patching local issues (e.g., crowded left sidebar) instead of holistic re-evaluation. AI worsens this by encouraging prompts like "make X pop" or "add a tooltip for Y," fragmenting the design. The author's team at Ref maintains a document of small annoyances; obvious fixes ship fast, but minor issues are batched for holistic redesign to avoid overreaction.

Remove Stuff

Agents love adding — extra copy, lines, icons, defensive try-catch blocks, duplicate utility functions. The resulting UI looks better than most engineer-written code but remains mediocre. A simple practice: examine every element and ask, "Do I really need this?"

Iterate in a Design Tool

Don't iterate design in the product. Use a tool offering fine-grained control and rapid iteration with minimal context. Prototype gravity is the silent killer: once an agent builds v1 in your codebase, improving that version feels easier than exploring alternatives, and the agent grafts onto real code. Figma remains king with improving AI integrations; Cursor Design Mode, Claude Design, and HTML prototypes are also viable. Always use a purpose-built design tool and have AI generate 3–4 variants for each exploration.

Use Components and Libraries

Separate view from logic; create reusable components. This keeps the application visually consistent instead of a patchwork of re-implemented buttons. At Ref, a /showcase page serves as a component playground: agents build and test UI components there before wiring them into the main app.

Use Preview Deploys

Best evaluation uses real data. Preview deployments let you test new designs against a live backend. Even if the agent builds exactly what you asked, hands-on testing with real data often reveals mismatches. For large full-stack features, Ref splits frontend and backend PRs: backend changes verified by unit/integration tests; frontend changes need human verification, eased by shareable preview links.

Steal Stuff

Most UX problems are already solved. Collect screenshots of products solving similar problems or expressing similar ideas — every strong designer the author knows starts projects this way. These references give agents excellent context.

Explore Your Taste

Taste is reflecting on your own reactions. As Kyle Chayka notes, this isn't exclusive to Brooklyn loft parties; it's essential to avoid shipping slop. Engineers spot design flaws well but lack a mental library of practiced solutions. Building that library requires repeated trial and reflection. At Ref, with no full-time designers, the team "threshes" a design: place it in the middle and keep beating it until satisfied. The process is fun but painful — you'll face massive criticism before reaching quality.