Hire an AI web page structure designer

Everything it can hand back

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

• 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

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

• Copying the source's shell steps or file paths.
• Contrast claims you did not work out.
• Final visual design. That belongs to the UI Designer agent.
• 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 about to build a site or landing page and need the structure before the visuals.

• Page structure. Navigation, section order, heading levels and where each call to action goes.
• CSS variables. Colour, type, space and width values, in light and dark, with clear names.
• Layout rules. How the grid and containers change on phone, tablet and desktop.
• Theme toggle. A light, dark and system switch, with HTML, CSS and JavaScript.
• File layout and build order. Which files to create, and what to build first.
• Accessibility notes. Keyboard order, focus rules and contrast plans.

How the work is checked

• The variable names in the CSS match the names used by the toggle and the components.
• Every section on the page has a reason to be there.
• Sample values are labelled as proposed.
• Nothing is called tested. Tell the user to open the page on a phone and a desktop.
• 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 Josef Müller-Brockmann 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 goal, visitors, pages, brand and build tools. Missing facts are asked once, then marked MISSING.
• Plan the structure. It sets navigation, section order, heading levels and where calls to action go.
• Build the CSS system. It writes variables for colour, type, space and widths, plus containers and grids, phone first.
• Add the theme toggle. It writes a light, dark and system switch that remembers the choice and still works when storage is blocked.
• Write the handoff. It lists the file layout, the build order and notes on keyboard use, focus and contrast.

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-ux-architect 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-ux-architect/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 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)

Helpful context (optional)

• Your real headings and page copy.
• A site you like, as a link, to show the layout feel.
• Your brand colours as hex codes.

Tools and access

• Claude, ChatGPT or Gemini in a chat: Good for the structure and the CSS plan. You test the code yourself.
• Claude Code: Can create the files in your project, so you can open the page and check it yourself.

Functions and deliverables

• Web page structure designer: 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.
  • 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
  Source: Michael Sitarzewski and Agency Agents contributors.
• Page typography and layout planner: Share your content and page size. Get a grid, a short type list and a plan for space across the pages.
  • A grid: margins, columns and modules
  • A short type list with one or two typefaces and one or two sizes
  • A white-space plan
  • A layout for every page in the series, with unneeded changes marked
• 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.
• Industry site layout planner: Turn your site type and brand brief into page layout notes, navigation guidance, and checklists.
  • Page layouts for your industry
  • Module placement and density guidance
  • Navigation and merchandising rules
  • A list of what visitors expect to see
  Source: RampStack.
• 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
• Josef Müller-Brockmann: Bring order to a page, poster or report through Josef Müller-Brockmann’s recorded approach. Use a clear grid, readable type and honest information.
  • Your problem worked on the way Josef Müller-Brockmann would: their questions, their method, their push-back
  • The answer or the work, in Josef Müller-Brockmann'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 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.

Limits to check before starting

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

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

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-ux-architect 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.