Building working components with AI

Some component details are difficult to hand over in Figma. A static account selector can show its appearance, but not how it loads, opens, handles long names, or moves focus.

When developer capacity is limited, those gaps often become local product overrides. I use AI to create a working version earlier, inside the design system itself.

Start inside the existing system

I open the design system repository and ask AI to read the component source, nearby Storybook stories, tokens, and project conventions before writing code.

For an account selector, I list the required states first. These include default, open, loading, empty, error, long account names, and multiple accounts. I also define what should happen with a keyboard and where focus should move.

The task is constrained. Use existing components and tokens. Follow the current API and naming patterns. Do not add a dependency unless the system already uses it.

Build the behaviour and the evidence

AI creates the first component version and a Storybook story for each state. The main story exposes controls so the team can change labels, account numbers, state, and content length in the browser.

I compare the working component with the Figma design, then test it at narrow widths, with long content, by keyboard, and at zoom. I check focus order, visible focus, loading feedback, errors, and what happens when information is missing.

The stories become part of the handover. An engineer can inspect the behaviour, review the proposed API, and see the edge cases without interpreting annotations across several frames.

Review before contribution

AI gets the component to a reviewable state. It does not approve the code.

An engineer checks the implementation against repository conventions, dependencies, tests, and future maintenance. We adjust the component before it becomes part of the shared library.

This changes the product conversation. Teams no longer need to recreate the missing behaviour locally while waiting for the system to catch up.

Stop fixing around the system. Start fixing the system.