Brand Launchpad

Turn a rough name or short brief into a high-conviction brand system and a browser-ready visual board.

This is a model-native skill. The model is responsible for the thinking, the writing, and the final artifact quality. Do not depend on Python, render scripts, build steps, or hidden tooling. Use judgment. Make clear choices. Ship finished outputs.

Core promise

When this skill is used well, the user should receive:

• a sharp strategic read on the brand
• three materially different directions
• one recommended direction with a practical reason for winning
• a polished output/brand-board.html worth opening in a browser
• a usable output/brand-system.md that can guide future design work
• optional output/brand-tokens.css when implementation handoff adds value

Use this skill when

• the user wants branding, visual identity, or art direction
• the user wants a visual deliverable, not only text in chat
• the user has only a name or short phrase and wants strong creative direction
• the user needs a concept board for a website, app, brand, label, studio, product, or portfolio
• the user wants tone, color, typography, landing-page direction, or interface mood

Do not use this skill for

• trademark, naming clearance, or legal validation
• final logo vector production
• production UI engineering or component implementation
• external market facts unless the user supplied them or they were verified elsewhere
• fabricated claims, fake press, fake user metrics, or fake social proof presented as real

Output files

Unless the user explicitly asks for text only, create:

• output/brand-system.md
• output/brand-board.html

Create output/brand-tokens.css when the recommended direction would benefit from implementation handoff.

Operating sequence

Follow this exact sequence.

1) Read the brief accurately

Capture or infer:

• name
• category
• audience
• primary offer
• emotional ambition
• likely primary surface: website, app, social, entertainment label, editorial presence, or product landing page
• any explicit style requests or constraints

If the user gives only a name, infer carefully and state assumptions inside output/brand-system.md.

2) Build the strategic spine

Define only what is needed:

• project snapshot
• brand essence
• positioning sentence
• emotional goal
• category angle

Keep this pointed. No consultant filler.

3) Create three truly different directions

Each direction must differ across:

• strategic angle
• color logic
• typography character
• tone of voice
• interface mood
• visual expression
• best-fit use case

Changing only colors is not enough.

4) Recommend one clear winner

Choose one direction unless the user explicitly asked not to.

Explain why it wins in practical terms:

• what tension in the brand name or brief it resolves
• where it will work best
• what it avoids that the other directions get wrong

5) Write output/brand-system.md

Use reference/output-template.md.

The markdown file is the source of truth. It should be crisp, structured, and easy to scan.

6) Write output/brand-board.html

Use reference/visual-output.md, reference/html-board-checklist.md, and templates/brand-board-template.html as guidance.

The HTML file must:

• be fully standalone
• include its own <style> block
• open locally without extra setup
• feel like a mini brand presentation, not styled notes
• be screenshot-ready
• show hierarchy, rhythm, and genuine composition

7) Write output/brand-tokens.css when useful

Include only role-based tokens that support the chosen direction:

• color roles
• typography roles
• radius / spacing / shadow / motion tokens when clearly helpful

Do not bloat this file.

8) Return a short chat summary

State exactly which files were created.

Non-negotiable quality rules

Strategic quality

• Every direction must feel intentional.
• Every recommendation must be defensible.
• Every section must earn its place.
• Avoid generic phrases such as:
  • next-generation platform
  • seamless experience
  • vibrant community
  • world-class
  • revolutionizing the space
  • built for the future

Copy quality

• Prefer concise, present-tense language.
• Hero lines should sound like real brand copy.
• Match tone to category.
• Premium brands should not sound gimmicky.
• Youth-facing brands should not sound bureaucratic.

Visual quality

• The board must have whitespace, rhythm, and hierarchy.
• The recommended direction must be obvious at a glance.
• Typography should be demonstrated, not just described.
• Colors must appear as real swatches with roles.
• Mock sections should look curated, not accidental.
• The composition must feel designed.

Trust and placeholder rules

Never fabricate credibility as fact.

If you include any of the following without user-provided details:

• people names
• testimonials
• press mentions
• logos
• stats
• milestones
• client names
• rosters

then label them clearly as one of these:

• Sample content
• Concept content
• Placeholder content

Do not imply that invented entities are real endorsements.

Direction requirements

For each direction, include:

• direction name
• positioning line
• 3 to 5 vibe keywords
• palette roles
• typography pairing
• voice character
• sentence style
• phrases to avoid
• CTA style
• hero headline
• hero subheadline
• UI behavior
• visual identity cues
• best-fit use case

Direction names should sound like actual creative concepts.

Weak:

• Modern
• Minimal
• Bold
• Elegant

Stronger:

• Sacred Dominion
• Quiet Voltage
• Studio Monument
• Future Ledger
• Velvet Utility

HTML board requirements

The board should usually include:

1. cover / snapshot
2. recommended direction spotlight
3. three-direction comparison
4. palette section
5. typography specimen section
6. brand expression rules
7. website / app / presence direction
8. visual concept frames
9. optional implementation tokens

Required visual concept frames

Include at least three of these in the board:

• wordmark or logo direction frame
• hero composition frame
• poster / campaign key art frame
• social tile system
• mobile UI preview
• desktop landing-page preview
• component system row
• packaging / merch / event pass style frame when relevant

These are concept panels built with HTML and CSS. They are not fake final deliverables.

Brevity rules

Do not turn the board into an essay.

• Keep paragraphs short.
• Prefer labels, captions, and compact rationale blocks.
• Use fewer words when layout can communicate the point.

Category guidance

For SaaS or digital products

Favor:

• clarity
• useful interface cues
• scalable token logic
• product-market tone discipline

For entertainment, media, or creator brands

Favor:

• mood
• cultural point of view
• campaign energy
• poster-like visual moments
• stronger wordmark and hero composition panels

For premium fashion, beauty, hospitality, or luxury

Favor:

• restraint
• elegant contrast
• editorial pacing
• fewer gimmicks
• more refined typography and negative space

Failure modes to avoid

Do not produce:

• three directions that feel interchangeable
• generic AI brand adjectives stacked together
• fake realism in endorsements or proof
• overly long markdown walls
• HTML that feels like documentation instead of presentation
• unfinished mock frames

Final standard

A strong output should feel like a talented creative strategist and brand designer spent focused time on it.

It should be usable, presentable, and strong enough that the user wants to show it to someone else.