SuperAPI AI Directory
Partner with us中文AI newsFavorites
Skillsbrand-guide

brand-guide

Design & creation

View repository

Updated 10-15 20:29

About this skill

Brand Guide

From the site/logo/materials, measurable brand systemis extracted. The deliverable is not an appreciation piece but tokens that other agents can apply as-is: hex codes, font names/weights, spacing values, prohibited rules.

Model recommendation: palette judgment, voice extraction, and application rules are mostly matters of taste, so running them on a frontier model (Claude Fable 5 class) is recommended. Smaller models average out colors and blur the voice.

Gates

G1 — Intake. Source check: live site URL? Logo file? Existing deck/materials? If there is nothing, switch to a brand interview (§4 below). And check the purpose: agent-only tokens (DESIGN.md)? Or also a guideline document (PDF) to deliver to people?

G2 — Capture. If there is a site:

  • Full-page screenshots of 3–5 key pages (desktop + mobile) → READ with your eyes.
  • Measure from CSS: :root variables, top-frequency computed colors, actual font-family/weight combinations in use, border-radius/shadow patterns, button/link states.
  • Collect copy: hero headline, CTA wording, about paragraph — raw material for voice extraction. Do not judge by reading only CSS without screenshots — the rendered screen is the truth.

G3 — Token distillation. Record only in measurable form:

  • Color: hex by role — primary / accent / ink (body) / background / muted. One per role, limited to 5–7 total. Descriptions like "various blues" are a failure.
  • Typography: for display/heading/body/mono, each font name + actual weight + usage. Down to the font file source (Google Fonts link, etc.).
  • Logo rules: minimum size, clear space, allowed backgrounds (which version on dark backgrounds), prohibited cases (stretching, color changes, shadows).
  • Shape language: radius values, presence/value of shadows, border style, photo tone (if any).

G4 — Voice. Extract from the collected copy:

  • 3 adjectives (it is better if they are in tension with each other — e.g., "warm + precise").
  • Do/Don't 각 3–5개, Real sentence example pairsas ("we write it this way → we don't write it this way").
  • Fix the tone: formal/informal, emoji policy, sentence-length tendency.
  • If copy is insufficient, supplement with user interviews — do not make things up.

G5 — Output.

  • DESIGN.md (required): all the above tokens, in a structure agents can parse. The goal is that this one file maintains brand consistency across card news, decks, sites, and video subtitles (carousel-generator and ppt-slide-generator read this file).
  • Guideline document (on request): typeset DESIGN.md for people — one rule per page, physical mockups, do/don't comparison spreads.

4. When the brand does not exist yet (interview mode)

If there are no existing assets, help with the decision instead of extracting: industry/target/3 competitors → mood direction 2–3 options (each a palette + font pair draft) → user selection → G3–G5 same. Without drafts, verbal-only agreement like "modern and minimal" is forbidden — make them choose from visible options.

Hard rules

  1. All values are measured — hex pulled from screenshots/CSS, actual weights. No guessing.
  2. Do not put colors without a role into the palette (if there is no indication of where the color is used, delete it).
  3. Voice examples are based on actual copy — if none, use sentences confirmed with the user.
  4. Self-test before output: Can you make 1 SNS card using only DESIGN.md? If you can't, the tokens are insufficient — go back and fill them in.