DiscordSign up
SKILLS.SH

ckm:design

ckm:design — an installable skill for AI agents, published by nextlevelbuilder/ui-ux-pro-max-skill.

INSTALLATION
npx skills add https://github.com/nextlevelbuilder/ui-ux-pro-max-skill --skill ckm:design
Run in your project or agent environment. Adjust flags if your CLI version differs.

SKILL.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

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)

50+ deliverables, 20 styles, 20 industries. Gemini Nano Banana (Flash/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

# With logo (RECOMMENDED)

python3 ~/.claude/skills/design/scripts/cip/generate.py --brand "TopGroup" --logo /path/to/logo.png --deliverable "business card" --industry "consulting"

# Full CIP set

python3 ~/.claude/skills/design/scripts/cip/generate.py --brand "TopGroup" --logo /path/to/logo.png --industry "consulting" --set

# Pro model (4K text)

python3 ~/.claude/skills/design/scripts/cip/generate.py --brand "TopGroup" --logo logo.png --deliverable "business card" --model pro

# Without logo

python3 ~/.claude/skills/design/scripts/cip/generate.py --brand "TechFlow" --deliverable "business card" --no-logo-prompt

Models: flash (default, gemini-2.5-flash-image), pro (gemini-3-pro-image-preview)

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

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

Banner Design (Built-in)

22 art direction styles across social, ads, web, print. Uses frontend-design, ai-artist, ai-multimodal, chrome-devtools skills.

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

Banner: Workflow

  • Gather requirements via AskUserQuestion — purpose, platform, content, brand, style, quantity
  • Research — Activate ui-ux-pro-max, browse Pinterest for references
  • Design — Create HTML/CSS banner with frontend-design, generate visuals with ai-artist/ai-multimodal
  • Export — Screenshot to PNG at exact dimensions via chrome-devtools
  • Present — Show all options side-by-side, iterate on feedback

Banner: Quick Size Reference

Platform

Type

Size (px)

Facebook

Cover

820 x 312

Twitter/X

Header

1500 x 500

LinkedIn

Personal

1584 x 396

YouTube

Channel art

2560 x 1440

Instagram

Story

1080 x 1920

Instagram

Post

1080 x 1080

Google Ads

Med Rectangle

300 x 250

Website

Hero

1920 x 600-1080

Banner: Top Art Styles

Style

Best For

Minimalist

SaaS, tech

Bold Typography

Announcements

Gradient

Modern brands

Photo-Based

Lifestyle, e-com

Geometric

Tech, fintech

Glassmorphism

SaaS, apps

Neon/Cyberpunk

Gaming, events

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. Gemini 3.1 Pro Preview generates SVG text output.

Icon: Generate Single Icon

python3 ~/.claude/skills/design/scripts/icon/generate.py --prompt "settings gear" --style outlined

python3 ~/.claude/skills/design/scripts/icon/generate.py --prompt "shopping cart" --style filled --color "#6366F1"

python3 ~/.claude/skills/design/scripts/icon/generate.py --name "dashboard" --category navigation --style duotone

Icon: Generate Batch Variations

python3 ~/.claude/skills/design/scripts/icon/generate.py --prompt "cloud upload" --batch 4 --output-dir ./icons

Icon: Multi-size Export

python3 ~/.claude/skills/design/scripts/icon/generate.py --prompt "user profile" --sizes "16,24,32,48" --output-dir ./icons

Icon: Top Styles

Style

Best For

outlined

UI interfaces, web apps

filled

Mobile apps, nav bars

duotone

Marketing, landing pages

rounded

Friendly apps, health

sharp

Tech, fintech, enterprise

flat

Material design, Google-style

gradient

Modern brands, SaaS

Model: gemini-3.1-pro-preview — text-only output (SVG is XML text). No image generation API needed.

Social Photos (Built-in)

Multi-platform social image design: HTML/CSS → screenshot export. Uses ui-ux-pro-max, brand, design-system, chrome-devtools skills.

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

Social Photos: Workflow

  • Orchestrate — project-management skill for TODO tasks; parallel subagents for independent work
  • Analyze — Parse prompt: subject, platforms, style, brand context, content elements
  • Ideate — 3-5 concepts, present via AskUserQuestion
  • Design — /ckm:brand → /ckm:design-system → randomly invoke /ck:ui-ux-pro-max OR /ck:frontend-design; HTML per idea × size
  • Export — chrome-devtools or Playwright screenshot at exact px (2x deviceScaleFactor)
  • Verify — Use Chrome MCP or chrome-devtools skill to visually inspect exported designs; fix layout/styling issues and re-export
  • Report — Summary to plans/reports/ with design decisions
  • Organize — Invoke assets-organizing skill to sort output files and reports

Social Photos: Key Sizes

Platform

Size (px)

Platform

Size (px)

IG Post

1080×1080

FB Post

1200×630

IG Story

1080×1920

X Post

1200×675

IG Carousel

1080×1350

LinkedIn

1200×627

YT Thumb

1280×720

Pinterest

1000×1500

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-design, ui-ux-pro-max, ai-multimodal, chrome-devtools

BrowserAct

Let your agent run on any real-world website

Bypass CAPTCHA & anti-bot for free. Start local, scale to cloud.

Explore BrowserAct Skills →

Related skills

frontend-design
3/3

Distinctive, production-grade frontend interfaces that reject generic AI aesthetics. Guides design thinking before coding: establish bold aesthetic direction (brutalist, maximalist, retro-futuristic, luxury, playful, etc.) with clear purpose, tone, and differentiation Emphasizes typography, color theming, motion, spatial composition, and textural details as core design pillars; uses CSS variables, animations, and scroll-triggered effects Generates working, functional code (HTML/CSS/JS, React, Vue) that matches implementation complexity to aesthetic vision: elaborate code for maximalist designs, restrained precision for minimalist ones Explicitly avoids generic patterns: overused fonts (Inter, Roboto), clichéd color schemes (purple gradients), predictable layouts, and cookie-cutter component design

Verified authoranthropics
SKILLS.SH
422K139K
2026-05-22
web-design-guidelines
2/3

Audit UI code against Vercel's Web Interface Guidelines for design and accessibility compliance. Fetches the latest guidelines from a remote source before each review, ensuring rules stay current Accepts file paths or patterns as arguments; prompts for files if none provided Outputs findings in a terse file:line format for quick scanning and remediation Covers design, accessibility, and UX best practices as defined in the guidelines repository

Verified authorvercel-labs
SKILLS.SH
318K26.9K
2026-05-22
vercel-composition-patterns
3/3

React composition patterns for scaling components and avoiding boolean prop proliferation. Covers four priority categories: component architecture, state management, implementation patterns, and React 19 APIs, each with specific rules and code examples Includes 10+ named patterns addressing compound components, context providers, state lifting, and explicit variants Designed for refactoring bloated components, building reusable libraries, and reviewing component architecture decisions React 19 specific guidance on removing forwardRef and using use() instead of useContext()

Verified authorvercel-labs
SKILLS.SH
172K26.9K
2026-05-22
ui-ux-pro-max
2/3

Comprehensive design intelligence for web and mobile UI/UX across 10 technology stacks. Includes 50+ design styles, 161 color palettes, 57 font pairings, and 99 UX guidelines with priority-ranked rules for accessibility, touch interaction, performance, and responsive layout Searchable database with design-system generation that recommends patterns, colors, typography, and effects based on product type and keywords; supports light/dark mode and platform-specific guidance (iOS HIG, Material Design, React Native) Covers 10 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui, HTML/CSS) with implementation-specific best practices and performance optimization rules Provides 25 chart types, 161 product type patterns, and pre-built templates for websites, landing pages, dashboards, admin panels, e-commerce, SaaS, portfolios, blogs, and mobile apps with component libraries (buttons, modals, forms, tables, cards, charts)

nextlevelbuilder
SKILLS.SH
158K81.3K
2026-05-22

Stop writing automation&scrapers

Install the CLI. Run your first Skill in 30 seconds. Scale when you're ready.

Start free
free · no credit card