{ "schema": "aiblocks-page/1", "id": "agency-design-ui-designer", "type": "agent", "name": "UI designer agent", "summary": "Get a UI design system for your product, with colours, type, spacing, buttons and forms in every state, dark mode and accessibility checks.", "headline": "UI designer agent", "subhead": "Tell it about your product, your users and your brand. The agent writes a UI design system. You get rules for colour, type and spacing, the parts you need with every state, and notes for your developer. Contrast checks to WCAG AA are built in.", "job": { "id": "design-work", "name": "Design things people love" }, "level": "intermediate", "thinking": "high", "tested": true, "updated": "2026-11-03", "first_published": "2026-10-26", "inputs": [ { "type": "question", "required": true, "label": "Question", "what": "the problem, decision or piece of work you want help with, and what a good outcome looks like" }, { "type": "source_text", "required": false, "label": "Source text", "what": "a long source in full: an article, a video or talk transcript, or notes from a book, with its title, author and link" }, { "type": "plan", "required": false, "label": "Plan", "what": "a dated plan: what to do, in what order, with a decision rule for each step" }, { "type": "brand_brain", "required": false, "label": "Brand brain", "what": "the brand's facts, voice, products, offers (with effective dates), claims register, personas and look" } ], "outputs": [ { "type": "design_direction", "required": true, "label": "Design direction", "what": "a page's visual direction: type, colour, layout rules and what to avoid" }, { "type": "document", "required": true, "label": "Document", "what": "a finished document, such as a Word file, a PDF or a page of notes" }, { "type": "design_tokens", "required": true, "label": "Design tokens", "what": "a design system's tokens: colours, type sizes, spacing and breakpoints, as CSS or JSON that code can use" } ], "you_give": [ "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)" ], "you_get": [ "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" ], "use_when": [ "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." ], "skip_when": [ "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." ], "output_sample": { "input": [ "What your product is and who uses it", "Your brand colours and fonts (optional)", "The platforms and screen sizes to support", "Rules you must meet, such as your accessibility target (optional)" ], "prerequisites": [ "An AI that reads pasted text, such as Claude, ChatGPT or Gemini", "A developer to build it, and a contrast checker for your final colours" ], "output": [ { "name": "Design tokens", "contains": "Named values for colour, type, spacing, shadow and motion, in light and dark if asked." }, { "name": "Component library", "contains": "Buttons, form fields, cards, menus and feedback, each with variants and a use-when rule." }, { "name": "Component states", "contains": "Hover, focus, disabled, loading, error and empty states for each part." }, { "name": "Responsive rules", "contains": "How the layout and each part change from phone to desktop." }, { "name": "Accessibility checklist", "contains": "Contrast pairs, keyboard use, focus rules, touch size and reduced motion." }, { "name": "Handoff notes", "contains": "Token names and build notes a developer can follow." }, { "name": "Open checks", "contains": "What was not tested and how to test it." } ] }, "output_shape": "UI DESIGN SYSTEM \n\nFOUNDATIONS\n Colour with names and values | Pairs checked \n Type \n Spacing | Shadow and motion \n\nCOMPONENTS\n | variants | states | use when \n\nRESPONSIVE\n | \n\nACCESSIBILITY\n Contrast | Keyboard | Focus | Touch size | Motion \n\nDEVELOPER HANDOFF\n | \n\nOPEN CHECKS\n ", "how_to_use": [ "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." ], "checks": [ "The result addresses your actual task and cites the evidence used.", "Examples, role-play experience and targets are kept separate from verified results.", "Claims of tests, memory, tool access or completed actions match what actually happened." ], "next": [ { "name": "Colour contrast checker", "url": "https://useaiblocks.com/skills/colour-contrast-checker", "why": "Design it" }, { "name": "Logo strength tester", "url": "https://useaiblocks.com/skills/logo-strength-tester", "why": "Design it" }, { "name": "Design handoff specification writer", "url": "https://useaiblocks.com/skills/developer-handoff-spec-writer", "why": "Design it" } ], "source": { "by": "Michael Sitarzewski and Agency Agents contributors", "repo": "msitarzewski/agency-agents", "url": "https://github.com/msitarzewski/agency-agents/blob/b37b5bb33b78f2c1d6567d98e25ca818e3259219/design/design-ui-designer.md", "licence": "MIT", "original_name": "UI Designer", "commit": "b37b5bb33b78f2c1d6567d98e25ca818e3259219" }, "credits": [ { "title": "UI Designer", "by": "Michael Sitarzewski and Agency Agents contributors", "url": "https://github.com/msitarzewski/agency-agents/blob/b37b5bb33b78f2c1d6567d98e25ca818e3259219/design/design-ui-designer.md", "used": "Original agent profile, preserved in references/source-agent.md; AI Blocks adds setup and review instructions." }, { "title": "AI Blocks catalogue guidance", "by": "AI Blocks", "url": "https://useaiblocks.com", "used": "We added Before you start and After this sections that link to other AI Blocks steps. We refreshed those generated sections from the catalogue inputs and next-step links." } ], "files": [ "LICENSE", "references/source-agent.md", "SETUP.md", "source.json" ], "links": { "page": "https://useaiblocks.com/agents/agency-design-ui-designer", "markdown": "https://useaiblocks.com/agents/agency-design-ui-designer.md", "json": "https://useaiblocks.com/agents/agency-design-ui-designer.json", "instructions": "https://useaiblocks.com/skills/agency-design-ui-designer/SKILL.md", "download": "https://useaiblocks.com/skills/agency-design-ui-designer.zip", "api_item": "https://useaiblocks.com/api/v1/items/agency-design-ui-designer", "api_document": "https://useaiblocks.com/api/v1/documents/agent/agency-design-ui-designer", "mcp": "https://useaiblocks.com/mcp" } }