[ PACK LIBRARY / DESIGN & BRAND ]
REQUIRES
Write down your logo usage, color tokens, type scale, and imagery rules before generating more brand assets. This playbook also creates a reusable style reference tile. Later design tasks can use the document and tile as their reference.
claude plugin install gemskills@b-open-io (skills: gemskills:style-creator; roster: Lisa (gemskills:content))claude plugin install web-dev@b-open-io (roster: Ridd (web-dev:designer))GEMINI_API_KEY - generating the reference style tile{{BRAND_NAME}} The name exactly as it should always be written (capitalization matters).
{{POSITIONING}} One sentence: what you are and who it is for. Anchors the visual mood.
{{LOGO_FILES}} Paths to logo lockups you have (primary, mark-only, mono). "none" if defining fresh.
{{COLOR_SEED}} Your known colors as hex, or a description ("deep maroon + amber accents"). The primary/accent pair.
{{TYPE_PREF}} Type direction: named fonts if fixed, else a feel ("geometric sans headlines, humanist body").
{{IMAGERY_MOOD}} How pictures should feel: subject matter, palette, texture, what to avoid (e.g. "no stock-photo handshakes").
{{STYLE_ID}} A short id for the reusable style you are locking, e.g. "acme-house". Lowercased, hyphenated.
{{OUTPUT_PATH}} Where the spec doc lands, e.g. ./brand/VISUAL-IDENTITY.md.
You are producing a Visual Identity Spec - the source of truth every later design
task generates against. Ridd (UI Designer) owns the structured rules; Lisa (Visual
Content Specialist) owns the reusable style reference.
Write {{OUTPUT_PATH}} as a markdown spec with these sections, each stated as rules
an agent can obey without judgment calls:
1. Name & lockups - {{BRAND_NAME}} written correctly; when to use each lockup from
{{LOGO_FILES}}; clear-space and minimum-size rules; what NOT to do to the logo.
2. Color tokens - from {{COLOR_SEED}}, define named tokens (background, surface,
primary, accent, text, muted) as hex, each with a plain-language "use for" note.
Give the light and dark value for every token; never a single hardcoded color.
3. Type scale - from {{TYPE_PREF}}, name the heading/body/mono families and a
concrete size + weight scale (display, h1-h3, body, small, code).
4. Imagery rules - from {{IMAGERY_MOOD}}, state subject, palette, texture, and an
explicit avoid-list so generated images stay in one family.
5. Reusable style reference - the anchor. Load `gemskills:style-creator` and follow
it to define a new style with id {{STYLE_ID}}: write promptHints (8-12 palette/
texture/mood descriptors, NOT scene objects) and a tilePrompt built with the
skill's 6-part structure (full-bleed anchor, macro/texture anchor, style
descriptors, materiality, palette/lighting, anti-container enforcers). Add the
entry to the style library's styles.json and generate its 512x512 tile with the
skill's generate_tiles script. This is what {{IMAGERY_MOOD}} becomes mechanically.
Record in the spec: "generate all brand imagery with --style {{STYLE_ID}}".
Ground every rule in the inputs - do not invent colors or fonts I did not give.
Where an input is "none" or vague, propose a value and mark it PROPOSED so I can
confirm rather than silently guessing.
Do NOT read the generated tile back into context (style-creator outputs a path);
ask me to visually inspect it for full-bleed texture transfer (no frames, no
scene, right palette) and iterate the tilePrompt if it fails.
Negative prompts: no single-value colors (every token gets light + dark); do not
describe imagery as a scene in the tilePrompt (transfer materiality, not a picture);
do not skip the anti-container enforcers; do not leave any section as prose I still
have to interpret - it must be rules an agent can follow verbatim. Do not run
style-creator's maintainer steps (updating style counts, bumping the gemskills
plugin version, or committing to the plugin); stop once the styles.json entry is
added and the tile is generated.{{OUTPUT_PATH}} - a complete visual identity spec with name/lockup rules,
light+dark color tokens, a concrete type scale, imagery rules, and a locked
reusable style id - plus that style registered in the library with its reference
tile generated. Every later design playbook can now cite --style {{STYLE_ID}}
and inherit the same look.
db-brand-voice-sheet - the verbal half of this identity, so copy matches the
visuals.db-design-token-manifest - turn the color tokens here into the code-side
shadcn source of truth.db-logo-concepts - if {{LOGO_FILES}} was "none", generate directions against
this spec.db-brand-identity-system - roll the whole identity out into a delivered asset
kit.