Skip to content
iSkllsSign up free

Code a brand home page draft

One coded 1440x900 screen that carries the whole brand, rendered and fixed until it could ship.

6 steps4 rulesStep 8 of 9 in Brand kit

Use this skill

Read https://isklls.com/s/code-a-brand-home-draft and follow it.

Paste it into Claude, ChatGPT, Codex, Gemini or any agent that can open a link, then add your task.

Save.md
code-a-brand-home-draft.md
Raw

Purpose::

Code the logo and a first above-the-fold home page that carries the whole brand.

Rules::

  • Use every brand piece: logo, favicon, fonts, palette, hero, OG image
  • Real copy: tagline as headline, narrative, CTA
  • One screen 1440x900; Google Fonts by name
  • Render, look, fix, until it could ship

Inventory::

  • Your brand files and config
  • A headless browser to screenshot HTML

Steps::

  1. 1Code logo.svg: the mark + the name in the headline font
  2. 2Code home.html: nav with the logo, headline, sub line, CTA, one visual from the hero
  3. 3Link favicon.svg as its icon
  4. 4Screenshot at 1440x900 and look at it
  5. 5Fix until it matches the hero's ambition
  6. 6Reply with the screenshot, logo.svg, fonts and palette in one line

Metrics::

  • Logo, OG image, favicon and page read as one brand
  • A designer would call it a strong first draft
Design.md

Purpose:: One image with 3 hero ideas for the home page, above the fold; the best one leads the whole brand.

Steps::

  1. 1. Read who the project is for and what it promises
  2. 2. Dream up 3 bold, unique directions
  3. 3. Make one tall image (9:16): the 3 heroes stacked, numbered 1-3
  4. 4. Look at it; redo any hero that looks like another

Draft three hero directions

One image with 3 bold, truly different above-the-fold ideas, then pick the one that leads the brand.

Design.md

Purpose:: The best Google Fonts pair for this brand: one headline font, one paragraph font.

Steps::

  1. 1. Read who it is for, what it promises and how it should sound
  2. 2. Find the Google font that carries that voice in a headline
  3. 3. Pair a calm paragraph font; test both on a real sentence of your copy
  4. 4. Reply: Headline: <font>, Paragraph: <font>, Why: <one line>

Pick a Google font pair

One headline and one paragraph font from Google Fonts that carry your brand's voice.

Design.md

Purpose:: 6 palette options for the brand, then the best one picked, like on coolors.co.

Steps::

  1. 1. Read the config and look at the picked hero
  2. 2. Make 6 palettes, one mood each
  3. 3. Check text on background contrast for each
  4. 4. Pick the one that fits the brand best

Build a color palette

Six palettes in six moods, five colors each, then the one that works on a real site.

Design.md

Purpose:: One image with a 12x12 grid of logomark ideas: the inventory for your logo and favicon.

Steps::

  1. 1. Read the name, narrative and palette
  2. 2. Look at the picked hero
  3. 3. Make the 12x12 grid
  4. 4. Reply with the image, then the 3 strongest marks by row and column, one line each

Generate a logomark grid

A 12x12 grid of 144 mark ideas to pick your logo and favicon from.