brandbook — for Claude Code brandbook, MeMyselfAndI, community, for Claude Code, ide skills, brand identity generation, AI-powered brandbook, accessibility-first design, store-ready assets, visual system creation, Claude Code

v1.0.0
GitHub

About this Skill

brandbook is a AI-powered brand identity generator that creates complete brand identities for mobile and web apps.

Features

Generating brand identities using AI research
Creating store-ready assets with accessibility-first designs
Producing visual systems with HEX codes and typography
Developing motion systems with animation guidelines and video specs
Creating marketing kits with social specs and ad strategies
Generating brand tokens with Tailwind v4 @theme tokens

# Core Topics

EllevatedAI EllevatedAI
[0]
[0]
Updated: 3/19/2026
Labs Demo

Browser Sandbox Environment

⚡️ Ready to unleash?

Experience this Agent in a zero-setup browser environment powered by WebContainers. No installation required.

Boot Container Sandbox

brandbook

Install brandbook, an AI agent skill for AI agent workflows and automation. Works with Claude Code, Cursor, and Windsurf with one-command setup.

SKILL.md
Readonly

Brandbook — AI-Powered Brand Identity Generator

Creates complete brand identity for mobile/web apps through structured dialogue, AI research, and optional MCP image generation.

Activation: brandbook, brandbook {app-name}

When to Use

  • Launching new app, need visual identity from scratch
  • Rebranding existing product
  • Need store-ready assets specification

Don't use: Redesigning mature brand with existing guidelines (hire an agency)

Principles

  1. Concrete over abstract — HEX codes, not "blueish"; font names, not "something modern"
  2. Research-backed — every choice has psychological/market justification
  3. Ready-to-use outputs — AI prompts are copy-paste ready, specs are pixel-exact
  4. Accessibility-first — WCAG AA compliance is mandatory, not optional
  5. Progressive enhancement — MCP image gen if available, prompts-only if not
  6. Anti-convergence — LLMs drift to "average design" (Inter, purple gradients, rounded-white-cards). Phase 0 forces emotive narrative BEFORE any visual work. All colors in OKLCH for perceptual uniformity

Output

All files created in brandbook/:

FileContentPhases
brand-dna.mdEmotive narrative, convergence shield, archetype, personality, voice0-3
visual-system.mdColors (HEX/OKLCH), typography, accessibility validation4-6
logo-and-icon.mdConcepts, AI prompts for 4 tools, tech specs7
motion-system.mdAnimation guidelines, video specs, motion tokens8
store-assets.mdScreenshot strategy + copy, Feature Graphic9
marketing-kit.mdSocial specs for 7 platforms, ad strategy, tools10
prompts.mdAll AI prompts collected — copy-paste ready11
checklist.md"Zero to Launch" 3-day action plan11
brand-tokens.cssTailwind v4 @theme tokens — OKLCH, semantic, dark mode12
assets/Generated images (if MCP available)7-8

Coder handoff (written outside brandbook/):

FileContentPhase
.claude/rules/brand.mdMachine-readable brand rules for coding agents13

Phase Overview

SHIELD:      0. Convergence Shield (emotive narrative, banned defaults, 3 directions)
             See: foundation.md

FOUNDATION:  1. Discovery → 2. Brand DNA → 3. Voice Framework
             See: foundation.md

DESIGN:      4. Research → 5. Visual System → 6. Accessibility
             → 7. Logo & Icon → 8. Motion
             See: design.md

LAUNCH:      9. Store Assets → 10. Marketing Kit
             See: launch.md

COMPILE:     11. Compilation + Checklist + MCP Generation
             12. Design Tokens Export (brand-tokens.css)
             13. Coder Handoff (.claude/rules/brand.md)
             See: completion.md

Modules

ModuleWhen to ReadContent
foundation.mdStartDiscovery dialogue, Brand DNA, Voice Framework
design.mdAfter foundationResearch, colors, accessibility, logo, motion
launch.mdAfter designStore assets, marketing kit
completion.mdAfter all phasesCompilation, checklists, MCP generation, output

Flow:

SKILL.md → foundation.md → design.md → launch.md → completion.md

Pre-flight

  1. Check context: Look for files in biz/, ai/ — product briefs, personas, research
  2. Migrate legacy path: Check if biz/brandbook/ exists (v1 output). If yes:
    • Show user: "Found previous brandbook at biz/brandbook/. Migrate to brandbook/?"
    • If approved: mv biz/brandbook/* brandbook/ && rmdir biz/brandbook
    • This preserves existing work (assets, docs) under the new path
  3. Detect existing brand: Check if .claude/rules/brand.md exists (previous run). If yes:
    • Read the existing file
    • Show diff summary: "Previous brand: {font}, {primary color}, {archetype}"
    • Ask: "Update existing brand or start fresh?"
    • If update → pre-fill Phase 0 emotive narrative from existing, highlight what changed
  4. Detect MCP: List available tools. Image generation tools found? → enable generation mode
  5. Create output dir: mkdir -p brandbook/assets

Asset Storage Rules

- MCP auto-saves all generated files to brandbook/assets/ (SAVE_MEDIA_DIR)
- After each generation: show the saved file to user (Read tool)
- Never give CDN URLs — only local paths
- Report: "Saved: brandbook/assets/{filename}"

MCP Detection

Step 1: ToolSearch(query: "fal-ai")
Step 2: Tools found?  → IMAGE_GEN_MODE = true
Step 3: Not found?    → Ask user (AskUserQuestion), do NOT silently fall back

If not found — ask, don't assume:

  • fal-ai может быть не установлен, или установлен с project scope вместо user scope
  • Спроси пользователя: "fal-ai не найден. Работаем без генерации или хотите настроить?"
  • Для установки: claude mcp add fal-ai -s user -- uvx --from fal-mcp-server fal-mcp

Available fal-ai tools (when MCP connected):

IMAGE: generate_image, generate_image_structured, generate_image_from_image,
       edit_image, remove_background, upscale_image, inpaint_image,
       resize_image, compose_images
VIDEO: generate_video, generate_video_from_image, generate_video_from_video
AUDIO: generate_music
UTIL:  list_models, recommend_model, get_pricing, get_usage, upload_file

Use recommend_model tool for AI-powered suggestions, or these defaults:

AssetModelWhy
Logo, icon, text-on-imagefal-ai/recraft-v3#1 on leaderboard, vector+raster, best text
Photo-realistic imageryfal-ai/flux-pro/v1.1-ultraTop photorealism, latest Flux Pro
Quick iterationsfal-ai/flux/schnell$0.003/image, fast
Banners with textfal-ai/recraft-v3Superior text rendering
Logo animationgenerate_video_from_imageAnimate logo directly via MCP
Background removalremove_backgroundTransparent PNG via MCP

STRICT RULES

  1. READ-ONLY for app code — never modify source files
  2. Output ONLY to brandbook/ — local output directory (except .claude/rules/brand.md)
  3. Every choice needs WHY — "Blue (#1E40AF) because fintech vertical = trust, contrast 7.2:1"
  4. Concrete values only — no "consider using...", always exact HEX/font/size
  5. Accessibility is mandatory — WCAG AA minimum for all color combinations
  6. Ask before MCP generation — calls cost money, user must approve
  7. Use existing context — if biz/ has product briefs, pre-fill Discovery answers
  8. ALL ASSETS LOCAL — every generated file saved to brandbook/assets/. No CDN links — only local paths. After generation → show image to user
  9. Anti-convergence — NEVER start with Inter, system-ui, purple/blue gradients, or rounded-white-card aesthetics. Phase 0 Convergence Shield is MANDATORY before any visual decisions
  10. OKLCH-first — all color values include OKLCH notation alongside HEX. OKLCH ensures perceptual uniformity across brand palette

FAQ & Installation Steps

These questions and steps mirror the structured data on this page for better search understanding.

? Frequently Asked Questions

What is brandbook?

brandbook is a AI-powered brand identity generator that creates complete brand identities for mobile and web apps.

How do I install brandbook?

Run the command: npx killer-skills add EllevatedAI/MeMyselfAndI/brandbook. It works with Cursor, Windsurf, VS Code, Claude Code, and 19+ other IDEs.

Which IDEs are compatible with brandbook?

This skill is compatible with Cursor, Windsurf, VS Code, Trae, Claude Code, OpenClaw, Aider, Codex, OpenCode, Goose, Cline, Roo Code, Kiro, Augment Code, Continue, GitHub Copilot, Sourcegraph Cody, and Amazon Q Developer. Use the Killer-Skills CLI for universal one-command installation.

How To Install

  1. 1. Open your terminal

    Open the terminal or command line in your project directory.

  2. 2. Run the install command

    Run: npx killer-skills add EllevatedAI/MeMyselfAndI/brandbook. The CLI will automatically detect your IDE or AI agent and configure the skill.

  3. 3. Start using the skill

    The skill is now active. Your AI agent can use brandbook immediately in the current project.

Related Skills

Looking for an alternative to brandbook or another community skill for your workflow? Explore these related open-source skills.

View All

widget-generator

Logo of f
f

f.k.a. Awesome ChatGPT Prompts. Share, discover, and collect prompts from the community. Free and open source — self-host for your organization with complete privacy.

149.6k
0
AI

flags

Logo of vercel
vercel

flags is a Next.js feature management skill that enables developers to efficiently add or modify framework feature flags, streamlining React application development.

138.4k
0
Browser

zustand

Logo of lobehub
lobehub

The ultimate space for work and life — to find, build, and collaborate with agent teammates that grow with you. We are taking agent harness to the next level — enabling multi-agent collaboration, effortless agent team design, and introducing agents as the unit of work interaction.

72.8k
0
AI

data-fetching

Logo of lobehub
lobehub

The ultimate space for work and life — to find, build, and collaborate with agent teammates that grow with you. We are taking agent harness to the next level — enabling multi-agent collaboration, effortless agent team design, and introducing agents as the unit of work interaction.

72.8k
0
AI