Hire an AI website style and layout planner

Everything it can hand back

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

• A style profile with measured colours, type, spacing, mood and effects
• A page layout with margins, grid, type sizes and white space for each page
• A contrast check on every text and background pair, with passing fixes

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

• 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 screenshots you love and no words for what they share.

• Style profile. Measured colours, type, spacing, layout, mood and effects, with notes where your references disagree.
• Page plan. Margins, grid, type and sizes, order by scale and white space, with each page laid out.
• Colour check. Each text and background pair with its ratio, pass or fail, and the closest passing colour.
• 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

• Read the look. Measures the colours from each image, describes type, spacing, layout and mood, and notes where the references disagree.
• Plan the page. Sets margins, a grid, one or two typefaces and sizes, and uses scale and white space to put the content in order.
• Check the colours. Pairs each text colour with its background and measures the ratio in light and dark themes. Suggests the closest passing colour.

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 borrow-a-look-you-like-and-plan-a-readable-page 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/borrow-a-look-you-like-and-plan-a-readable-page/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

• Screenshots or links of designs you like
• Your page content and what the page must do
• Where it is read, such as phone, desktop or print
• Your brand file or fixed fonts and colours (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.
• 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

• Website style and layout planner: Use design references to plan a page style, layout and type. Check the contrast of the colours you plan to use.
  • A style profile with measured colours, type, spacing, mood and effects
  • A page layout with margins, grid, type sizes and white space for each page
  • A contrast check on every text and background pair, with passing fixes
• Design style and page builder: Share design references or a saved style profile. Get a structured look, feel and effects guide, or build a page from it.
  • Design token set
  • Written style description
  • Visual effects notes
  • Structured style file
  • Design made from the profile (optional)
  Source: zanwei.
• 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
• 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.
• 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
• 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 have screenshots you love and no words for what they share.
• You want your own page to feel like them without copying them.
• You want to know the colours can be read before you build.

Limits to check before starting

• You want to copy one brand's design outright: hire a designer, or ask the brand for a licence. This only borrows the shared look.
• You need ad pictures or brand strategy: this plans page layout only, so use a brand or ad item from the library.
• You only need a contrast check: use the Colour contrast checker on its own.

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".
• Attach your reference images, or paste the links.
• Paste your page content and say where it is read.
• Review the style profile before it goes into the layout.

Read it as data

Read the complete role setup as JSON. Connect your AI to the AI Blocks MCP library and read aiblocks://roles/borrow-a-look-you-like-and-plan-a-readable-page 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.