design-architect: design systems & mockups

Pages & funnels Desktop

What it does

design-architect is your visual design partner for landing pages. Give it a client brand and a page type, and it produces a complete Design Brief covering typography, color palette, layout architecture, and section sequence. Then, once the page is built, it runs a structured visual QA protocol to catch problems before anything ships.

It’s built on one core belief: design is conversion infrastructure. Premium layout signals trust. Trust lets the copy do its job. A page that looks like a free template undermines every word on it, no matter how good the writing is.

When to reach for it

• You’re starting a landing page and want a design direction before a single line of HTML is written.
• You want visual concepts and HTML mockups to review before committing to a full build.
• You want a design QA pass after a page is built, before showing it to a client.
• You want to audit an existing page for layout, typography, or component problems.

Where it runs

design-architect builds real HTML mockup files and opens them in a browser for visual QA. That means it needs the Claude Code desktop app.

Not set up yet? See the setup guide.

How to run it

Describe the page you want designed:

“Run design-architect for a sales page for examplebrand.com”

Or call it directly with a specific task:

“/um-toolkit:design-architect Design Brief for a listicle, the brand guide is already set up”

You can also ask for just one phase:

• Phase 1 only: “I just need the Design Brief and mockups, not the full page build.”
• Phase 2 only: “Design QA pass on the page I just built.”

Note: if you’re running a full page build through page-architect, design-architect runs automatically at the start (Design Brief) and end (QA). You don’t need to call it separately in that case.

What it needs from you

• A brand URL or a populated brand guide. If the brand guide is empty, it stops and asks rather than guessing at colors and fonts.
• A page type: advertorial, sales page, listicle, or quiz funnel. Each has its own layout rules and component choices.
• (Optional) Any design direction you already have in mind: a reference site you like, a mood, a specific component you want included.

What you get back

Phase 1: Design Brief

A structured brief that pins down every design decision before HTML is written:

1. Typography: headline and body font pairing, with the reasoning for that combination on this page type.
2. Color palette: specific hex codes for background, text, CTA, accent, and dark sections, pulled from the brand guide.
3. Layout architecture: hero pattern, content width, section spacing.
4. Section sequence: the full narrative arc mapped out section by section, each with a layout pattern and background. No two consecutive sections use the same pattern.
5. Components list: which specific sections and patterns to build (hero, stats bar, testimonials, FAQ, sticky CTA, etc.).
6. Visual polish decisions: shadow system, texture, card style, hover effects, scroll animations.
7. Anti-patterns to avoid: the 3 to 5 most common mistakes for this specific page type.

Phase 2: Design QA

A 6-step visual inspection of the built page: network errors, console errors, desktop screenshot, mobile screenshot, section-by-section scroll-through, and a final checklist pass. Problems are flagged with specific fixes, not just descriptions.

A worked example

You: “Design Brief for a listicle for examplebrand.com, cold-plunge category.”

design-architect: (after loading brand guide and page-type rules)

Typography: Sentinel for headlines (editorial authority, signals independent review), Inter for body (clean, readable at 680px width). Rationale: listicle readers are in evaluation mode; the serif headline signals a real publication, not a brand ad.

Color palette: Background #FAFAF8, body text #1A1A1A, CTA #0B5FFF, accent #E8F0FE, dark sections #12171F.

Section sequence: Hero (editorial narrow, light) → Trust bar (logo cloud, light) → Top pick spotlight (split two-column, light) → Pain section (centered stack, dark) → Full comparison table (light) → Testimonials (alternating cards, light) → Final CTA (dark). No two consecutive sections share a layout pattern. One dark section for contrast.

Anti-patterns flagged: Avoid dual hero CTAs, avoid decorative publication eyebrows (“Issue 04”), avoid icon-only feature cards with no real imagery.

That brief becomes the blueprint every section gets built against.

Tips & gotchas

• It runs automatically inside page-architect. If you’re doing a full page build, you’ll see the Design Brief as the first output. You don’t need to invoke design-architect separately.
• Phase 1 and Phase 2 are separate jobs. Calling it at the end for QA when it wasn’t used at the start is fine. The QA protocol works on any page, even one built without its brief.
• Brand guide quality determines output quality. A fully populated brand guide (real hex codes, real fonts, real logo) produces a specific, usable brief. A missing brand guide produces a stop and a question. It will never guess at brand colors.
• The QA pass catches what code reviews miss. A page can have zero console errors and still have invisible logos, clipped badges, or 5-line hero headlines. The visual QA protocol screenshots each section individually at desktop and mobile and checks those by eye.
• Mockups are real HTML files you can open in Chrome. Not wireframes, not descriptions. Actual rendered pages you can scroll through and hand to a developer.

Related skills

design-architect is the design phase of page-architect (the full page-build workflow). It works closely with hermes (copy), which handles persuasion through words while design-architect handles persuasion through layout and visual hierarchy. If you need research before either, run apollo first.