ckm:design

Overview

What is ckm:design?

ckm:design is a unified, design-first skill that helps your agent plan and produce visual assets across your entire brand experience. It is built for UI/UX and brand workflows, not just for dumping code, and combines structured references with optional local scripts to support:

• Brand identity and visual direction
• Design tokens and design-system specs
• UI styling guidance for shadcn/ui and Tailwind
• Logo design and AI logo generation (55 styles)
• Corporate Identity Program (CIP) deliverables and mockups
• HTML-based presentations and pitch decks (with Chart.js)
• Banner design for social, ads, web, and print (22 styles, full size matrix)
• Icon design with AI-generated SVGs (15 styles)
• Social photos and marketing images for major platforms

The skill ships with rich reference material and data tables so the agent can make concrete, implementation-ready recommendations without you needing to search size charts or brand standards by hand.

Who is ckm:design for?

ckm:design is a good fit if you are:

• A UI/UX designer who wants an assistant that speaks in terms of flows, components, tokens, and art direction.
• A frontend developer who needs precise banner sizes, icon specs, or slide HTML structures while keeping code and design aligned.
• A brand or marketing lead planning logos, CIP rollouts, social campaigns, and slide decks for pitches.
• A founder or small team that needs end-to-end brand and UI guidance but doesn’t have a full design department.

If you only need raw code generation without design rationale, a lighter engineering-only skill may be better. ckm:design is intended for scenarios where visual quality, consistency, and brand fit matter.

What problems does ckm:design solve?

Using the bundled references and data, ckm:design helps your agent:

• Standardize brand output – align logos, banners, social photos, and CIP assets under one coherent visual system.
• Get sizes and formats right the first time – using platform-specific tables for social media, Google Display Network, web heroes, and print.
• Scale corporate identity programs – by mapping industries, styles, and deliverables for large CIP sets.
• Bridge design and implementation – connecting brand decisions to design tokens, CSS variables, shadcn/ui, and Tailwind usage.
• Prototype fast – with HTML slide templates and CIP mockups that can be reviewed long before a full design system is in place.

---

How to Use

1. Install the ckm:design skill

You install ckm:design into your Claude-compatible skills setup from the upstream repository:

npx skills add https://github.com/nextlevelbuilder/ui-ux-pro-max-skill --skill design

This pulls the design skill from the nextlevelbuilder/ui-ux-pro-max-skill repository into your local ~/.claude/skills/design directory (or equivalent for your environment).

After installation, you should see:

• SKILL.md – top-level description and routing guidance.
• data/ – CSV datasets for CIP, logo, and icon styles.
• references/ – the main knowledge base for design tasks.
• scripts/ – optional Python utilities for CIP and icon generation.

2. Understand the design routing model

ckm:design acts as the design entry point and routes work to focused sub-skills as described in references/design-routing.md and SKILL.md.

Key design domains:

• Brand identity → usually handled by a separate brand skill.
• Design systems and tokens → via design-system skill.
• UI implementation (shadcn/ui, Tailwind) → via ui-styling skill.
• Logo creation → built-in logo design references.
• CIP design → corporate identity deliverables and mockups.
• Slides → HTML presentations using Chart.js.
• Banner design → social, ads, web, print banners.
• Icon design → SVG icon generation via scripts.

In prompts, you can hint the design type with the skill’s argument-hint pattern:

ckm:design [design-type] [context]

Example:

• ckm:design logo fintech SaaS brand for B2B dashboards
• ckm:design cip rebrand for hospitality hotel chain
• ckm:design banner LinkedIn company cover product launch

3. Use the references for UI/UX and brand decisions

The strength of ckm:design is in its structured reference files. Use them as the canonical source when asking your agent for specs.

UI/UX and design-system planning

While the execution may be routed to design-system or ui-styling, you can use ckm:design to:

• Discuss tokens and specs at a design level (colors, typography, spacing, states).
• Map brand colors and type to CSS variables and Tailwind config.
• Plan component behavior and states before implementation.

The agent can combine the high-level design intent from ckm:design with code-focused skills for implementation.

Banner and campaign creative

For campaigns and UI banners, rely on references/banner-sizes-and-styles.md:

• Pick correct sizes per platform (Facebook, Twitter/X, LinkedIn, YouTube, Instagram, Pinterest, Google Display Network, website, email, and print formats).
• Choose between 22 art direction styles (e.g., Minimalist, Corporate Minimal, Luxury Premium, Modern Tech, Warm Organic, Bold Dynamic).
• Ask the agent to map messaging and layout to specific placements like:
  • Facebook cover vs event cover
  • LinkedIn company cover vs personal banner
  • GDN billboard vs medium rectangle
  • Website hero vs blog header

Example prompt for campaign planning:

Using ckm:design, plan a full banner set for a modern tech SaaS launch, including LinkedIn company cover, Twitter header, Instagram post, and a Google Display billboard. Use Modern Tech art direction and map each asset to the correct pixel size.

Corporate Identity Program (CIP) rollouts

CIP support is covered in:

• references/cip-deliverable-guide.md – what to include in a complete identity system.
• references/cip-design.md – how data and scripts support 50+ deliverables, 20 styles, and 20 industries.
• references/cip-style-guide.md – detailed style archetypes (Corporate Minimal, Modern Tech, Luxury Premium, Classic Traditional, Warm Organic, Bold Dynamic, etc.).
• references/cip-prompt-engineering.md – prompt structures for mockup generation.

Use these to:

• Define the scope of a rebrand (business cards, signage, vehicles, apparel, digital assets, events, and more).
• Align each deliverable with an industry-appropriate style guide.
• Generate highly structured prompts for mockups that a Gemini model or another image engine can interpret consistently.

Example high-level prompt:

Use ckm:design to create a CIP plan for a premium hospitality brand. Choose a suitable style from the CIP style guide and list all recommended deliverables, from stationery to vehicle branding and trade show assets.

4. Generate CIP briefs and mockups with scripts (optional)

If you want to go beyond conceptual planning and actually generate CIP mockups using the included Python scripts, follow references/cip-design.md.

Make sure Python 3 is installed and you have access to a compatible Gemini model as described in your own toolchain.

4.1. Search CIP data and create a brief

Use the BM25-powered search script to explore deliverables, styles, and industries and generate a starting brief:

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

You can search specific domains:

# Deliverables
python3 ~/.claude/skills/design/scripts/cip/search.py "business card letterhead" --domain deliverable

# Design styles
python3 ~/.claude/skills/design/scripts/cip/search.py "luxury premium elegant" --domain style

# Industry guidelines
python3 ~/.claude/skills/design/scripts/cip/search.py "hospitality hotel" --domain industry

# Mockup contexts
python3 ~/.claude/skills/design/scripts/cip/search.py "office reception" --domain mockup

The data/cip/ CSV files store the underlying deliverables, industries, styles, and mockup contexts used by this search utility.

4.2. Generate CIP mockup images

references/cip-design.md includes commands for using scripts/cip/generate.py to drive Gemini-based mockup generation:

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

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

Use your own model keys and environment configuration as required; ckm:design provides the data structure, prompt scaffolding, and script entry points, not the model itself.

4.3. Render HTML presentations of CIP results

Once you have mockup data, you can render an HTML presentation using:

python3 ~/.claude/skills/design/scripts/cip/render-html.py

This will generate an HTML overview that you can send to stakeholders as a visual summary of the identity system.

5. Design logos and icons with AI support

ckm:design also includes focused guidance and scripts for logo and icon work.

5.1. Logo planning and prompt engineering

Rely on:

• references/logo-design.md – logo composition fundamentals.
• references/logo-color-psychology.md – color choices by brand personality and industry.
• references/logo-style-guide.md – how to pick from the 55 available logo styles.
• references/logo-prompt-engineering.md – recommended prompt structures for Gemini-based logo generation.

Use these references when asking your agent to:

• Define a logo system (primary, stacked, icon-only, monochrome versions).
• Choose colors and typography that align with your brand strategy.
• Draft AI prompts that are detailed enough to produce usable logo candidates.

The built-in logo capability is designed to work alongside the CIP and banner tooling so that your brand mark stays consistent across all touchpoints.

5.2. Icon design with SVG output

references/icon-design.md documents how to generate AI-powered SVG icons using scripts/icon/generate.py and Gemini 3.1 Pro Preview.

Example commands:

# Simple icons
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"

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

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

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

# Discover available styles and categories
python3 ~/.claude/skills/design/scripts/icon/generate.py --list-styles
python3 ~/.claude/skills/design/scripts/icon/generate.py --list-categories

This is especially useful for UI/UX teams that need cohesive icon sets aligned to the same visual language as their logos and CIP materials.

6. Build HTML slide decks and visuals for marketing

ckm:design includes a full slide-design reference set ideal for product demos, sales decks, and internal presentations:

• references/slides.md – overview of the slide system.
• references/slides-create.md – how to go from outline to deck.
• references/slides-layout-patterns.md – common page-level layouts.
• references/slides-copywriting-formulas.md – messaging frameworks for clarity and persuasion.
• references/slides-strategies.md – strategies for narrative structure.
• references/slides-html-template.md – base HTML template for slides (with Chart.js integration).

With these, you can:

• Ask your agent to create a slide outline and map sections to layout patterns.
• Generate HTML slide decks that match your brand tokens and colors.
• Add Chart.js visualizations for metrics and dashboards.

Example prompt:

Using ckm:design, draft a 12-slide product launch deck for a B2B SaaS. Use the HTML slide template and suggest appropriate Chart.js charts for the metrics slides.

7. Social photos and multi-platform campaigns

references/social-photos-design.md gives guidance for designing social photos and multi-platform assets.

The design skill helps you:

• Coordinate profile photos, cover images, and post templates across platforms like Facebook, Twitter/X, LinkedIn, YouTube, Instagram, Pinterest, TikTok, Threads, and Google Ads.
• Use HTML-to-screenshot workflows for quickly iterating social visuals with consistent typography and layout.
• Tie every social asset back into your core brand and CIP system.

---

FAQ

When is ckm:design a good fit?

ckm:design is well suited when you:

• Need end-to-end visual direction spanning UI/UX, branding, CIP, and marketing.
• Want your agent to speak in terms of design tokens, art direction, and brand systems, not just CSS snippets.
• Are planning a rebrand, new product launch, or design system rollout and need a consistent, reference-backed approach.
• Want to mix AI image generation (logos, icons, CIP mockups, social photos) with human design oversight.

When is ckm:design not the right tool?

It may not be ideal if you:

• Only need pure backend or algorithmic help with no design component.
• Want a single-step logo generator without any consideration for broader brand systems.
• Don’t have the ability or desire to run optional Python tooling (the skill is still useful for guidance without scripts, but you will rely on your own image generation stack).

Does ckm:design require Figma or a specific design app?

No. ckm:design is tool-agnostic. It provides structure and guidance you can apply in:

• Figma or similar tools for UI/UX layout and prototyping.
• Frontend codebases using shadcn/ui and Tailwind.
• Presentation tools or raw HTML for slides.
• Any image editor or AI generation pipeline that can consume the prompts and specs produced.

You are free to keep your existing design stack; the skill acts as a decision and specification layer on top.

Can I use ckm:design without running the Python scripts?

Yes. The core value of ckm:design is in its structured references and data files:

• You can rely entirely on references/*.md and data/*.csv through the agent for planning and specification.
• Scripts in scripts/cip/ and scripts/icon/ are optional accelerators for teams that want to automate mockup and SVG generation.

If you don’t run the scripts, you will still get:

• Correct sizes, styles, and deliverable lists.
• Prompt frameworks for use in your own AI image tools.
• Consistent guidance for brand, UI, and marketing alignment.

How does ckm:design work with other design skills?

The repository is organized as a suite of cooperating design skills. ckm:design:

• Serves as the routing and orchestration layer for visual tasks.
• Delegates deep brand identity work to brand.
• Delegates token architecture and component specs to design-system.
• Delegates implementation details (shadcn/ui, Tailwind classes) to ui-styling.

In practice, you:

1. Start with ckm:design to frame the visual problem and pick the right sub-skill.
2. Use the linked specialization skill for detailed execution.
3. Return to ckm:design to ensure all outputs stay consistent with the overall brand and CIP plan.

Where should I look first after installing ckm:design?

For a quick but thorough orientation:

1. Open SKILL.md to understand the scope and main workflows.
2. Review references/design-routing.md to see how tasks map across the design skill family.
3. Skim the following key references depending on your immediate need:
   • references/banner-sizes-and-styles.md – for campaigns and banners.
   • references/cip-deliverable-guide.md and references/cip-style-guide.md – for corporate identity systems.
   • references/logo-design.md and references/logo-color-psychology.md – for logo projects.
   • references/slides.md and references/slides-html-template.md – for decks and presentations.
   • references/social-photos-design.md – for social campaigns.

This gives you enough context to decide how to apply ckm:design in your UI/UX, branding, or marketing workflow before you dive into any of the optional scripts.