网有NETHAVE
AGENT SKILL

ckm:design

Comprehensive design skill: brand identity, design tokens, UI styling, logo generation (55 styles, Gemini AI), corporate identity program (50 deliverables, CIP mockups), HTML presentations (Chart.js), banner design (22 styles, social/ads/web/print), icon design (15 styles, SVG, Gemini 3.1 Pro), social photos (HTML→screenshot, multi-platform), poster design (20-30 styles, 4 recombinable axes, model-agnostic prompt emission). Actions: design logo, create CIP, generate mockups, build slides, design banner, generate icon, create social photos, design poster, social media images, brand identity, design system. Platforms: Facebook, Twitter, LinkedIn, YouTube, Instagram, Pinterest, TikTok, Threads, Google Ads.

适用职业设计师
使用场景演示文稿视觉设计Skill与智能体开发
License 许可
MIT
所属仓库
wojtekidd/risky
最近更新
2026-10-11
Stars
★ 0
Forks
0

01 前言 Front Matter

name
ckm:design
license
MIT
metadata
{ "author": "claudekit", "version": "2.2.0" }
description
Comprehensive design skill: brand identity, design tokens, UI styling, logo generation (55 styles, Gemini AI), corporate identity program (50 deliverables, CIP mockups), HTML presentations (Chart.js), banner design (22 styles, social/ads/web/print), icon design (15 styles, SVG, Gemini 3.1 Pro), social photos (HTML→screenshot, multi-platform), poster design (20-30 styles, 4 recombinable axes, model-agnostic prompt emission). Actions: design logo, create CIP, generate mockups, build slides, design banner, generate icon, create social photos, design poster, social media images, brand identity, design system. Platforms: Facebook, Twitter, LinkedIn, YouTube, Instagram, Pinterest, TikTok, Threads, Google Ads.
argument-hint
[design-type] [context]

02 资源文件 159

03 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
  • Poster design (event, editorial, marketing) with locked-style + varied-composition prompts

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
Posters (event, editorial, marketing) Poster (built-in) references/poster-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

  1. Gather requirements via AskUserQuestion — purpose, platform, content, brand, style, quantity
  2. Research — Activate ui-ux-pro-max, browse Pinterest for references
  3. Design — Create HTML/CSS banner with frontend-design, generate visuals with ai-artist/ai-multimodal
  4. Export — Screenshot to PNG at exact dimensions via chrome-devtools
  5. 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.

Poster Design (Built-in)

20-30 curated styles × 15-20 palettes × 10-14 layouts × 8-12 textures. Model-agnostic — emits text prompts only. Use any image model (Gemini Nano Banana 2, GPT Image, Imagen, Midjourney).

Three axes (style, palette, texture) locked per call to preserve identity; layout + variation seed randomized to guarantee per-call variety. 5 calls with same --style → 5 visibly distinct posters that read as one series.

Load references/poster-design.md for the full guide and references/poster-prompt-engineering.md for prompt anatomy + model-specific tweaks.

Poster: Search Knowledge Base

~/.claude/skills/.venv/bin/python3 ~/.claude/skills/design/scripts/poster/search.py --domain style --query "swiss editorial"
~/.claude/skills/.venv/bin/python3 ~/.claude/skills/design/scripts/poster/search.py --domain palette --query "warm earthy"
~/.claude/skills/.venv/bin/python3 ~/.claude/skills/design/scripts/poster/search.py --domain texture --query "risograph"
~/.claude/skills/.venv/bin/python3 ~/.claude/skills/design/scripts/poster/search.py --domain layout --query "centered grid"

Poster: Build Brief

~/.claude/skills/.venv/bin/python3 ~/.claude/skills/design/scripts/poster/search.py --poster-brief --topic "AI Conference" --query "minimal grid"

Poster: Generate Prompt

~/.claude/skills/.venv/bin/python3 ~/.claude/skills/design/scripts/poster/generate.py --topic "AI Conference"
~/.claude/skills/.venv/bin/python3 ~/.claude/skills/design/scripts/poster/generate.py --topic "AI Conference" --query "swiss" --aspect a2
~/.claude/skills/.venv/bin/python3 ~/.claude/skills/design/scripts/poster/generate.py --topic "AI Conference" --style "Swiss Editorial Grid" --seed 42

Pipe stdout into any image-gen model. For series: same --style, different --seed values (lock identity, vary composition).

Poster: Rebuild Knowledge Base

# Vision analysis (resume-safe; needs GEMINI_API_KEY)
~/.claude/skills/.venv/bin/python3 ~/.claude/skills/design/scripts/poster/analyze.py --input-dir /path/to/posters

# Re-cluster + regenerate CSVs
~/.claude/skills/.venv/bin/python3 ~/.claude/skills/design/scripts/poster/cluster.py

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

  1. Orchestrate — project-management skill for TODO 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 — /ckm:brand → /ckm:design-system → randomly invoke /ck:ui-ux-pro-max OR /ck:frontend-design; HTML per idea × size
  5. Export — chrome-devtools or Playwright screenshot at exact px (2x deviceScaleFactor)
  6. Verify — Use Chrome MCP or chrome-devtools skill to visually inspect exported designs; fix layout/styling issues and re-export
  7. Report — Summary to plans/reports/ with design decisions
  8. 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

  1. Logo → scripts/logo/generate.py → Generate logo variants
  2. CIP → scripts/cip/generate.py --logo ... → Create 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

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
Poster Design Guide references/poster-design.md
Poster Prompt Engineering references/poster-prompt-engineering.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
scripts/poster/analyze.py Vision-extract design tokens from poster images
scripts/poster/cluster.py Cluster into 4 CSVs (style/palette/layout/texture)
scripts/poster/search.py BM25 search + brief assembly across poster CSVs
scripts/poster/generate.py Emit text prompt for any image-gen model

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

04 同仓库更多 Skills

wojtekidd
wojtekidd/risky

ckm:youtube-thumbnail-design

Design YouTube thumbnails with 17 styles, niche-specific guides, and CTR optimization. Generate complete thumbnails with text using Gemini Nano Banana Pro (4K text rendering). Actions: design, create, generate thumbnail. Niches: tech, gaming, education, cooking, fitness, business. Styles: facecam, before-after, listicle, diagram, whiteboard, bold-text, mystery, dark-dramatic. Features: AI generation with text baked in, brand identity, reference face, arrows, Google Font support.

设计师视觉设计
★ 0
wojtekidd
wojtekidd/risky

ck:web-frameworks

Build modern full-stack web applications with Next.js (App Router, Server Components, RSC, PPR, SSR, SSG, ISR), Turborepo (monorepo management, task pipelines, remote caching, parallel execution), and RemixIcon (3100+ SVG icons in outlined/filled styles). Use when creating React applications, implementing server-side rendering, setting up monorepos with multiple packages, optimizing build performance and caching strategies, adding icon libraries, managing shared dependencies, or working with TypeScript full-stack projects.

★ 0
wojtekidd
wojtekidd/risky

ck:ui-styling

Create beautiful, accessible user interfaces with shadcn/ui components (built on Radix UI + Tailwind), Tailwind CSS utility-first styling, and canvas-based visual designs. Use when building user interfaces, implementing design systems, creating responsive layouts, adding accessible components (dialogs, dropdowns, forms, tables), customizing themes and colors, implementing dark mode, generating visual designs and posters, or establishing consistent styling patterns across applications.

设计师视觉设计
★ 0
wojtekidd
wojtekidd/risky

ck:threejs

Build 3D web apps with Three.js (WebGL/WebGPU). 556 searchable examples, 60 API classes, 20 use cases. Actions: create 3D scene, load model, add animation, implement physics, build VR/XR. Topics: GLTF loader, PBR materials, particle effects, shadows, post-processing, compute shaders, TSL. Integrations: WebGPU, physics engines, spatial audio.

后端与接口
★ 0
wojtekidd
wojtekidd/risky

ck:sequential-thinking

Apply structured, reflective problem-solving for complex tasks requiring multi-step analysis, revision capability, and hypothesis verification. Use for complex problem decomposition, adaptive planning, analysis needing course correction, problems with unclear scope, multi-step solutions, and hypothesis-driven work.

★ 0
wojtekidd
wojtekidd/risky

ck:payment-integration

Integrate payments with SePay (VietQR), Polar (SaaS subscriptions), Stripe (global payments). Use for checkout, webhooks, QR codes, subscriptions, currency conversion, multi-provider order management, commission systems.

★ 0