Vibe Coding for Everyone.

My name is [YOUR NAME] and [ONE SENTENCE — WHAT YOU DO OR WHAT DRIVES YOU].

A bit about me beyond work:
[E.G. I'm a runner and a bad guitarist / I love cooking for people and reading history / I spend weekends hiking and watching too much football].

You can find me or get in touch at:
[E.G. LinkedIn: linkedin.com/in/yourname / GitHub: github.com/yourname / X: @yourhandle / Contact page: yourwebsite.com/contact — include whichever apply].

If my personality were a space, it would feel like:
[E.G. a quiet library with worn leather and morning light / a studio with exposed concrete and loud ideas / a coastal kitchen where everything is simple but considered].

I want people to leave feeling:
[E.G. calm and curious / energised and slightly provoked / like they just met someone worth remembering].

It should NEVER feel like:
[E.G. a retro video game, a corporate brochure, a motivational poster, or a startup landing page from 2015].

My voice is like:
[E.G. a thoughtful friend who gets to the point / a professional who is direct but warm / someone who uses plain words to say complex things].

When I write my name or see it written, I prefer to use:
[E.G. my full name / first name only / initials / a nickname].

Include one of the following as a unique feature — or make up something else that fits:
— A "now" section: what I'm currently reading, building, listening to, or thinking about
— A curated shelf: 3–5 books, talks, or tools that changed how I think, with a one-line note on each
— Conversation starters: 2–3 questions or provocations I'd genuinely enjoy discussing with a stranger

The website should include at minimum:
— A hero section with my name and a one-line positioning statement
— An about section that goes deeper than a bio paragraph
— A section for the unique feature chosen above
— A way to get in touch that feels designed, not bolted on
— A footer with personality — not just a copyright line

Generate a logo or wordmark for my name using the preferred form above. It should feel like a natural part of the design — not clip art.

Generate at least one visually impactful image that fits the mood and style of the site. Use it as a hero image or visual accent — it should feel authored, not like a stock photo.

Include both a light mode and a dark mode with a visible toggle. Each mode should feel intentional — not just an inverted version of the other.

A brand designer looking at this should be able to identify distinct choices in colour, typography, spacing, and texture — not just one font on a white background.

Build me a personal website. Make every design decision feel deliberate — it should look like someone designed it with intention, not selected a template.

My name is Dylan Harbour and I build and lead technology at the intersection of people, craft, and genuine curiosity — currently as Director of Technology at Ringier South Africa.

A bit about me beyond work:
I travel by motorcycle to places with poor cell reception, shoot film cameras because digital is too easy, cook meals for the people I care about, and build things with my hands — carpentry, furniture, restoration work. Family is the actual centre of gravity for everything else.

You can find me or get in touch at:
LinkedIn: linkedin.com/in/dylanharbour / GitHub: github.com/dylanharbour / X: @dylanharbour / Contact: dylanharbour.com/contact

If my personality were a space, it would feel like:
A Mid Century Modern lounge — warm wood tones, emerald green textures, interesting details in the corners worth noticing. Considered and unhurried. The kind of room where good conversation happens and nobody checks their phone.

I want people to leave feeling:
Like they know enough to decide if we'd get along.

It should NEVER feel like:
A startup landing page, a corporate bio, a motivational poster, or anything that looks like it was generated in five minutes.

My voice is like:
Someone who would rather tell you a story around a campfire than hand you a slide deck. Direct and warm, plain words for complex ideas, never performs expertise — just uses it.

When I write my name or see it written, I prefer to use my initials: DGH.

Include a conversation starters section — questions or provocations I'd genuinely enjoy discussing with a stranger. Use these: What should everyday people know about what's happening in tech? The value of uncomfortable, dirty, off-grid holidays. Necessary kitchen tools everyone should own. Buy-it-for-life items.

The website should include at minimum:
— A hero section with my name and a one-line positioning statement
— An about section that goes deeper than a bio paragraph
— A section for the conversation starters
— A way to get in touch that feels designed, not bolted on
— A footer with personality — not just a copyright line

Generate a logo or wordmark using DGH. It should feel like a natural part of the design — not clip art.

Generate at least one visually impactful image that fits the mood and style of the site. Use it as a hero image or visual accent — it should feel authored, not like a stock photo.

Include both a light mode and a dark mode with a visible toggle. Each mode should feel intentional — not just an inverted version of the other.

A brand designer looking at this should be able to identify distinct choices in colour, typography, spacing, and texture — not just one font on a white background.

Build me a personal website. Make every design decision feel deliberate — it should look like someone designed it with intention, not selected a template.

The website you just built contains a set of implicit brand decisions — colour, type, tone, layout, mood. Your job now is to make every one of those decisions explicit, name them formally, and package them into a complete brand style guide.

Act as a senior brand strategist and visual designer. Analyse everything present in this website systematically. Extract it. Codify it. Where decisions were not made — fill the gaps with deliberate, well-reasoned assumptions derived from everything else that is present. Every assumption must be clearly labelled as such, with a one-line rationale.

Extend the website by adding the complete brand style guide as a new section directly within the page — styled consistently with the rest of the site, not bolted on as a separate document. Also add a visible download button within this section. When clicked, it exports the style guide as a single, self-contained HTML file. All CSS, JavaScript, and fonts must be inlined or embedded — no external dependencies of any kind. The file must open and render completely offline, in any browser, without a server. Include a print stylesheet so the document renders cleanly when printed or saved as PDF from the browser — correct page breaks, no content cut off mid-section, print-appropriate margins, and backgrounds preserved.

Structure the style guide exactly as follows:

01 / Brand Essence

A brand positioning statement of two to three sentences. Five brand personality traits as single words. The single central idea that connects all visual and tonal decisions. Write this as the opening page of a professional brand manual.

02 / Colour System

Document every colour present in the website. For each colour: a formal name, hex value, RGB value, a role label (e.g. Primary Background, Accent, Body Text), and a single usage rule. Group into Primary, Secondary, and Neutral. Add explicit pairing rules: which combinations are approved and which are prohibited, with reasons.

03 / Typography

Every typeface used, formally documented. For each: font name and source, weights in use, assigned role (Display, Heading, Body, Caption, Monospace), and usage rules. Define a complete type scale from Display to Caption with px sizes, line-height, and letter-spacing values. If system fonts were used, replace them with specific Google Font or system stack recommendations that match the brand character — and note the substitution.

04 / Voice and Tone

Six to eight concrete writing rules for this person's voice. Not adjectives — rules. Include: three before/after rewrites showing a weak version and a strong version in this voice. A vocabulary reference: ten words or phrases that feel on-brand, and ten that never appear. The single most important thing to remember about how this person communicates.

05 / Visual Identity

How the person's name functions as a wordmark: typeface, weight, case, tracking. Any signature marks, dividers, borders, textures, or decorative elements present in the website — named and defined. Rules for how each element is applied. Rules for what may never be altered or combined.

06 / Layout and Spacing

The spatial logic of the website: max content width, column structure, horizontal padding values at desktop and mobile. The base spacing unit and rhythm (4px or 8px grid). Key spacing values for sections, cards, and inline elements. Define these as named tokens (e.g. space-sm: 8px).

07 / Light and Dark Modes

If both modes are present: document each mode's colour token set separately, showing exactly which values change and which remain fixed. If only one mode is present: define the opposite mode as a logical extension of the existing palette, noting it as a recommended addition. Include a one-line rule for when each mode should be used.

08 / Imagery Direction

A photography and visual imagery brief derived from the brand mood. Cover: tone and atmosphere, subject matter, colour grading direction, lighting approach, and what must be avoided. Write this as a practical brief that could be handed directly to a photographer or used to evaluate AI-generated imagery.

09 / Do This / Never Do This

A minimum of six items per column. Each item must be specific and immediately actionable — not abstract principles. A designer should be able to apply every rule without interpretation.

10 / Agent Context Block

A structured summary block, clearly marked, formatted for machine readability. Any AI agent that reads this block should be able to understand the complete brand system without reading anything else in the document. Include: all colour tokens as name: hex pairs, all font decisions as role: font-name pairs, the five most important voice rules as plain statements, and the five most important visual rules as plain statements. No prose. No decoration. Just structured, parseable content.