Skip to main content Home Creators hoanghd218 zalocrm ak-design
ak-design Design brand identity, logos, banners, posters, and visual assets. Use for brand systems, design tokens, corporate identity programs, event/editorial/marketing posters, and visual campaign assets. Not for UI code patterns.
Jump to install Skills Marketplace Discover and explore AI skills built by the community.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Show prompt details A direct command skips the review prompt. Inspect the source before running it.
npx skills add https://github.com/hoanghd218/ZaloCRM --skill ak-designThe command stays on one line. Scroll horizontally to inspect it before copying.
Prefer a local copy? Download the files currently available to SkillsMP.
Download Zip Downloading... More from this repository
Interview-driven advisory skill. Analyzes a prompt or URL (GitHub issue, spec, doc), scouts the codebase, interviews the user one question at a time to reframe the problem into exact requirements and goals, then delivers honest advice: what to do, what to avoid, better alternatives, benefits and trade-offs. Use when the user asks for advice, a second opinion, a sanity check, requirement reframing before committing to a direction, or wants an existing plan or design pressure-tested (grilled) one question at a time.
Browser and desktop automation through the agent-browser CLI. Use for long autonomous browsing, compact page snapshots, screenshots, form filling, login/test flows without real Chrome profile state, scraping, exploratory QA, cloud browsers, Electron apps, Slack automation, and bug hunts.
name ak:design description Design brand identity, logos, banners, posters, and visual assets. Use for brand systems, design tokens, corporate identity programs, event/editorial/marketing posters, and visual campaign assets. Not for UI code patterns. user-invocable true when_to_use Invoke for brand systems and visual identity, not UI code. category frontend keywords ["brand","logo","CIP","banners","posters","identity"] argument-hint [design-type] [context] license MIT metadata {"author":"agentkit","version":"2.2.0"}
Design
Unified design skill: brand, tokens, UI, logo, CIP, slides, banners, social photos, icons, posters.
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 for event, editorial, marketing, and campaign visuals
Sub-skill Routing
Task Sub-skill Details Brand identity, voice, assets brandExternal skill Tokens, specs, CSS vars design-systemExternal skill shadcn/ui, Tailwind, code ui-stylingExternal skill Logo creation, AI generation Logo (built-in) references/logo-design.mdCIP mockups, deliverables CIP (built-in) references/cip-design.mdPresentations, pitch decks Slides (built-in) references/slides.mdBanners, covers, headers Banner (built-in) references/banner-sizes-and-styles.mdSocial media images/photos Social Photos (built-in) references/social-photos-design.mdSVG icons, icon sets Icon (built-in) references/icon-design.mdPosters (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 scripts/logo/search.py "tech startup modern" --design-brief -p "BrandName"
Logo: Search Styles/Colors/Industries python3 scripts/logo/search.py "minimalist clean" --domain style
python3 scripts/logo/search.py "tech professional" --domain color
python3 scripts/logo/search.py "healthcare medical" --domain industry
Logo: Generate with AI ALWAYS generate output logo images with white background.
python3 scripts/logo/generate.py --brand "TechFlow" --style minimalist --industry tech
python3 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 ask_user capability. 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 scripts/cip/search.py "tech startup" --cip-brief -b "BrandName"
CIP: Search Domains python3 scripts/cip/search.py "business card letterhead" --domain deliverable
python3 scripts/cip/search.py "luxury premium elegant" --domain style
python3 scripts/cip/search.py "hospitality hotel" --domain industry
python3 scripts/cip/search.py "office reception" --domain mockup
CIP: Generate Mockups
python3 scripts/cip/generate.py --brand "TopGroup" --logo /path/to/logo.png --deliverable "business card" --industry "consulting"
python3 scripts/cip/generate.py --brand "TopGroup" --logo /path/to/logo.png --industry "consulting" --set
python3 scripts/cip/generate.py --brand "TopGroup" --logo logo.png --deliverable "business card" --model pro
python3 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 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.mdLayout Patterns references/slides-layout-patterns.mdHTML Template references/slides-html-template.mdCopywriting references/slides-copywriting-formulas.mdStrategies references/slides-strategies.md
Banner Design (Built-in) 22 art direction styles across social, ads, web, print. Uses frontend-design, ai-artist, ai-multimodal, and browser capture tools.
Load references/banner-sizes-and-styles.md for complete sizes and styles reference.
Banner: Workflow
Gather requirements via ask_user capability — purpose, platform, content, brand, style, quantityResearch — Activate ui-ux-pro-max, browse Pinterest for referencesDesign — Create HTML/CSS banner with frontend-design, generate visuals with ai-artist/ai-multimodalExport — Screenshot to PNG at exact dimensions via ak:agent-browser, Chrome headless, or PlaywrightPresent — 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 scripts/icon/generate.py --prompt "settings gear" --style outlined
python3 scripts/icon/generate.py --prompt "shopping cart" --style filled --color "#6366F1"
python3 scripts/icon/generate.py --name "dashboard" --category navigation --style duotone
Icon: Generate Batch Variations python3 scripts/icon/generate.py --prompt "cloud upload" --batch 4 --output-dir ./icons
Icon: Multi-size Export python3 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 x 15-20 palettes x 10-14 layouts x 8-12 textures. Model-agnostic: emits text prompts only, so the prompt can be sent to Gemini Nano Banana, GPT Image, Imagen, Midjourney, or another image model.
Three axes (style, palette, texture) stay locked per call to preserve identity; layout and variation seed can change for visible variety. Five calls with the same --style should read as one series while still producing distinct poster compositions.
Load references/poster-design.md for the full guide and references/poster-prompt-engineering.md for prompt anatomy and model-specific tweaks.
Poster: Search Knowledge Base python3 scripts/poster/search.py --domain style --query "swiss editorial"
python3 scripts/poster/search.py --domain palette --query "warm earthy"
python3 scripts/poster/search.py --domain texture --query "risograph"
python3 scripts/poster/search.py --domain layout --query "centered grid"
Poster: Build Brief python3 scripts/poster/search.py --poster-brief --topic "AI Conference" --query "minimal grid"
Poster: Generate Prompt python3 scripts/poster/generate.py --topic "AI Conference"
python3 scripts/poster/generate.py --topic "AI Conference" --query "swiss" --aspect a2
python3 scripts/poster/generate.py --topic "AI Conference" --style "Swiss Editorial Grid" --seed 42
Pipe stdout into the selected image model. For a series, reuse --style and vary --seed.
Poster: Rebuild Knowledge Base
python3 scripts/poster/analyze.py --input-dir /path/to/posters
python3 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, and browser capture tools.
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 workAnalyze — Parse prompt: subject, platforms, style, brand context, content elementsIdeate — 3-5 concepts, present via ask_user capabilityDesign — the marketing brand skill → the marketing design-system skill → randomly invoke /ak:ui-ux-pro-max OR /ak:frontend-design; HTML per idea × sizeExport — ak:agent-browser, Chrome headless, or Playwright screenshot at exact px (2x deviceScaleFactor)Verify — Use Chrome MCP / chrome-devtools-mcp, ak:agent-browser, or Playwright to visually inspect exported designs; fix layout/styling issues and re-exportReport — Summary to plans/reports/ with design decisionsOrganize — 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 variantsCIP → scripts/cip/generate.py --logo ... → Create deliverable mockupsPresentation → Load references/slides-create.md → Build pitch deck
New Design System
Brand (brand skill) → Define colors, typography, voiceTokens (design-system skill) → Create semantic token layersImplement (ui-styling skill) → Configure Tailwind, shadcn/ui
References Topic File Design Routing references/design-routing.mdLogo Design Guide references/logo-design.mdLogo Styles references/logo-style-guide.mdLogo Colors references/logo-color-psychology.mdLogo Prompts references/logo-prompt-engineering.mdCIP Design Guide references/cip-design.mdCIP Deliverables references/cip-deliverable-guide.mdCIP Styles references/cip-style-guide.mdCIP Prompts references/cip-prompt-engineering.mdSlides Create references/slides-create.mdSlides Layouts references/slides-layout-patterns.mdSlides Template references/slides-html-template.mdSlides Copy references/slides-copywriting-formulas.mdSlides Strategy references/slides-strategies.mdBanner Sizes & Styles references/banner-sizes-and-styles.mdSocial Photos Guide references/social-photos-design.mdIcon Design Guide references/icon-design.mdPoster Design Guide references/poster-design.mdPoster Prompt Engineering references/poster-prompt-engineering.md
Scripts Script Purpose scripts/logo/search.pySearch logo styles, colors, industries scripts/logo/generate.pyGenerate logos with Gemini AI scripts/logo/core.pyBM25 search engine for logo data scripts/cip/search.pySearch CIP deliverables, styles, industries scripts/cip/generate.pyGenerate CIP mockups with Gemini scripts/cip/render-html.pyRender HTML presentation from CIP mockups scripts/cip/core.pyBM25 search engine for CIP data scripts/icon/generate.pyGenerate SVG icons with Gemini 3.1 Pro scripts/poster/search.pySearch poster styles, palettes, layouts, textures scripts/poster/generate.pyGenerate model-agnostic poster prompts scripts/poster/analyze.pyAnalyze poster references with Gemini vision scripts/poster/cluster.pyRebuild poster clusters and CSV data
Setup export GEMINI_API_KEY="your-key"
pip install google-genai pillow
Integration External sub-skills: brand, design-system, ui-styling
Related Skills: frontend-design, ui-ux-pro-max, ai-multimodal, agent-browser
