banner-design
Design banners for social media, ads, website heroes, creative assets, and print. Multiple art direction options with optional…
Brand identity sets from one brief - logo, typography and colour palette built together, measured (contrast, colour blindness, glyph coverage, font licences, small-size logo renders) and compared side by side as identity cards, shown on the user's own site, then a brand
Claude Code
$ npx -y skills add fatihaydost/brand-identity-skill --skill brand-identity --agent claude-code
Codex
$ npx skills add fatihaydost/brand-identity-skill --skill brand-identity -a codex -y
Cursor
$ npx skills add fatihaydost/brand-identity-skill --skill brand-identity -a cursor -y
Gemini CLI
$ npx skills add fatihaydost/brand-identity-skill --skill brand-identity -a gemini-cli -y
GitHub Copilot
$ npx skills add fatihaydost/brand-identity-skill --skill brand-identity -a github-copilot -y
OpenCode
$ npx skills add fatihaydost/brand-identity-skill --skill brand-identity -a opencode -y
Windsurf
$ npx skills add fatihaydost/brand-identity-skill --skill brand-identity -a windsurf -y
name: brand-identity description: Brand identity sets from one brief - logo, typography and colour palette built together, measured (contrast, colour blindness, glyph coverage, font licences, small-size logo renders) and compared side by side as identity cards, shown on the user's own site, then a brand guidelines kit (PDF, logo files, tokens) for the chosen set. Use for a new brand or any part of one (logo, fonts, colours, or a mix), for refreshing an identity, or for critiquing one, even if the user only says "branding". license: MIT
You are the designer. Scripts measure what is broken; you decide what is good. Every claim you make about a colour, typeface or mark is either measured by a script or labelled as judgement.
Ask in one message (skip anything the user or their site already answered):
With a site, run `site extract` first and ask only about what it could not tell you. Details: `references/discovery-brief.md`.
Scripts: `python3 <skill>/scripts/brand.py <command>` (`--help` on each). Put independent commands in one turn. With uv the scripts fetch their own packages; if `check` lists missing ones, give the user its install line.
1. `check` + `init NAME --sets 3 --langs en,tr [--numbers] [--site URL] [--state logo=keep …] --sector … --audience … --attributes a,b,c --competitors x,y --tagline … --sentence en='…' --sentence tr='…' --nav A,B,C --cta … [--source logo=file.svg --source palette=#hex,#hex]` (one turn). Sentence (one per brand language), nav and CTA are real brand copy for specimens and mocks, in the brand's voice. `--source` gives the asset of a keep/refresh part. 2. Read `references/cohesion.md`, `type.md`, `logo.md`, `ai-defaults.md`, and `color.md` when a palette is wanted (one turn, ≤ 24 KB). Other cards only when their topic comes up. 3. `fonts search --class … --exclude-defaults` and `site competitors WORK url…` when there are competitors. 4. Write **all sets in one `sets.json`** (format: `templates/sets.example.json`): per set the identity fields, a partial palette (`brand[]` seeds, name, direction) and the symbol SVG inline. 5. `logos WORK` → look at the contact sheet → fix one defect per mark (name it in `logo.defect`) → `logos WORK` → look. Two rounds; a third only to clear a gate or a cliché reading. Letter positions for details are in `sets/X/logo/build/wordmark-glyphs.json`. 6. `build WORK` → look at `review.png` (not `board.png`, the user's large copy) → fix gates (re-run only the failing set with `--sets X`). 7. Present the checkpoint (§5) and **stop**. Never pick for the user. 8. After the pick: add 1–2 misuses of this mark (`references/kit.md`), then `kit WORK/sets/X` (`--full` for the long kit). Say which files are where.
`mix WORK A:logo A:type B:palette --as D` when the user asks for parts of different sets. `critique` for an existing identity (`references/critique.md`).
together. Write it as one sentence before choosing anything. One **expression move**: the only loud thing.
two axes; inside a set the three parts sit at the same position.
the set stands apart.
sector?" If yes, justify it from the brief in `defaults_used[]` (id = the flag's id or its logo tag) or change it. At least one set uses nothing from `ai-defaults.md`. "Feels warm" or "feels premium" is not a reason.
never change it.
**Logo** (`references/logo.md`): a mark identifies, it does not explain. Write 4–6 one-sentence ideas per set, build one. Draw the symbol on a 100-unit grid from filled primitives; use `data-op="subtract|union|intersect"` for cut-outs and `data-color="<palette role>"` for colour; never `<text>`. Wordmarks come from the set's display face automatically; set `case`, `tracking` (1/1000 em) and `tags` (structure vocabulary in `ai-defaults.md`). Look at 16 and 32 px every round. Add `symbol_small_svg` when the mark clogs at small size. A **wordmark-only** set still needs (1) one ownable detail drawn on the outlined type with `wordmark_detail_svg` (wordmark coordinates: cap top y=0, baseline y=100, x in `data-advance` units; each shape is a `data-op` step, `data-glyph="n"` limits it to the n-th character) and (2) a designed small mark (`symbol_small_svg` or `logo.monogram`) for 16–48 px. Plain type with a first-letter favicon reads as stock. A detail shape with its own `data-color` stays a separate colour; `data-glyphs` elements take `data-wght`/`data-opsz` for a sturdier small cut. Role names resolve to UI tones; brand ids (`brand-1`) keep the exact brand hex; a main part under 3:1 on a ground is drawn in that ground's ink. `app_icon_svg` (100-unit grid) lets the tile be part of the icon. When the idea is a dark or coloured surface, set `card.ground` (`dark` or a role / brand id) so the card shows it.
**Type** (`referenc
A skill for Claude Code that designs a brand identity as one system: **logo, typography and colour palette built together from one idea**, measured, shown side by side as identity cards, and handed over as a brand guidelines kit for the set you pick.
Design banners for social media, ads, website heroes, creative assets, and print. Multiple art direction options with optional…
Use to design, redesign, critique, audit, polish or animate a frontend: websites, landing pages, dashboards, app UI, components,…
Hyperframes-based video template for retro pixel deck motion design. Use when users want a high-fidelity, multi-scene…
Create branded architecture, architecture delta, IT current-state, flowchart, sequence, state machine, ER/data model, timeline,…