Articles · 4-minute read

Design systems in the age of AI

How a small set of explicit decisions can keep generated interfaces coherent.

Write down the decisions

A design system is useful when it explains why a choice belongs. Record the reading hierarchy, spacing rhythm, color roles and interaction states. A model can repeat those decisions more reliably when they are explicit.

Start with one complete surface

Pick a real page and resolve its content, empty states, mobile layout and keyboard behavior. Extract repeated patterns after the page works. Starting with a large catalogue of abstract components can hide the actual product decisions.

Review the output against evidence

Compare generated work to the selected visual reference and the user task. Check text wrapping, image crops, navigation and errors. Reusing a component does not guarantee that the screen makes sense.

Take it with you

Design decision record

A working starting point. Adapt it to your project.

DESIGN DECISION RECORD

Surface and user task:
Approved reference:
What must stay unchanged:
Primary action:
Type hierarchy:
Color roles:
Spacing rhythm:
Image crop and focal point:
Mobile reading order:
Keyboard and focus behavior:
Loading / empty / success / error states:

Acceptance: a person can understand the page and complete its main task at narrow and wide widths.

Download .txt ↓

Design systems in the age of AI

Write down the decisions

Start with one complete surface

Review the output against evidence

Keep exploring.

Let’s BuildWhat’s Next.

Start a conversation.

Signal received.

Write down the decisions

Start with one complete surface

Review the output against evidence

Keep exploring.

Making websites feel alive

The product-to-creative prompt

A better lead handoff

Let’s BuildWhat’s Next.

Start a conversation.

Signal received.