Hire an AI website layout designer and tester

Everything it can hand back

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

• 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

How it does the job well

• Read the existing code, its conventions and its tests before changing anything. Match the project's patterns.
• Make the smallest change that fully solves the request. Keep unrelated refactors out.
• Reproduce a bug before fixing it, and add a test that fails without the fix.
• Treat input from users, files and networks as untrusted. Validate it at the boundary.

Mistakes it avoids

• Claiming code works without running it or its tests.
• Inventing APIs, package versions or settings instead of checking the installed ones.
• Changing behaviour outside the request, such as reformatting whole files or renaming public interfaces.

What a good result looks like

An example, not your task: You are starting a new page or site and want it to look chosen, not templated.

• Step 1: Web font pairing picker. A typeface and a second one that contrasts with it, plus sizes, line spacing and a scale for each screen.
• Step 2: Page grid and type planner. Margins, columns and gutters, the order of big and small type, planned white space and a layout for each page.
• Your step: add to the brief. You copy the type list, grid and layout into your page brief, with your words and images.
• Step 3: Website art director. A built page that follows your type and grid, checked at phone and desktop width.
• Step 4: Web app tester. A browser test report of what passed and failed, with screenshots and console errors.
• HAND-BACK SUMMARY. Each step's file, any step not run and why, and every MISSING line in one list.

How the work is checked

• Each step passed its own checks, or the run stopped at the step that failed and says why.
• The steps ran in order, and each one used the result of the one before.
• Nothing was invented to fill a gap. Every gap is a MISSING: line.
• Nothing was sent, published or paid for without a clear yes.
• 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 Wim Crouwel would. This is a way of reviewing the work. It does not mean they wrote or endorse it.

Capabilities

• Pick the fonts. Asks what the site says and who reads it, chooses a typeface for the tone, pairs a second one by contrast and sets sizes, line spacing and a scale for each screen.
• Set the grid and layout. Keeps the fonts from step 1, sets margins, columns and gutters for your content, orders things with big type against small and plans the white space.
• Add the type and grid to your brief. This one is yours. Copy the type list, the grid and the page layout into your brief, with your words and images.
• Build the page. Writes the page's main point in one line, picks a direction and one strong idea, builds the page and checks it in a real browser at phone and desktop width.
• Click through it. Starts the page on a local server, opens it in a real browser, clicks through links, forms and menus and reports what failed.

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 build-and-test-a-page-on-a-clear-type-and-grid 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/build-and-test-a-page-on-a-clear-type-and-grid/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

• A plain description of the site, covering what it says, who reads it and what they should do
• The words and images you have (optional)
• Any brand fonts or colours you must keep (optional)

Tools and access

• Any good chat AI: Setting a grid and type list from rules is text and number work any strong chat AI does.
• A design tool with layout grids: Figma, InDesign and similar tools let you set the grid and test the pages.

Functions and deliverables

• 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
• Web font pairing picker: Describe your site. Get font pairs, sizes and line spacing that read well on every screen.
  • A heading and body font pair
  • Size scale and line spacing
  • Responsive type rules
  • A score on ten typography checks
  Source: Wondel.ai.
• 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
• Website designer: Build a website or app screen with a real design idea, not a template. Your AI picks a look, builds the page and checks it in a browser.
  • A chosen design direction
  • A built page or screen
  • Screenshots at three widths
  • A fix list after review
  Source: Leonxlnx.
• Web app tester: Share your local app. Get its screens tried in a real browser, with screenshots and error logs.
  • A browser test script you can run again.
  • Screenshots of the steps in your flow.
  • Browser console and error logs.
  • A list of what failed. Attach the screenshots and logs to a bug ticket, or run the test again after a fix.
  Source: Anthropic.
• AI project context organiser: Share your project and next task. Get a short rules file, a focused file list and a clear handoff for later sessions.
  • A ready rules file for your project
  • A list of which files to load for each task
  • Rules for when to reset or trim the session
  • A checklist for spotting drifting answers
  Source: Addy Osmani.
• 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
• Wim Crouwel: Plan a shared layout system using Wim Crouwel’s recorded approach. Set the grid, choose type rules and check how each piece serves its reader.
  • Your problem worked on the way Wim Crouwel would: their questions, their method, their push-back
  • The answer or the work, in Wim Crouwel'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 new page or site and want it to look chosen, not templated.
• Your last AI-built page had random spacing or mismatched type.
• You want the page clicked through before you show it to anyone.

Limits to check before starting

• You only want copy edits on a live site: edit the text yourself or ask your AI to rewrite it, since no new design is needed.
• You only want a layout review of an existing page: use the Page typography and layout planner on its own.
• You want to fix test failures you already have: use the Failed test repairer.

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's a zip with HANDOFF.md and every skill file this workflow uses.
• Give the folder to Claude (in Claude Code, or as files in a Claude Project) and say "Follow HANDOFF.md".
• Have your real words and images ready. The grid is only as good as the content it holds.
• Your step is to copy the type list, grid and layout into the page brief before the build.
• For the test, install Python and Playwright, a free browser-testing tool, and have the way to start your page ready.
• If the built page breaks at phone or desktop width, fix that before the browser test runs.

Read it as data

Read the complete role setup as JSON. Connect your AI to the AI Blocks MCP library and read aiblocks://roles/build-and-test-a-page-on-a-clear-type-and-grid 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.