{ "schema": "aiblocks-page/1", "id": "agency-design-ux-architect", "type": "agent", "name": "Web page structure designer", "summary": "Get a page structure and CSS base for a new site, with section order, a layout grid, type and spacing scales and a light, dark and system theme toggle.", "headline": "Web page structure designer", "subhead": "Give it your site goal, your visitors and any brand colours. The agent plans the page order, the layout grid, the CSS variables and the file layout. You get a base a developer can build on, with a theme toggle included.", "job": { "id": "design-work", "name": "Design things people love" }, "level": "intermediate", "thinking": "high", "tested": true, "updated": "2026-10-28", "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": "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": "plan", "required": true, "label": "Plan", "what": "a dated plan: what to do, in what order, with a decision rule for each step" }, { "type": "page_layout_spec", "required": true, "label": "Page layout spec", "what": "a section-by-section layout for a page, with what each section holds" }, { "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 site is for and who visits it", "The pages or sections you need, even as a rough list", "Brand colours and fonts, or \"none yet\" (optional)", "The tools you build with, such as plain HTML and CSS, a framework or a site builder (optional)", "Your own page copy or task list (optional)" ], "you_get": [ "A page structure with navigation, section order, heading levels and call to action spots", "A set of CSS variables for colour, type, space and widths, in light and dark", "Layout rules for phone, tablet and desktop", "A light, dark and system theme toggle, with HTML, CSS and JavaScript", "A file layout and a build order for developers", "Accessibility notes on keyboard use, focus and contrast" ], "use_when": [ "You are about to build a site or landing page and need the structure before the visuals.", "A developer wants a CSS base with variables and a grid, not only a mockup.", "You are fixing a site where every page has its own spacing and widths.", "You need a plan for phone, tablet and desktop widths before you build.", "You want one reply that holds the page order, the CSS variables, the layout rules and the theme toggle code." ], "skip_when": [ "You want finished visual design, such as colours and how each part looks. Use the UI Designer agent.", "You want a text sketch of one page's layout. Use the Wireframe drafter.", "You want the steps a visitor takes through the site. Use the User flow designer." ], "output_sample": { "input": [ "What the site is for and who visits it", "The pages or sections you need", "Brand colours and fonts (optional)", "Your build tools (optional)" ], "prerequisites": [ "An AI that reads pasted text, such as Claude, ChatGPT or Gemini", "A developer or coding AI to build from the plan" ], "output": [ { "name": "Page structure", "contains": "Navigation, section order, heading levels and where each call to action goes." }, { "name": "CSS variables", "contains": "Colour, type, space and width values, in light and dark, with clear names." }, { "name": "Layout rules", "contains": "How the grid and containers change on phone, tablet and desktop." }, { "name": "Theme toggle", "contains": "A light, dark and system switch, with HTML, CSS and JavaScript." }, { "name": "File layout and build order", "contains": "Which files to create, and what to build first." }, { "name": "Accessibility notes", "contains": "Keyboard order, focus rules and contrast plans." }, { "name": "Open checks", "contains": "What was not tested and how to test it." } ] }, "output_shape": "UX FOUNDATION \n\nPAGE STRUCTURE\n Navigation | Sections in order | Headings | Call to action \n\nCSS SYSTEM\n Colour variables | Type scale | Spacing scale | Container widths\n\nLAYOUT\n Phone | Tablet | Desktop | Grid patterns \n\nTHEME TOGGLE\n \n\nFILES AND BUILD ORDER\n | \n\nACCESSIBILITY\n Keyboard | Contrast | Focus \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 the site goal and your visitors. List the pages or sections you want. These two come first; the rest can follow.", "Add brand colours and fonts if you have them. If not, say so. It marks any it picks as proposed.", "Check the page structure before the CSS. Is the order right for a visitor who knows nothing about you?", "Copy the CSS and toggle code into a test page and open it on a phone and on a desktop. A chat cannot test it for you.", "Give the plan to your developer, or to a coding AI, in the build order it lists." ], "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": "Design handoff specification writer", "url": "https://useaiblocks.com/skills/developer-handoff-spec-writer", "why": "Design it" }, { "name": "UI designer agent", "url": "https://useaiblocks.com/skills/agency-design-ui-designer", "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-ux-architect.md", "licence": "MIT", "original_name": "UX Architect", "commit": "b37b5bb33b78f2c1d6567d98e25ca818e3259219" }, "credits": [ { "title": "UX Architect", "by": "Michael Sitarzewski and Agency Agents contributors", "url": "https://github.com/msitarzewski/agency-agents/blob/b37b5bb33b78f2c1d6567d98e25ca818e3259219/design/design-ux-architect.md", "used": "Original agent profile, preserved in references/source-agent.md; AI Blocks adds setup and review instructions." } ], "files": [ "LICENSE", "references/source-agent.md", "SETUP.md", "source.json" ], "links": { "page": "https://useaiblocks.com/agents/agency-design-ux-architect", "markdown": "https://useaiblocks.com/agents/agency-design-ux-architect.md", "json": "https://useaiblocks.com/agents/agency-design-ux-architect.json", "instructions": "https://useaiblocks.com/skills/agency-design-ux-architect/SKILL.md", "download": "https://useaiblocks.com/skills/agency-design-ux-architect.zip", "api_item": "https://useaiblocks.com/api/v1/items/agency-design-ux-architect", "api_document": "https://useaiblocks.com/api/v1/documents/agent/agency-design-ux-architect", "mcp": "https://useaiblocks.com/mcp" } }