Hub Designer Skill

A multi-pass system for building Hub web pages. You must complete each phase fully before advancing. Skipping phases produces inferior work.

Phase 0: Intake

Do this first, every time.

1. Read the user’s brief thoroughly
2. Identify: What is the page for? Who is the audience? What action should they take?
3. Note any provided content, assets, or constraints
4. Read modules/01-brief-and-inputs.md if requirements are unclear

Output: Confirm your understanding of the brief back to the user in 2-3 sentences. Ask clarifying questions if needed. Do not proceed until the brief is clear.

Phase 1: Skeleton

Create the page structure using comment blocks only. No functional HTML yet.

Steps:

1. Read modules/02-structure-decisions.md to inform hero choice, section rhythm, and background strategy
2. Decide on the section sequence (typically 5-8 sections)
3. Create the file with front matter and comment-only skeleton blocks

Skeleton Block Format:

Each section must be a comment block with these five fields:

<!-- SECTION: [Name] -->
<!--
  GOAL: What this section must achieve for the narrative
  DIRECTIVE: Component type and approach (e.g., "Animated hero with programmatic background - mesh gradient + particles")
  CONTENT: Key copy points or source material to draw from
  ASSETS: Visual requirements (e.g., "needs event photography" or "programmatic background - no image needed")
  RESPONSIVE: Notes on mobile behavior or risk areas (e.g., "pill buttons wrap", "code blocks overflow", "stack on small screens")
-->
<section id="[name]-placeholder"></section>

Skeleton Quality Checks:

Before proceeding, verify:

• Every section has all five fields filled
• Section sequence creates narrative flow, not just information dump
• Visual density varies (not all text-heavy, not all image-heavy)
• At least one “surprise” moment identified
• Asset requirements are realistic given available resources
• Responsive risks called out in RESPONSIVE notes for any complex layouts

Output: The complete skeleton. Proceed to Phase 2 unless the user has explicity asked you to stop after Phase 1 (ie where they may want to request changes to structure, emphasis, or section order).

Phase 2: Section-by-Section Build

Build one section at a time. Do not batch multiple sections.

For each section:

1. Re-read that section’s skeleton block
2. Consult the relevant module:
   • Hero sections → modules/02-structure-decisions.md
   • Component patterns → modules/03-components-and-sections.md
   • Colours/typography → modules/04-brand-system.md
   • Image sourcing → modules/05-image-use.md
   • Writing copy → modules/06-tone-of-voice.md
   • Programmatic backgrounds → snippets/references/programmatic-backgrounds.md
3. Source or create required assets
4. Write the HTML/Tailwind code for that section only
5. Replace the placeholder, preserving the comment block above it for reference

Section Quality Checks:

Before moving to the next section:

• Meets the GOAL stated in the skeleton
• Contrast rules followed (check modules/04-brand-system.md § Contrast Rules)
• No emoji used as icons
• Any responsive risks called out in RESPONSIVE notes for any complex layouts are addressed
• Content is consistent with tone of voice
• Appropriate visual weight relative to adjacent sections
• Any image requirements are met

Output: The complete section. Proceed to Phase 3 unless the user has explicity asked you to stop after Phase 2 (ie where they may want to request changes to the section’s content, design, or functionality).

Phase 3: Page-by-Page Build

Build one page at a time. Do not batch multiple pages.

1. Review the complete page for:
   • Consistent spacing and rhythm
   • Background colour sequence (no jarring transitions)
   • Typography hierarchy across sections
   • Animation budget (one hero moment, limited secondary motion)
   • Mobile responsiveness patterns

2. Run the checklist from modules/04-brand-system.md § Brand Application Checklist

3. QA pass (must-do):
   • Mobile width sweep: no horizontal scroll, containers fit 100%
   • Cards/grids stack cleanly on small screens
   • Pills/tags/buttons wrap without awkward breaks
   • Code blocks wrap or scroll without breaking layout
   • Tap targets are comfortably sized
4. Make refinements

Output: Present the finished page to the user.

Module Index

Consult these during Phase 1 and Phase 2 as needed:

Snippets & References

• snippets/templates/ — Starting-point HTML for common patterns
• snippets/references/helper-classes.md — Utility class quick reference
• snippets/references/logo-carousel.md — Partner logo implementation
• snippets/references/programmatic-backgrounds.md — Building blocks for animated/generative backgrounds when no photography is available

Critical Rules

1. Never skip the skeleton. Even for “simple” pages. The skeleton is where bad decisions get caught early.

2. Never batch-write all sections at once. Sequential building maintains quality and allows course correction.

3. Wait for user approval after Phase 1. Structure changes are cheap; code changes are expensive.

4. Invention over templates. The snippets and examples are starting points. Every page should have at least one element that feels custom to its content.

5. Photography first, programmatic second. Real images of real people and places create authenticity. Use programmatic backgrounds when photography isn’t available or doesn’t fit the content.