Assets: Higgsfield MCP (higgsfield-generate) is configured and mandatory. Every raster, video, 3D, or audio asset is generated through mcp__higgsfield__generate_image / generate_video / generate_3d / generate_audio. The Gemini scripts under scripts/ (logo/generate.py, cip/generate.py, icon/generate.py) are legacy and must not be run — use this skill for its art direction, specs, styles, and layout reasoning (the search.py helpers are fine), then hand pixel generation to Higgsfield. SVG icons are text: write them directly, no image API. See the Assets section of ~/.claude/rules/frontend.md.

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

Logo Design (Built-in)

55+ styles, 30 color palettes, 25 industry guides. Higgsfield generate_image (Nano Banana 2 / GPT Image 2).

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.

Take the brief from search.py --design-brief and call mcp__higgsfield__generate_image (GPT Image 2 for wordmarks/text, Nano Banana 2 for marks). scripts/logo/generate.py is a legacy Gemini path — do not run it.

After generation, ALWAYS ask the user about an HTML preview via AskUserQuestion. If yes, build a simple HTML gallery page of the variants.

CIP Design (Built-in)

50+ deliverables, 20 styles, 20 industries. Higgsfield generate_image (Nano Banana 2 / Pro).

CIP: Generate Brief

python3 ~/.claude/skills/design/scripts/cip/search.py "tech startup" --cip-brief -b "BrandName"

CIP: Search Domains

python3 ~/.claude/skills/design/scripts/cip/search.py "business card letterhead" --domain deliverable
python3 ~/.claude/skills/design/scripts/cip/search.py "luxury premium elegant" --domain style
python3 ~/.claude/skills/design/scripts/cip/search.py "hospitality hotel" --domain industry
python3 ~/.claude/skills/design/scripts/cip/search.py "office reception" --domain mockup

CIP: Generate Mockups

Compose each deliverable prompt from search.py --cip-brief plus the logo, then call mcp__higgsfield__generate_image with the logo as a reference image (upload it via media_upload_widget first). One call per deliverable; a full set = business card, letterhead, envelope, signage, and two office mockups. scripts/cip/generate.py is a legacy Gemini path — do not run it.

Models: Higgsfield generate_image — nano_banana_2 (default, fast) or gpt_image_2 / Nano Banana Pro (higher text fidelity, 4K)

CIP: Render HTML Presentation

python3 ~/.claude/skills/design/scripts/cip/render-html.py --brand "TopGroup" --industry "consulting" --images /path/to/cip-output

Tip: If no logo exists, use Logo Design section above first.

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

Banner Design (Built-in)

22 art direction styles across social, ads, web, print. Uses design-taste-frontend, plugin frontend-design, higgsfield-generate, and a browser screenshot (Playwright MCP).

Load references/banner-sizes-and-styles.md for complete sizes and styles reference.

Banner: Workflow

1. Gather requirements via AskUserQuestion — purpose, platform, content, brand, style, quantity
2. Research — Activate design-taste-frontend, browse Pinterest for references
3. Design — Create HTML/CSS banner with plugin frontend-design, generate visuals with higgsfield-generate
4. Export — Screenshot to PNG at exact dimensions via Playwright MCP browser_take_screenshot
5. Present — Show all options side-by-side, iterate on feedback

Banner: Quick Size Reference

Banner: Top Art Styles

Banner: Design Rules

• Safe zones: critical content in central 70-80%
• One CTA per banner, bottom-right, min 44px height
• Max 2 fonts, min 16px body, ≥32px headline
• Text under 20% for ads (Meta penalizes)
• Print: 300 DPI, CMYK, 3-5mm bleed

Icon Design (Built-in)

15 styles, 12 categories. Icons are SVG text: write them directly (24×24 viewBox, currentColor, 1.5–2 px stroke for outlined, one <path> per icon where possible) and export sizes with width/height attributes. scripts/icon/generate.py is a legacy Gemini path — do not run it. Load references/icon-design.md for style rules per category.

Icon: Top Styles

Model: the active session model — SVG is XML text, so this needs no image API at all (and must NOT be routed to Higgsfield, which returns rasters).

Social Photos (Built-in)

Multi-platform social image design: HTML/CSS → screenshot export. Uses design-taste-frontend, brand, tailwind-design-system tokens, and a browser screenshot (Playwright MCP).

Load references/social-photos-design.md for sizes, templates, best practices.

Social Photos: Workflow

1. Orchestrate — a TodoWrite list for the tasks; parallel subagents for independent work
2. Analyze — Parse prompt: subject, platforms, style, brand context, content elements
3. Ideate — 3-5 concepts, present via AskUserQuestion
4. Design — brand → tailwind-design-system tokens → design-taste-frontend or plugin frontend-design; HTML per idea × size
5. Export — Playwright MCP screenshot at exact px (2x deviceScaleFactor)
6. Verify — Inspect the exported PNGs (Read the image); fix layout/styling issues and re-export
7. Report — Summary to plans/reports/ with design decisions
8. Organize — Move the exported files into the project's asset directories and the report into plans/reports/

Social Photos: Key Sizes

Workflows

Complete Brand Package

1. Logo → brief from scripts/logo/search.py → Higgsfield generate_image → logo variants
2. CIP → brief from scripts/cip/search.py → Higgsfield generate_image with the logo as reference → deliverable mockups
3. Presentation → Load references/slides-create.md → Build pitch deck

New Design System

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

References

Scripts

Prerequisites

Python: This skill uses Python scripts. On Windows, use python instead of python3 (e.g., python scripts/logo/search.py instead of python3 scripts/logo/search.py).

Check if Python is installed:

python3 --version || python --version

Setup

No setup: image generation goes through the Higgsfield MCP connector, and the search.py / render-html.py helpers need only Python 3 (stdlib). Do not install google-genai.

Integration

External sub-skills: brand, tailwind-design-system (tokens), ui-styling Related Skills: design-taste-frontend, frontend-design (plugin), higgsfield-generate