t1k:web:ui:brand

Field	Value
Module	`ui`
Version	`1.7.0`
Effort	`high`
Tools	—

Keywords: banner, brand, design, Gemini, icon, identity, logo, social, Stitch, UI

How to invoke

/t1k:web:ui:brand
[design-type] [context]

Design

Unified design skill: brand, tokens, UI, logo, CIP, slides, banners, social photos, icons.

When to Use

Brand identity, voice, assets
Design system tokens and specs
UI styling with shadcn/ui + Tailwind
Logo design and AI generation
Corporate identity program (CIP) deliverables
Presentations and pitch decks
Banner design for social media, ads, web, print
Social photos for Instagram, Facebook, LinkedIn, Twitter, Pinterest, TikTok

Sub-skill Routing

Task	Sub-skill	Details
Brand identity, voice, assets	`brand`	External skill
Tokens, specs, CSS vars	`design-system`	External skill
shadcn/ui, Tailwind, code	`ui-styling`	External skill
Logo creation, AI generation	Logo (built-in)	`references/logo-design.md`
CIP mockups, deliverables	CIP (built-in)	`references/cip-design.md`
Presentations, pitch decks	Slides (built-in)	`references/slides.md`
Banners, covers, headers	Banner (built-in)	`references/banner-sizes-and-styles.md`
Social media images/photos	Social Photos (built-in)	`references/social-photos-design.md`
SVG icons, icon sets	Icon (built-in)	`references/icon-design.md`

Logo Design (Built-in)

55+ styles, 30 color palettes, 25 industry guides. Gemini Nano Banana models.

Logo: Generate Design Brief

python3 ~/.claude/skills/design/scripts/logo/search.py "tech startup modern" --design-brief -p "BrandName"

Logo: Search Styles/Colors/Industries

python3 ~/.claude/skills/design/scripts/logo/search.py "minimalist clean" --domain style
python3 ~/.claude/skills/design/scripts/logo/search.py "tech professional" --domain color
python3 ~/.claude/skills/design/scripts/logo/search.py "healthcare medical" --domain industry

Logo: Generate with AI

ALWAYS generate output logo images with white background.

python3 ~/.claude/skills/design/scripts/logo/generate.py --brand "TechFlow" --style minimalist --industry tech
python3 ~/.claude/skills/design/scripts/logo/generate.py --prompt "coffee shop vintage badge" --style vintage

IMPORTANT: When scripts fail, try to fix them directly.

After generation, ALWAYS ask user about HTML preview via AskUserQuestion. If yes, invoke /ui-ux-pro-max for gallery.

CIP Design (Built-in)

Full CIP design guide (prompts, styles, color palettes): see references/cip-design-guide.md.

Slides (Built-in)

Strategic HTML presentations with Chart.js, design tokens, copywriting formulas.

Load references/slides-create.md for the creation workflow.

Slides: Knowledge Base

Topic	File
Creation Guide	`references/slides-create.md`
Layout Patterns	`references/slides-layout-patterns.md`
HTML Template	`references/slides-html-template.md`
Copywriting	`references/slides-copywriting-formulas.md`
Strategies	`references/slides-strategies.md`

Full banner, icon, and social photos workflow details: see references/workflow-details.md.

Workflows

Complete Brand Package

Logo → scripts/logo/generate.py → Generate logo variants
CIP → scripts/cip/generate.py --logo ... → Create deliverable mockups
Presentation → Load references/slides-create.md → Build pitch deck

New Design System

Brand (brand skill) → Define colors, typography, voice
Tokens (design-system skill) → Create semantic token layers
Implement (ui-styling skill) → Configure Tailwind, shadcn/ui

References

Topic	File
Design Routing	`references/design-routing.md`
Logo Design Guide	`references/logo-design.md`
Logo Styles	`references/logo-style-guide.md`
Logo Colors	`references/logo-color-psychology.md`
Logo Prompts	`references/logo-prompt-engineering.md`
CIP Design Guide	`references/cip-design.md`
CIP Deliverables	`references/cip-deliverable-guide.md`
CIP Styles	`references/cip-style-guide.md`
CIP Prompts	`references/cip-prompt-engineering.md`
Slides Create	`references/slides-create.md`
Slides Layouts	`references/slides-layout-patterns.md`
Slides Template	`references/slides-html-template.md`
Slides Copy	`references/slides-copywriting-formulas.md`
Slides Strategy	`references/slides-strategies.md`
Banner Sizes & Styles	`references/banner-sizes-and-styles.md`
Social Photos Guide	`references/social-photos-design.md`
Icon Design Guide	`references/icon-design.md`

Scripts

Script	Purpose
`scripts/logo/search.py`	Search logo styles, colors, industries
`scripts/logo/generate.py`	Generate logos with Gemini AI
`scripts/logo/core.py`	BM25 search engine for logo data
`scripts/cip/search.py`	Search CIP deliverables, styles, industries
`scripts/cip/generate.py`	Generate CIP mockups with Gemini
`scripts/cip/render-html.py`	Render HTML presentation from CIP mockups
`scripts/cip/core.py`	BM25 search engine for CIP data
`scripts/icon/generate.py`	Generate SVG icons with Gemini 3.1 Pro

Setup

export GEMINI_API_KEY="your-key"  # https://aistudio.google.com/apikey
pip install google-genai pillow

Integration

External sub-skills: brand, design-system, ui-styling Related Skills: frontend-ui, ui-ux-pro-max, ai-multimodal, chrome-devtools

Gotchas

Design fidelity drift starts at hand-off — pin a single source-of-truth file per release; PRs that change design.figma MUST update the linked node.
Component variant explosion at 5+ states — flatten to composable primitives or every theme change ships in 50 files.
Spacing tokens with non-multiplicative scale (8, 12, 18, 28) drift to chaos — stick to 4n or 8n baseline.