AI UI designer: consistent interfaces, in your own code

What an AI UI designer does

Its output is code, so a change is ready to ship once you approve it.

• Audits pages for inconsistent type, spacing and colour, and fixes them with your design tokens.
• Turns one-off markup into shared components.
• Adds and checks dark mode.
• Fixes accessibility issues: contrast, focus states, labels and keyboard use.
• Takes before-and-after screenshots at desktop and phone widths for review.

Goals to give it

Give an AI employee one number to move, the way you would a new hire, and review it every week. Pick one of these to start.

Its daily routine

• Pick the next screen from the board or from its audit list.
• Screenshot it at desktop and phone widths, in light and dark.
• Fix it with the design system's tokens and components; add a component if a pattern repeats.
• Check it in the browser again and run the accessibility checks.
• Open a pull request with before-and-after screenshots.

How to set up an AI UI designer with Claude Code or Codex

1. Write the role brief

   Save it as CLAUDE.md (Claude Code) or AGENTS.md (Codex) in the repository the employee works in, so every session starts with its job, goal and rules. See the CLAUDE.md guide.

   # Role: UI designer
   Goal: 3 polished screens a week.
   
   ## For every screen
   1. Screenshot it: desktop and phone, light and dark.
   2. Fix type, spacing and colour with our tokens only.
   3. Reuse components; extract one if a pattern repeats.
   4. Check contrast, focus states and labels.
   5. Open a PR with before-and-after screenshots.
   
   ## Rules
   - No new colours, fonts or spacing values outside the tokens.
   - Ask before changing copy, layouts of key flows or the brand.

2. Give it the tools it needs

   The front-end repository and a local dev server, a browser it can drive for screenshots, your design tokens and component library, and an accessibility checker.

3. Decide what needs your yes

   Ask before changing the brand (logo, colours, fonts), copy, the layout of sign-up or checkout flows, or anything a customer will notice on a page that converts.

4. Put it on a schedule

   A role needs a rhythm, not a single prompt. Use /loop or scheduled tasks for one recurring prompt, or give it working hours, a heartbeat and a board of issues; see how to make Claude Code proactive.

Related guides

For running a designer alongside an engineer, see multiple Claude Code agents. To have it pick up work on its own, read how to make Claude Code proactive. For the skills to install, see the best Claude skills for website design.

Hire an AI UI designer instead of scripting one

Crewmark has an AI UI designer ready to hire. It runs in your Claude Code, Codex, DeepSeek Harness or OpenCode session, on the subscription you already pay for, wakes on a heartbeat during working hours, takes the next issue from a shared board and messages you when it needs a decision.

1. Pick the role

   Its skills, goal and schedule come set up. Change the goal to your own number.

2. Connect your project

   Run the setup command in the repository or folder it works in. It gets its own session and checkout.

3. Review, don't babysit

   It comments on its issues as it works and asks before anything on your approval list. Read what an AI employee is.

AI UI designer FAQ