Hire an AI design specialist

Everything it can hand back

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

• A short rule sheet with the feeling, colours and their meanings, type, grid and where to play
• A contrast check for each text and background pair, with passing fixes
• Design tokens for colour, type, spacing and shadow, with component notes
• A developer spec with components, every state, breakpoints and accessibility notes

How it does the job well

• Start from the brief's goal and the real content. Wireframe the structure before visual style.
• Build a small token set (colour, type scale, spacing) and use only those values.
• Design all states and breakpoints, not just the ideal screen.
• Check every text and background pair for contrast as you choose colours.
• Write the handoff so a developer can build it without guessing.
• 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.

Mistakes it avoids

• Low-contrast grey text and tiny tap targets.
• Inconsistent spacing and too many type sizes.
• Visual changes that hide the main action.
• 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 have a brief and a feeling but no written design rules.

• Design rules. The feeling, what to avoid, colours with meanings, one type family, the grid and where the team may play.
• Colour check. Each text and background pair with its contrast ratio, pass or fail, and the closest passing colour.
• Design tokens. Colour, type, spacing and shadow values in the format your developer needs, plus component notes.
• Developer spec. Layout, components, every state, edge cases, breakpoints and accessibility notes.
• Hand-back summary. Files saved, any step that could not run and every MISSING line in one list.

How the work is checked

• Each colour pair has its contrast ratio and a pass or fix.
• Every component lists its states, sizes and behaviour.
• Open questions and decisions are listed for the developer.
• Each colour has a meaning tied to where it will be seen.
• 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 Massimo Vignelli and Otl Aicher would. This is a way of reviewing the work. It does not mean they wrote or endorse it.

Capabilities

• Write the rules. States the feeling and what to avoid. Picks the fewest colours with a meaning each, one type family and a grid. It hands a colour list with hex codes to the next step.
• Check the colours. Pairs each text colour with its background and measures the ratio in light and dark themes. It finds the closest passing colour for any failure and hands the passed list on.
• Build the tokens. Starts from the main colour and style in the rules and builds colour, type, spacing and shadow tokens. The colours that passed replace any that did not.
• Write the developer spec. Lists layout, tokens, components, every state, edge cases, breakpoints and accessibility notes, using the rule sheet and the token file.

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-specialist 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-specialist/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 brand or event is, who it is for and where it will appear (web, app, print or signs)
• The feeling it should give, in a few words
• Fonts or colours you must keep (optional)
• Whether you need a dark theme (optional)
• The token format your developer wants, such as CSS, SCSS or JSON (optional)
• Your brand guide (optional)

Helpful context (optional)

• Your brand guide, if you have one, so step one starts from your real look.
• Screens or mock-ups, if they exist, so the spec in step four can show real layouts.

Tools and access

• Design files or a rendered page
• A browser for layout and accessibility checks
• Claude or ChatGPT with code running: The colour check and the token builder are scripts. Without code running, the numbers are worked out by hand and need your check.
• 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.
• Claude, ChatGPT or Gemini: Pasted notes are enough. Long note sets work best in an AI with a large reading window.
• Claude, ChatGPT or Gemini with image upload: It needs to see the real screens, at desktop and phone width.
• Any good chat AI: Writing short firm rules from a description is text work any strong chat AI does.
• A design tool with shared styles: Figma or similar can lock the colours, type and grid into styles your team shares.
• Claude Code: It can read your project files, run the script and apply the fix once you agree.
• Any AI that can run Node: The script needs Node 18 or newer. A plain chat AI can do the hand-worked version.

Functions and deliverables

• Visual design handoff builder: Share your brand brief, platform and design needs. Get visual rules, checked color pairs, design tokens and an implementation handoff.
  • A short rule sheet with the feeling, colours and their meanings, type, grid and where to play
  • A contrast check for each text and background pair, with passing fixes
  • Design tokens for colour, type, spacing and shadow, with component notes
  • A developer spec with components, every state, breakpoints and accessibility notes
• Screenshot to interface builder: Turn a screenshot into a working screen. Give it your mockup and get matching UI built from your own parts, checked side by side.
  • Code for the screen using your own parts
  • A side-by-side check against the image
  • A list of differences fixed
  • Placeholders where assets are not yours to copy
  Source: sickn33.
• 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.
• UX researcher agent: Plan a user research study or turn your interview and test notes into findings, personas and ranked fixes for your website or app.
  • A study plan with questions, method, who to recruit, how many people and a timeline
  • A usability test script with tasks and what to watch for, if you ask for one
  • Findings that each cite the notes behind them
  • Personas and a path map built from your evidence, if you ask for them
  • Fixes ranked by impact and effort, with a way to check each one worked
  Source: Michael Sitarzewski and Agency Agents contributors.
• Interface finishing reviewer: Get a clear PASS or HOLD on a built screen before release, with the generic UI patterns found and the exact fixes to check.
  • A short design contract for each screen, with what is seen first, the main action and the forbidden defaults
  • A HOLD or PASS call for desktop and for phone, or NOT RATED if you did not show enough
  • Findings with the evidence and the reason each one breaks the contract
  • A required change for each finding, and the state or screen width to check it at
  • A list of choices that already work, so nobody rewrites them
  • PASS criteria for the next review
  Source: Michael Sitarzewski and Agency Agents contributors.
• Web accessibility checker: Check a web page or code for WCAG 2.2 accessibility problems. Get a ranked list with where each one is, and fixes if you ask.
  • A ranked list of WCAG 2.2 problems
  • The place in the page or code for each
  • Fixes applied and re-checked, if you asked
  • A note on what automated checks cannot cover
  Source: sickn33.
• Website layout designer and tester: Choose fonts and layout, build the page from that design and check the actual page in a browser.
  • Font pairs, sizes and line spacing for each screen
  • A grid, margins and a layout for each page, with white space planned
  • A built page that follows the type and grid, checked at phone and desktop width
  • A test report from a real browser with failures, screenshots and console errors
• 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
• 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.
• Design token and handoff builder: Share brand colours and style needs. Get shared style values, component notes and files that developers can check in the project.
  • A colour palette with contrast checks. Each colour has steps from 50 (lightest) to 900 (darkest)
  • A type scale and an 8-point spacing scale
  • Token files named design-tokens.css, _design-tokens.scss or design-tokens.json. The JSON has keys for colors, typography, spacing, sizing, borders, shadows, animation, breakpoints and z-index
  • Responsive breakpoint values
  • A developer handoff note
  Source: Alireza Rezvani.
• Design handoff specification writer: Share a finished design and its rules. Get developer notes for layout, style values, component states, screen sizes and edge cases.
  • A layout and measurement spec
  • A table of component states
  • Interaction and animation details
  • Edge case and content rules
  • An accessibility checklist
  Source: Anthropic.
• 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
• Massimo Vignelli: Plan a layout or visual system using Massimo Vignelli’s recorded approach. Start with meaning, set clear rules and check what readers understand.
  • Your problem worked on the way Massimo Vignelli would: their questions, their method, their push-back
  • The answer or the work, in Massimo Vignelli's voice, using their ideas by name
  • Anything that goes beyond their public record, marked
  • One suggested next step
• 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

Tasks you can use it for

• You have a brief and a feeling but no written design rules.
• A developer is waiting and keeps asking for exact colour, font and spacing values.
• You want to know the colours can be read before anything is built.
• You are setting up the look of a new site, app or event and need one source of truth.

Limits to check before starting

• You only want to test the colours you already have. Use the Colour contrast checker on its own.
• You already have a design system and want to move it to a new setup. Use the Design system change and migration planner workflow.
• You need one poster or one page laid out. Use the Event poster designer and reviewer workflow.
• You want a quick brief for one design job, not a rule sheet. Use the Design brief rules writer.

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.

• Download the handoff pack. It is a zip with HANDOFF.md and every skill file this workflow uses.
• Give the folder to Claude, ChatGPT or Gemini and say "Follow HANDOFF.md". Use an AI that can run code if you can. Without it, the colour ratios are worked out by hand and shown for you to check.
• Paste your brief and say the feeling in a few words. Name the fonts and colours that are fixed.
• Read the rule sheet first. Change it now, because the next three steps build on it.
• Check two or three of the colour pairs yourself with a free contrast tool, then pass the spec and token file to your developer.

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-specialist 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.