Hub Designer Skill

This kit is organized for progressive discovery so you can grab only the guidance you need. Every workflow starts here and branches into detailed modules which give detailed guidance on how to build out the various elements of the page.

The Skeleton Protocol (MANDATORY)

Start by absorbing the brief and any provided content. Think from first principles about narrative structure—decide on the sections, headings, and visual cadence before writing code. Consider where imagery or motion brings clarity or emotion, then align everything with the Hub’s brand language.

You work iteratively on a given page. You NEVER write full code immediately. You do it methodically in multiple passes. When building a new page, follow this strict two-phase process to prevent context drift and ensure narrative leads design.

Phase 1: The Blockout

Create the file with front matter, but build the body using HTML Comment Blocks only. Do not write functional HTML yet. Each block acts as a plan and must include:

  1. DIRECTIVE: High-level component strategy (e.g., “Video Hero with clear CTA” or “gallery carousel”, “large pullquote”).
  2. CONTENT: Rough copy source or key points to cover.
  3. ASSETS: Make notes on what kinds of visual assets you think may be suitable for the given section - you will later be able to search the catalog with terms from these notes (e.g., “an image of people attending a workshop or event would be good fit here” or “logos of hub member ocmpanies could go in a carousel here”).
  4. GOAL: The narrative purpose (e.g., “Convince user to enquire about membership”).

Example Skeleton Block:

<!-- SECTION: Hero -->
<!-- 
  DIRECTIVE: Full screen image background, minimal text overlay.
  CONTENT: "Innovation lives here." + "Learn More" button.
  ASSETS: images of individuals or people attending a hub event or class.
  GOAL: Establish premium, location-based tech vibe immediately.
-->
<section id="hero-placeholder"></section>

Phase 2: Iterative Build

Once the Skeleton is defined, iterate through each block:

  1. Read the Directive: Understand the goal.
  2. Fetch Assets: Source relevant image assets as defined in the ASSETS field.
  3. Write Code: Replace the placeholder with actual semantic HTML and Tailwind classes, using the real assets you found.

Modules (Atomic References)

These modules give you detailed direction on how to accomplish the various tasks that go into creating a page.

  1. modules/01-brief-and-inputs.md — deliverable intake, required assets, environment setup.
  2. modules/02-structure-decisions.md — hero strategy, section cadence, backgrounds, interaction budgets.
  3. modules/03-components-and-sections.md — detailed sections, grids, cards, interactions.
  4. modules/04-brand-system.md — palette, typography, motif rules.
  5. modules/05-image-use.md — lean overview; choose your path (ask/curate vs. generate), then dive into focused sub-guides.
  6. modules/06-tone-of-voice.md — writing style, copy guidelines, and personality.

Modules never chain you forward; they simply explain their topic and link back here when you’re done. This keeps updates localized.

Snippets & References

  • snippets/templates/ — ready-to-paste HTML/Markdown for heroes, grids, CTAs (hero-video.html, section-alternating.html, etc.).
  • snippets/references/ — helper cheat sheets such as helper-classes.md, logo-carousel.md, and any future utility docs.

Working pattern: Always start with The Skeleton Protocol. Use Modules 01-02 to inform the Skeleton blocks. Use Module 03-05 during Phase 2 (Iterative Build) to execute the design. When writing content from scratch (not repurposing from a provided Hub document), use module 6 to ensure it perfectly matches the Hub’s tone of voice.