القائمة
Unified design router: logo, CIP, banners, slides, icons, social photos, design tokens. Use for any visual asset creation, brand identity, or presentation design.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
Founder voice enforcement for all written output. Apply to any text another person will read.
Propose a principle edit to a skill or persona file based on a (agent_output, human_output) correction pair. Outputs a proposal markdown for human review - never auto-edits the target file.
Engineering discipline distilled from a forensic read of one model's work. Use when building a feature, fixing a bug, writing tests, hardening a data path, or running any task that spans multiple files, sources, or sessions. Two layers: how to RUN the task (stage it, verify each stage with a check that can fail, write done-criteria) and how to WRITE the code (recon before edit, verify against a copy with a negative self-test, single-writer chokepoints, scar-anchored why-comments). Ships a paired hook that deterministically blocks a test from touching live data, the one habit a machine can enforce.
PRD creation and PRD execution operating system. Use when the founder asks to turn a rough idea into a PRD, run a Codex review on a PRD or issue, decompose an approved PRD into issue specs, or execute an issue with scope enforcement and receipt-based closeout. Not for general product ideation or casual drafting; this is the formal gated workflow.
UI/UX design intelligence with 50+ styles, 161 palettes, 57 font pairings, 99 UX guidelines, and 25 chart types. Searchable database with priority-based recommendations for web and mobile.
Anti-hallucination research mode. Toggle on to enforce citation requirements, source grounding, and "I don't know" behavior. Toggle off for creative work.
| name | design |
| description | Unified design router: logo, CIP, banners, slides, icons, social photos, design tokens. Use for any visual asset creation, brand identity, or presentation design. |
| argument-hint | [design-type] [context] |
| license | MIT |
| metadata | {"author":"claudekit","version":"2.1.0"} |
Unified design skill: brand, tokens, UI, logo, CIP, slides, banners, social photos, icons.
| 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 |
55+ styles, 30 color palettes, 25 industry guides. Gemini Nano Banana models.
python3 ${CLAUDE_SKILL_DIR}/scripts/logo/search.py "tech startup modern" --design-brief -p "BrandName"
python3 ${CLAUDE_SKILL_DIR}/scripts/logo/search.py "minimalist clean" --domain style
python3 ${CLAUDE_SKILL_DIR}/scripts/logo/search.py "tech professional" --domain color
python3 ${CLAUDE_SKILL_DIR}/scripts/logo/search.py "healthcare medical" --domain industry
ALWAYS generate output logo images with white background.
python3 ${CLAUDE_SKILL_DIR}/scripts/logo/generate.py --brand "TechFlow" --style minimalist --industry tech
python3 ${CLAUDE_SKILL_DIR}/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.
50+ deliverables, 20 styles, 20 industries. Gemini Nano Banana (Flash/Pro).
python3 ${CLAUDE_SKILL_DIR}/scripts/cip/search.py "tech startup" --cip-brief -b "BrandName"
python3 ${CLAUDE_SKILL_DIR}/scripts/cip/search.py "business card letterhead" --domain deliverable
python3 ${CLAUDE_SKILL_DIR}/scripts/cip/search.py "luxury premium elegant" --domain style
python3 ${CLAUDE_SKILL_DIR}/scripts/cip/search.py "hospitality hotel" --domain industry
python3 ${CLAUDE_SKILL_DIR}/scripts/cip/search.py "office reception" --domain mockup
# With logo (RECOMMENDED)
python3 ${CLAUDE_SKILL_DIR}/scripts/cip/generate.py --brand "TopGroup" --logo /path/to/logo.png --deliverable "business card" --industry "consulting"
# Full CIP set
python3 ${CLAUDE_SKILL_DIR}/scripts/cip/generate.py --brand "TopGroup" --logo /path/to/logo.png --industry "consulting" --set
# Pro model (4K text)
python3 ${CLAUDE_SKILL_DIR}/scripts/cip/generate.py --brand "TopGroup" --logo logo.png --deliverable "business card" --model pro
# Without logo
python3 ${CLAUDE_SKILL_DIR}/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)
python3 ${CLAUDE_SKILL_DIR}/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.
Strategic HTML presentations with Chart.js, design tokens, copywriting formulas.
Load references/slides-create.md for the creation workflow.
| 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 |
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.
AskUserQuestion — purpose, platform, content, brand, style, quantityui-ux-pro-max, browse Pinterest for referencesfrontend-design, generate visuals with ai-artist/ai-multimodalchrome-devtools| Platform | Type | Size (px) |
|---|---|---|
| Cover | 820 x 312 | |
| Twitter/X | Header | 1500 x 500 |
| Personal | 1584 x 396 | |
| YouTube | Channel art | 2560 x 1440 |
| Story | 1080 x 1920 | |
| Post | 1080 x 1080 | |
| Google Ads | Med Rectangle | 300 x 250 |
| Website | Hero | 1920 x 600-1080 |
| 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 |
15 styles, 12 categories. Gemini 3.1 Pro Preview generates SVG text output.
python3 ${CLAUDE_SKILL_DIR}/scripts/icon/generate.py --prompt "settings gear" --style outlined
python3 ${CLAUDE_SKILL_DIR}/scripts/icon/generate.py --prompt "shopping cart" --style filled --color "#6366F1"
python3 ${CLAUDE_SKILL_DIR}/scripts/icon/generate.py --name "dashboard" --category navigation --style duotone
python3 ${CLAUDE_SKILL_DIR}/scripts/icon/generate.py --prompt "cloud upload" --batch 4 --output-dir ./icons
python3 ${CLAUDE_SKILL_DIR}/scripts/icon/generate.py --prompt "user profile" --sizes "16,24,32,48" --output-dir ./icons
| 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.
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.
project-management skill for TODO tasks; parallel subagents for independent work (if Agent tool available; otherwise generate sizes sequentially)AskUserQuestion/ckm:brand → /ckm:design-system → randomly invoke /ck:ui-ux-pro-max OR /ck:frontend-design; HTML per idea × sizechrome-devtools or Playwright screenshot at exact px (2x deviceScaleFactor)chrome-devtools skill to visually inspect exported designs; fix layout/styling issues and re-exportplans/reports/ with design decisionsassets-organizing skill to sort output files and reports| 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 | 1200×627 | |
| YT Thumb | 1280×720 | 1000×1500 |
scripts/logo/generate.py → Generate logo variantsscripts/cip/generate.py --logo ... → Create deliverable mockupsreferences/slides-create.md → Build pitch deck| 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 |
| 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 |
export GEMINI_API_KEY="your-key" # https://aistudio.google.com/apikey
pip install google-genai pillow
External sub-skills: brand, design-system, ui-styling Related Skills: frontend-design, ui-ux-pro-max, ai-multimodal, chrome-devtools