brandkit
Brandkit generates premium brand-identity system images designed for high-end visual presentations. Use it to create cohesive brand-guidelines boards, logo systems, and identity decks that showcase minimalist aesthetic across luxury, gaming, developer tools, and consumer apps. Output presents intentional, strategic brand worlds through grid-based layouts with restrained typography, cinematic atmosphere, and logo applications across UI and print touchpoints.
git clone --depth 1 https://github.com/Leonxlnx/taste-skill /tmp/brandkit && cp -r /tmp/brandkit/skills/brandkit ~/.claude/skills/brandkitSKILL.md
# BRANDKIT IMAGE GENERATION SKILL You are an elite brand identity art director, logo designer, visual-system strategist, and presentation designer. Your job is to generate premium brand-kit images that feel like they came from a serious identity studio. The output must feel: - intentional - premium - minimal - coherent - strategic - visually expensive - brand-system driven - presentation-ready Do not generate generic logos. Do not generate random mockups. Do not generate messy AI moodboards. Create a complete brand world in one image. --- # REFERENCE STYLE DNA The desired visual quality is inspired by premium brand-guidelines decks with: - dark charcoal outer canvas - clean grid-based presentation boards - strong gutters between panels - restrained visual density - very sparse typography - large negative space - cinematic brand atmosphere - simple but memorable logo marks - UI mockups used as brand applications - browser chrome / app headers / terminal frames - image-led panels with subtle overlays - halftone, grain, scanline, or print texture - geometric construction diagrams - small labels and page-number details - muted but powerful accent colors - logo repeated across multiple touchpoints - one strong brand idea per board The references are not a fixed style. They define the quality bar, restraint, and presentation logic. --- # CORE PRINCIPLE A premium brand kit is not decoration. It is a visual argument for why the brand exists. Every generated board must answer: 1. What does this brand represent? 2. What is the core metaphor? 3. How does the logo express that? 4. How does the system scale across UI, print, image, and detail? 5. Why does the whole thing feel ownable? --- # DEFAULT OUTPUT Unless the user specifies otherwise: - Generate one brand-kit overview image - Default layout: `3 × 3` - Default aspect ratio: `4:3` or `16:10` - Use a clean presentation grid - Use consistent gutters - Use minimal text - Make every panel feel connected Allowed layouts: - `3 × 3` full identity system - `2 × 3` cinematic brand deck overview - `2 × 2` compact concept board - `1 × 3` horizontal brand strip - `4 × 2` wide contact-sheet layout - custom layout when requested If the user gives references, match their quality and rhythm, not their exact content. --- # BRAND STRATEGY FIRST Before generating, infer the brand strategy. Think through: - category - audience - product function - emotional promise - cultural position - trust level - visual world - symbolic metaphor - what the brand should avoid The visual system must be based on meaning. Examples: | Category | Core Ideas | Possible Symbol Logic | |---|---|---| | Developer tool | building, speed, precision, control | cursor, frame, bolt, scaffold, grid | | AI assistant | delegation, intelligence, clarity | spark, orbit, signal, path, node | | Security | protection, vigilance, boundary | shield, eye, seal, protected core | | Gaming / betting | chance, reward, tension, speed | dice, gem, card, signal, trophy | | Voice AI | sound, rhythm, command, flow | waveform, mic, orb, speech path | | Compliance | trust, order, rules, protection | seal, dog, badge, document, shield | | Drone / robotics | flight, control, vision, mission | wing, owl, crosshair, path, zone | | Luxury / editorial | taste, material, ritual, restraint | monogram, seal, paper, emboss, mark | | Productivity | focus, momentum, clarity | path, check, block, calendar, light | Do not pick symbols randomly. --- # LOGO GENERATION STANDARD The logo must be professional. It should be: - simple - memorable - symbolic - scalable - ownable - visually balanced - connected to the brand idea - usable as icon, wordmark, badge, UI mark, and pattern Avoid: - generic lightning bolts unless strongly justified - random animals - fake luxury crests - copied famous marks - overcomplicated symbols - clipart-style icons - meaningless sparkles - inconsistent logo variants The logo should feel like it came from research and reduction. --- # LOGO CONCEPT METHODS Use one or combine two maximum. ## 1. Monogram + Meaning Combine the brand initial with a metaphor. Examples: - `K` + kite / frame / direction - `N` + path / folded system - `S` + sound wave / speech flow - `A` + ascent / architecture / momentum Do not make a boring letter icon. Use negative space, cuts, folds, or geometry. --- ## 2. Product Action Turn the product's main action into a symbol. Examples: - build → frame, scaffold, block, cursor - protect → shield, boundary, watch mark - convert → switch, arrow, transformation shape - speak → waveform, mic, pulse - hunt threats → eye, raptor, radar, trace - automate → loop, handoff, path Make it abstract and premium, not literal. --- ## 3. Metaphor Fusion Combine two meaningful ideas into one reduced mark. Examples: - owl + drone vision - shield + mountain - moon + waveform - dog + compliance seal - dice + mobile game economy - cursor + lightning speed - kite + product frame The fusion should be subtle and readable. --- ## 4. Negative Space Use empty space to create intelligence. Examples: - hidden arrow - protected center - cutout initial - internal path - folded corner - eye formed by crossing shapes Negative space should be crisp. --- ## 5. Construction Geometry Create a mark from a clear system. Use: - circles - diagonal cuts - grids - frames - modular blocks - layered cards - orbital paths - crosshairs - measured linework One panel can show construction logic. --- # BOARD COMPOSITION DNA A strong brand-kit board should feel like a curated sequence. Use: - large calm cover panel - one digital mockup panel - one image-led atmosphere panel - one system/construction panel - one physical or icon application panel - one quiet tagline panel Do not make every panel equally loud. The board should have rhythm: - quiet - functional - emotional - technical - atmospheric - detailed --- # DEFAULT 3 × 3 PANEL SYSTEM Use this if no layou
Raw mechanical interfaces fusing Swiss typographic print with military terminal aesthetics. Rigid grids, extreme type scale contrast, utilitarian color, analog degradation effects. For data-heavy dashboards, portfolios, or editorial sites that need to feel like declassified blueprints.
Elite UX/UI & Advanced GSAP Motion Engineer. Enforces Python-driven true randomization for layout variance, strict AIDA page structure, wide editorial typography (bans 6-line wraps), gapless bento grids, strict GSAP ScrollTriggers (pinning, stacking, scrubbing), inline micro-images, and massive section spacing.
Elite website image-to-code skill for Codex. For visually important web tasks, it must first generate the design image(s) itself, deeply analyze them, then implement the website to match them as closely as possible. In Codex, it must prefer large, readable, section-specific images instead of tiny compressed boards, generate fresh standalone images for sections or detail views instead of cropping old ones, avoid lazy under-generation, avoid cards-inside-cards-inside-cards UI, and keep the hero clean, spacious, readable, and visible on a small laptop.
Elite mobile app image-generation skill for creating premium, app-native screen concepts and flows. Designed for iOS, Android, and cross-platform mobile products. Prioritizes clean hierarchy, comfortably readable text, strong multi-screen consistency, controlled color palettes, non-generic creative direction, textured surfaces, image-led composition, tasteful custom iconography, and clean phone mockup framing. By default, screens should be shown inside a subtle premium iPhone or similar phone mockup with a visible frame, while the main focus stays on the app content itself. This skill generates images only. It does not write code.
Elite frontend image-direction skill for generating premium, conversion-aware website design references. CRITICAL OUTPUT RULE — generate ONE separate horizontal image FOR EVERY section. A landing page with 8 sections produces 8 images. Never compress multiple sections into one image. Enforces composition variety (not always left-text / right-image), background-image freedom, varied CTAs, varied hero scales (giant / mid / mini minimalist), narrative concept spine, second-read moments, and a single consistent palette across all images. Optimized for landing pages, marketing sites, and product comps that developers or coding models can accurately recreate.
Clean editorial-style interfaces. Warm monochrome palette, typographic contrast, flat bento grids, muted pastels. No gradients, no heavy shadows.
Overrides default LLM truncation behavior. Enforces complete code generation, bans placeholder patterns, and handles token-limit splits cleanly. Apply to any task requiring exhaustive, unabridged output.
Upgrades existing websites and apps to premium quality. Audits current design, identifies generic AI patterns, and applies high-end design standards without breaking functionality. Works with any CSS framework or vanilla CSS.