Hire an AI UI designer

Everything it can hand back

Your task sets the actual outputs. The specialist picks the methods that cover them.

• A set of colour, type, spacing and shadow values, with names developers can use
• The core parts, such as buttons, form fields, cards and menus, each with its states
• Light and dark versions, if you ask for them
• Rules for how the layout changes on phone, tablet and desktop
• An accessibility check list for contrast, keyboard use, focus and touch size
• Handoff notes for developers, and a list of what is still unchecked

How it does the job well

• Start from the user's task and the content, then the layout. Decoration comes last.
• Design every state: empty, loading, error, long text and mobile.
• Keep one visual system. Reuse spacing, type and colour tokens instead of one-off values.
• Check text contrast (at least 4.5:1 for body text) and keyboard focus as you go.

Mistakes it avoids

• Quoting the profile's targets as results.
• Contrast ratios you did not work out.
• Designing screens before the foundations are agreed.
• Designing only the happy path at desktop width.
• Copying a reference's logo, text or claims instead of learning from its structure.
• Handing over a picture without the sizes, tokens and behaviour a developer needs.

What a good result looks like

An example, not your task: You are starting a product and have no shared colours, type or button styles yet.

• Design tokens. Named values for colour, type, spacing, shadow and motion, in light and dark if asked.
• Component library. Buttons, form fields, cards, menus and feedback, each with variants and a use-when rule.
• Component states. Hover, focus, disabled, loading, error and empty states for each part.
• Responsive rules. How the layout and each part change from phone to desktop.
• Accessibility checklist. Contrast pairs, keyboard use, focus rules, touch size and reduced motion.
• Handoff notes. Token names and build notes a developer can follow.

How the work is checked

• Every component lists all its states.
• Every colour pair has a ratio with working, or "not checked".
• Sample values are labelled as proposed.
• Nothing is called tested, built or approved.
• States which checks passed, failed or could not run, and names missing inputs.

These checks have not been run against a model yet. Your AI uses them to check its own work.

A second opinion

Before it hands back, your AI reviews the draft the way Otl Aicher and Herb Lubalin would. This is a way of reviewing the work. It does not mean they wrote or endorse it.

Capabilities

• Read the brief. It confirms the product, users, platforms, brand and rules. Missing facts are asked once, then marked MISSING.
• Set the foundations. It writes tokens for colour, type, spacing, shadow and motion, with semantic names such as error and success.
• Design the base parts. It specifies buttons, inputs, cards, navigation and feedback, each with every state.
• Set responsive rules. It plans phone-first layouts and says how each part changes at wider screens.
• Add accessibility. It checks contrast pairs, keyboard use, focus, touch size and reduced motion.
• Write the handoff. It lists token names, part notes and what a developer must test.

How the role works

1. Checks your task, context and available tools.
2. Picks the methods needed and prepares a work plan.
3. Carries out supported tasks, with each method's limits and review gates.
4. Checks the real deliverables and corrects supported faults.
5. Hands back files, evidence and unresolved gaps.

Your specialist's working setup

Download the base specialist without a task form or account. README.md and SETUP.md explain how to use the folder. SOUL.md defines its scope. INTAKE.md asks missing questions inside your AI. PLAYBOOK.md, SKILLS.md, BEST_PRACTICES.md, CHECKS.md and HANDOFF.md guide the work and its checked deliverables.

Complete associated skills, supporting files and licences are included. Choose only the methods needed for the actual task. Keep context, working files and accepted feedback in your AI project.

Use this specialist through MCP or the API

Call prepare_specialist with role_id design-ui-designer only. No task is required to load it. Your AI asks what job you need done, what you want back and which relevant context it can use.

For task-led hiring, call find_specialist, explain the suggested specialists and let the user accept or change the team.

Complete ZIP: Download base specialist. API: GET /api/v1/specialists/design-ui-designer/pack. The host AI supplies its own model, tools and execution; a pack does not connect accounts or run a task.

Inputs and helpful context

The specialist starts from the task brief. Only active methods require their inputs.

For the primary method, when used

• What the product is, who uses it and whether it is a web app, mobile app or site
• Your brand colours, fonts and logo, or "none yet" (optional)
• The platforms and screen sizes you must support
• The screens or flows that matter most, as a list or screenshots (optional)
• Rules you must meet, such as your accessibility target or a design library you already use (optional)

Helpful context (optional)

• Screenshots of your current product.
• Your brand file or style guide, if you have one.
• A list of the five screens you build most often.

Tools and access

• Claude, ChatGPT or Gemini in a chat: Good for the system plan and the written rules. Attach screenshots if the AI can read images.
• A contrast checker: Chat math on colours can slip, so test your final pairs in a tool built for it.

Functions and deliverables

• UI designer agent: Get a UI design system for your product, with colours, type, spacing, buttons and forms in every state, dark mode and accessibility checks.
  • A set of colour, type, spacing and shadow values, with names developers can use
  • The core parts, such as buttons, form fields, cards and menus, each with its states
  • Light and dark versions, if you ask for them
  • Rules for how the layout changes on phone, tablet and desktop
  • An accessibility check list for contrast, keyboard use, focus and touch size
  • Handoff notes for developers, and a list of what is still unchecked
  Source: Michael Sitarzewski and Agency Agents contributors.
• Design system file writer: Describe your product's feel and get a DESIGN.md design system file with colours, fonts, layout, motion and a ban list, ready for Google Stitch.
  • A DESIGN.md file ready to paste into Stitch
  • Named colours with hex codes and roles
  • Font and spacing rules
  • Button, card and input behaviour notes
  • A list of banned design clichés
  Source: sickn33.
• Colour contrast checker: Share your colour tokens. Get light and dark theme pairs checked for readability, with the closest passing colours.
  • A pass or fail line for each text and background pair, with its ratio
  • Separate results for light and dark mode
  • The closest passing colour for each failure, with the same hue
  • One value per token that passes on every background
  • A list of where each token is used, and what to check by eye
  Source: sickn33.
• Visual system rules writer: Write visual system rules for your brand or event: the feeling first, then firm rules for colour, type and grid that keep every place consistent.
  • The feeling in a few lines
  • What it must not look like
  • Colours with a meaning and reason each, and ruled-out colours
  • Tools for type, page format and grid, plus play room and a named checker
• Brand profile builder: Share your website. Get a reusable profile covering your products, customers, voice and approved claims, with sources.
  • A folder of eight plain files, from a start file for your AI to a claims list and a change log
  • A tag on every fact, and every claim marked approved, pending or banned
  • A two-sentence diagnosis of your biggest gap, and a list of what's missing and who can answer it
  • A short slice for your next step, if you name one
• Otl Aicher: Plan a visual system or wayfinding using Otl Aicher’s recorded approach. Set a clear purpose, shared design rules and checks with real users.
  • Your problem worked on the way Otl Aicher would: their questions, their method, their push-back
  • The answer or the work, in Otl Aicher's voice, using their ideas by name
  • Anything that goes beyond their public record, marked
  • One suggested next step
• Herb Lubalin: Develop a wordmark, headline or poster through Herb Lubalin’s recorded approach. Make the letters carry one idea and check how well they read.
  • Your problem worked on the way Herb Lubalin would: their questions, their method, their push-back
  • The answer or the work, in Herb Lubalin's voice, using their ideas by name
  • Anything that goes beyond their public record, marked
  • One suggested next step

Tasks you can use it for

• You are starting a product and have no shared colours, type or button styles yet.
• Your screens look uneven, with different spacing and buttons on each page.
• A developer asks for exact sizes, colours and states before building.
• You want dark mode, or a second brand theme, without redoing every screen.

Limits to check before starting

• You want a logo or brand identity. Use the Logo and brand kit designer.
• You already have a built screen and want a go or no-go before release. Use the Interface finishing reviewer.
• You want the page structure and CSS base for one new site. Use the Web page structure designer.

Best way to use this role

Give it one clear outcome, the actual files and a definition of done. Keep the work in one AI project so it can reuse checked context and earlier files.

• Add the pack to your AI as a skill. If you cannot, start a new chat and paste SKILL.md, then references/source-agent.md.
• Describe your product, users and platforms. Add brand colours, fonts or screenshots if you have them.
• Say which parts you need first, such as buttons, forms and a table. Ask for the rest in later rounds.
• Open the colour section and read the contrast pairs. Test your final shades with the Colour contrast checker, because chat math on colours can slip.
• Give the tokens and the parts list to your developer.
• Ask for what you skipped, such as dark mode or tables, one piece at a time.

Read it as data

Read the complete role setup as JSON. Connect your AI to the AI Blocks MCP library and read aiblocks://roles/design-ui-designer for its role instructions and pinned sources.

This is a prepared AI role. No task has run. Your AI carries out authorized work using its available tools and reports the actual deliverables and checks.