design

nextlevelbuilder/ui-ux-pro-max-skill · Agent Skill

綜合設計技能：品牌識別、設計代幣、UI風格化、Logo生成（55種風格，Gemini AI），企業識別計劃（50種提供材料，CIP模板），HTML簡報（Chart.js），廣告設計（22種風格，社交/廣告/網頁/印刷），圖示設計（15種風格，SVG，Gemini 3.1 Pro），社交照片（HTML→截圖，多平臺）。動作：Logo開發、CIP建立、模板生成、幻燈片建立、廣告設計、圖示生成、社交照片建立、社交網路圖片、品牌識別、設計系統。平臺：Facebook、Twitter、LinkedIn、YouTube、Instagram、Pinterest、TikTok、Threads、Google Ads。

前往安裝 ↓

總覽

發布者nextlevelbuilder組織
儲存庫nextlevelbuilder/ui-ux-pro-max-skill ↗
技能資料夾design
星140,807
分支14,924
附帶檔案19
授權MIT
最近更新2026年10月26日
連結技能原始碼 ↗ · 儲存庫 ↗

Mozgi 檢查

我們在技能檔案中發現的內容。詳細資訊需訂閱。

安全性
中等風險 · 發現 2 個需要注意的地方
相容性
需要額外軟體
相似技能
找到 139 個相似技能
訂閱另含

安裝

技能就是一個含 SKILL.md 的資料夾。選擇你的代理，在專案根目錄的終端機（macOS、Linux 或 Windows 的 Git Bash）執行指令。

把提示貼到 Claude、Codex 或其他助理：它會自行檢查並安裝技能。

Install the “design” skill from mozgi.io (https://mozgi.io/skills/nextlevelbuilder-design/) for me.

1. Download the archive: https://mozgi.io/skills/nextlevelbuilder-design/download
   If it fails, take the skill folder from the source: https://github.com/nextlevelbuilder/ui-ux-pro-max-skill/tree/main/.claude/skills/design
2. Read SKILL.md and the other files. Check the skill is safe: no hidden commands, no sending data elsewhere, no scripts doing something other than described. If anything looks suspicious, stop and tell me.
3. Put the “design” folder into your agent's skills folder: .claude/skills/ for Claude Code, .agents/skills/ for Codex, .cursor/skills/ for Cursor, .gemini/skills/ for Gemini CLI. Inside the project if we are in one, otherwise in the home folder (~/.claude/skills/ etc.).
4. Make sure <skills folder>/design/SKILL.md exists.
5. Briefly tell me what this skill does and offer to try it on my task.

If you cannot do a step yourself, tell me what to click or type.

技能檔案

19 個檔案 下載 ZIP

安裝前請先檢視 SKILL.md 與相關檔案。點擊檔案即可預覽。

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 | Bundled sibling skill |

| Tokens, specs, CSS vars | design-system | Bundled sibling skill |

| shadcn/ui, Tailwind, code | ui-styling | Bundled sibling 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 |

Script Paths

Script paths in this skill and its references/ are relative to the directory that contains this SKILL.md, not to the project: scripts/<file> is this skill's own scripts/ folder, and ../<skill>/scripts/<file> is a sibling sub-skill installed alongside it. Build the full path from that directory (Claude Code reports it as the skill's base directory when the skill loads) and keep the working directory at the project root — the scripts read and write project files such as docs/brand-guidelines.md, assets/design-tokens.json or src/ relative to it.

Logo Design (Built-in)

55+ styles, 30 color palettes, 25 industry guides. Gemini Nano Banana, Atlas

Cloud, and MuAPI image generation.

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
python3 scripts/logo/generate.py --brand "TechFlow" --provider atlas
python3 scripts/logo/generate.py --brand "TechFlow" --provider muapi
python3 scripts/logo/generate.py --brand "TechFlow" --provider muapi --muapi-model nano-banana-pro

IMPORTANT: When scripts fail, try to fix them directly.

After generation, ALWAYS ask user about HTML preview via AskUserQuestion. If yes, use the bundled ui-ux-pro-max skill for the 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

# With logo (RECOMMENDED)
python3 scripts/cip/generate.py --brand "TopGroup" --logo /path/to/logo.png --deliverable "business card" --industry "consulting"

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

# Pro model (4K text)
python3 scripts/cip/generate.py --brand "TopGroup" --logo logo.png --deliverable "business card" --model pro

# Without logo
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). Override the ids with GEMINI_FLASH_IMAGE_MODEL / GEMINI_PRO_IMAGE_MODEL.

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.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. This workflow needs nothing outside the bundle: references/banner-sizes-and-styles.md and the bundled ui-ux-pro-max skill for style and palette guidance. Browser research, image generation, and screenshot capture are optional runtime capabilities; when unavailable, use supplied assets, CSS-built visuals, and the runtime's standard preview or capture workflow.

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 — Read references/banner-sizes-and-styles.md and use the bundled ui-ux-pro-max skill for style and palette guidance; if browser research is available and permitted, collect 3–5 references

3. Design — Create the HTML/CSS banner at exact platform dimensions; use supplied assets or CSS-built visuals, or an authorized image-generation capability if the runtime provides one

4. Export — Capture PNG at exact dimensions with the runtime's browser or screenshot capability; if unavailable, deliver the HTML/CSS source and mark PNG export as pending

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

Social Photos (Built-in)

Multi-platform social image design: HTML/CSS → screenshot export. Uses the bundled ui-ux-pro-max, brand, and design-system skills; screenshot export runs through Chrome headless, Playwright, or Puppeteer (see the reference).

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

Social Photos: Workflow

1. Orchestrate — Track the steps below with the runtime's native task list; 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 — bundled brand → design-system → ui-ux-pro-max skills; HTML per idea × size

5. Export — Chrome headless, Playwright, or Puppeteer screenshot at exact px (2x device scale factor where the tool supports it; see the reference)

6. Verify — Open the exported PNGs in an available browser or image viewer and inspect them; fix layout/styling issues and re-export

7. Report — Summary to plans/reports/ with design decisions

8. Organize — Sort output files and reports into the project's asset directories

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 |

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 |

Prerequisites

Python: This skill uses Python scripts. On Windows, use python instead of python3 (e.g., python scripts/logo/search.py instead of python3 scripts/logo/search.py).

Check if Python is installed:

python3 --version || python --version

Setup

export GEMINI_API_KEY="your-key"  # https://aistudio.google.com/apikey
pip install google-genai pillow

# Optional MuAPI provider (no extra Python package required)
export MUAPI_API_KEY="your-key"

MuAPI uses the asynchronous model endpoint and prediction result API. See the

MuAPI API reference ↗ for authentication

and the nano-banana model contract ↗

or nano-banana-pro model contract ↗

for the current model-specific schemas. The logo generator supports both documented

model slugs and sends their shared required prompt plus optional aspect_ratio

fields; the Pro model also accepts an optional resolution field that this focused

logo workflow leaves at the provider default.

> Note for Windows: Use python instead of pip where needed (e.g., python -m pip install ...).

Integration

Bundled sub-skills: brand, design-system, ui-styling

Related Skills: ui-ux-pro-max

常見問題

design 技能有什麼用途？

綜合設計技能：品牌識別、設計代幣、UI風格化、Logo生成（55種風格，Gemini AI），企業識別計劃（50種提供材料，CIP模板），HTML簡報（Chart.js），廣告設計（22種風格，社交/廣告/網頁/印刷），圖示設計（15種風格，SVG，Gemini 3.1 Pro），社交照片（HTML→截圖，多平臺）。動作：Logo開發、CIP建立、模板生成、幻燈片建立、廣告設計、圖示生成、社交照片建立、社交網路圖片、品牌識別、設計系統。平臺：Facebook、Twitter、LinkedIn、YouTube、Instagram、Pinterest、TikTok、Threads、Google Ads。

如何安裝 design？

打開本頁的「安裝」區塊並選擇你的代理 — Claude Code、Codex、Cursor 或 Gemini CLI：那裡有把技能資料夾複製到正確位置的現成指令。也可以複製「透過助理」分頁中的提示，讓助理自行檢查並安裝技能。

design 適用哪些 AI 模型？

技能是純 Markdown 指示（Agent Skills 格式），因此 design 適用任何讀取 SKILL.md 的代理：Claude Code、Codex、Cursor、Gemini CLI、GitHub Copilot、OpenCode 等。只有在任務符合技能描述時，模型才會載入指示。

design 是免費的嗎？

此技能由 nextlevelbuilder 公開發布，採用 MIT 授權。技能本身免費 — 你只需向 AI 供應商支付實際使用的 token 費用。

安裝技能安全嗎？

技能是代理會遵循的指示，安裝前請閱讀 SKILL.md 及相關檔案。技能資料夾中的腳本只有在代理執行時才會運行 — 留意它的動作，不要授予多餘權限。

技能和 MCP 伺服器或外掛有何不同？

MCP 伺服器或外掛為模型提供新工具 — 會執行並回傳結果的程式碼。技能提供的是知識與流程：如何處理任務、要遵循哪些步驟、好的成果長什麼樣子。它不需要伺服器或 API 金鑰。

相關技能

所有技能 →
slides 建立具有策略性的HTML簡報，結合Chart.js、設計令牌、響應式佈局、文字複製公式和簡報上下文策略。 nextlevelbuilder141k ui-styling 使用shadcn/ui（基於Radix UI + Tailwind）的元件、Tailwind CSS的公用程式樣式和基於畫布的視覺設計，打造漂亮且易用的使用者介面。在建構使用者介面、實現設計系統、建立響應式佈局、新增無障礙元件（對話方塊、下拉清單、表單、表格）、自訂主題和顏色、實現暗黑模式、生成視覺設計和海報，或在所有應用程式中建立一致的樣式模式時使用。 nextlevelbuilder141k ui-ux-pro-max 全面的UI/UX設計智慧，包含50+樣式、97色板和9技術堆疊，打造專業的介面。 nextlevelbuilder141k banner-design 設計社交媒體、廣告、網站英雄、創意資產和印刷的橫幅。幾種具有AI生成視覺效果的藝術方向選擇。動作：開發、建立、生成橫幅。平臺：Facebook、Twitter/X、LinkedIn、YouTube、Instagram、Google Display、網站英雄、印刷。風格：極簡主義、漸變色、粗體字型、基於照片、插圖、幾何、復古、玻璃形態、3D、霓虹、雙色調、編輯、拼貼。使用ui-ux-pro-max、frontend-design、ai-artist、ai-multimodal技能。 nextlevelbuilder141k design-system 令牌架構、元件規格、幻燈片生成。三層式令牌（原始→語義→元件）、CSS 變數、間距/字型比例、元件規格、策略性幻燈片建立。適用於設計令牌、系統設計、品牌呈現。 nextlevelbuilder141k brand 品牌聲音，視覺身份，訊息框架，資產管理，品牌一致性。啟用品牌內容，語調，行銷資產，品牌合規，風格指南。 nextlevelbuilder141k