102.7K+Download
Skip to the usage guide
designby nextlevelbuilder

Design Skill.

A Claude Code and Codex skill for brand and design-system work: brand identity, design tokens, UI styling, logo generation, and corporate identity programs.

  • Brand & Design Systems
Download OpenDesignView usage guide
nextlevelbuilder/ui-ux-pro-max-skill · .claude/skills/design/SKILL.mdSKILL.md
--- name: design description: Comprehensive design skill: brand identity, design tokens, UI styling, logo generation (55 styles, Gemini, Atlas Cloud, or MuAPI 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). Actions: design logo, create CIP, generate mockups, … --- ## When to Use ## Sub-skill Routing ## Script Paths ## Logo Design (Built-in) ## CIP Design (Built-in) ## Slides (Built-in)
Front matter and section headings read from the upstream file on 2026-09-14 · 13,348 characters in full

01 What it does

What the design Skill Does in Claude Code and Codex

Summary, workflow and outputs, all read from the skill's SKILL.md.

From the SKILL.mdRead 2026-09-14 · not a recorded run

In the Skill's Own Terms

Unified design skill covering brand identity, design tokens, UI styling with shadcn/ui and Tailwind, logo generation (55 styles via Gemini, Atlas Cloud, or MuAPI), corporate identity programs with 50 deliverables, HTML presentations using Chart.js, banner design (22 art direction styles for social, ads, web, print), icon design (15 styles, SVG output via Gemini 3.1 Pro), and social media photo design across Facebook, Twitter, LinkedIn, YouTube, Instagram, Pinterest, TikTok, and Threads. Routes to external sub-skills for brand, design-system, and ui-styling, while providing built-in workflows for logo, CIP, slides, banners, icons, and social photos with Python scripts, AI generation, and HTML-to-screenshot export.

What it produces

  • Banner PNG screenshots at exact platform dimensions exported via chrome-devtools
  • SVG icon files in 15 styles with optional multi-size exports and batch variations
  • Social media images at platform-specific dimensions stored in organized asset directories
See the example prompt ↗

How It Works

  1. 01
    Route by Task Type

    The skill dispatches brand identity and voice to the brand sub-skill, tokens and specs to design-system, shadcn/ui and Tailwind code to ui-styling, and handles logo, CIP, slides, banners, icons, and social photos with built-in workflows.

  2. 02
    Generate Logos with AI Providers

    Run Python scripts to search 55 styles, 30 color palettes, and 25 industry guides, then generate logos via Gemini Nano Banana, Atlas Cloud, or MuAPI with white backgrounds.

  3. 03
    Create CIP Deliverables with Mockups

    Generate corporate identity program mockups for 50 deliverables using Gemini Flash or Pro models, optionally with logo overlay, then render HTML presentations of the output.

  4. 04
    Build Strategic HTML Presentations

    Create presentations with Chart.js integration, design tokens, and copywriting formulas by loading the slides creation workflow reference.

  5. 05
    Design Banners with HTML/CSS

    Gather requirements, research on Pinterest via ui-ux-pro-max, design HTML/CSS banners with frontend-design and ai-artist/ai-multimodal for visuals, then export via chrome-devtools at exact dimensions.

  6. 06
    Export and Verify Screenshots

    Use chrome-devtools or Playwright to screenshot designs at exact pixel dimensions with 2x device scale factor, then visually inspect and fix layout issues before final export.

02 Find your fit

When to Use the design Skill

Use the design skill in Claude Code or Codex when the job is brand and design-system work of this kind. Fit and limits below are taken from the skill's own file.

Good Fit

  • Creating brand identity packages with logo, corporate identity deliverables, and pitch deck presentations
  • Designing multi-platform social media images for Instagram, Facebook, LinkedIn, Twitter, Pinterest, and TikTok
  • Generating banners for social media covers, advertising campaigns, website headers, and print materials
  • Building design systems with semantic tokens, Tailwind configuration, and shadcn/ui components

Know the Boundaries

  • The icon generator produces SVG text output only, not raster image files

What to Provide

  • Gemini API keyConfigure GEMINI_API_KEY in the local environment for the Gemini generation path; do not paste secrets into the design brief. Other supported providers have their own setup.
  • MuAPI API key (optional)For the optional MuAPI logo-generation path, configure MUAPI_API_KEY locally rather than sharing the key in chat.
  • Logo file path for CIPPath to an existing logo PNG file to overlay on corporate identity deliverables when generating CIP mockups
  • Banner requirements via AskUserQuestionPurpose, platform, content, brand guidelines, art direction style, and quantity gathered interactively before banner design
  • Brand context for social photosBrand guidelines from the brand sub-skill and design tokens from design-system to maintain consistency across social media images

03 Inside the skill

Rules the design Skill Gives Claude Code and Codex

8 concrete instructions, defaults and limits the SKILL.md sets for the agent — the part of the file that changes the result.

  1. Always Generate Logos with White Backgrounds

    Logo generation must produce output images with white backgrounds in all cases.

  2. Script Paths Are Relative to Skill Directory

    Script paths in this skill and its references folder are relative to the directory containing SKILL.md, not the project root.

  3. Ask User About HTML Preview After Logo Generation

    After generating logos, always ask the user via AskUserQuestion if they want an HTML preview gallery, and if yes, invoke the ui-ux-pro-max skill to create it.

  4. Fix Failed Scripts Directly

    When Python scripts fail during execution, attempt to fix them directly rather than reporting the error.

  5. Use Recommended Logo Overlay for CIP

    When generating CIP mockups, using an existing logo file with the --logo flag is the recommended approach.

  6. Keep Banner Text Concise

    This source version recommends text occupying less than 20% of an ad banner. Treat that as its creative guideline, not a verified current Meta advertising rule.

  7. Use Python Instead of Python3 on Windows

    On Windows systems, replace python3 with python in all command examples throughout the skill.

  8. Banner Critical Content in Central Safe Zones

    Place all critical banner content within the central 70-80% safe zone to ensure visibility across platforms.

04 Put it to work

Install design in Claude Code or Codex

One npx skills add command, then a first task in your agent and a checklist for the result.

Add design to Claude Code, Codex or Your Agent

Run in your project; the installer asks which agent to add it to.

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

Generic skills CLI form for .claude/skills/design/SKILL.md; the repository may document its own path.

Give the Skill a First Brand and design-system Work Task

Written in the skill's own terms; replace the bracketed parts with your material.

Starter prompt
Design a complete brand package for [TechFlow], a B2B SaaS startup in the fintech space. Create a minimalist logo with tech-appropriate colors, generate a full corporate identity program including business cards, letterhead, and email signature, then build a 10-slide pitch deck presentation with our Q4 metrics [revenue chart data] and competitive positioning [market analysis]. Export everything with consistent design tokens.

Editorial starter example based on the source workflow; not a recorded run.

Check the First Result

What the SKILL.md itself says a correct result looks like:

  • Verify banner CTAs meet minimum 44px height requirement and are positioned bottom-right
  • Ensure print banners use 300 DPI, CMYK color mode, and include 3-5mm bleed

In OpenDesign check your installed version’s skill list and supported tools. If this skill is absent, consult the current import guide and the upstream setup instructions. The source review is not a live compatibility test.

Download OpenDesignRead the quickstart

05 Open source, traceable

Source, License and Verification

Where this page's facts come from, and when they were last checked.

Author
nextlevelbuilder
Repository
github.com/nextlevelbuilder/ui-ux-pro-max-skill Branch main
Skill file
.claude/skills/design/SKILL.md Content checksum recorded at verification; commit 7f69fed
License
MIT From LICENSE; SKILL.md says “MIT”.
Repository stars
127,450 GitHub snapshot taken 2026-09-14 for the whole nextlevelbuilder/ui-ux-pro-max-skill repository, which contains 7 skills in this catalog. Not a rating or usage count for design.
Verified by OpenDesign
2026-09-14 Source file, path, license text and star count were checked. Not bundled in OpenDesign main (checked 2026-08-28); a live run has not been recorded on this page.

Inside the SKILL.md

  1. When to UseLists use cases: brand identity, design tokens, UI styling, logos, CIP, presentations, banners, social photos, icons
  2. Sub-skill RoutingRoutes tasks to external brand/design-system/ui-styling skills or built-in logo/CIP/slides/banner/social/icon workflows
  3. Script PathsExplains that script paths are relative to skill directory, not project root
  4. Logo Design (Built-in)Commands for searching 55 styles and generating logos via Gemini, Atlas Cloud, or MuAPI with white backgrounds
  5. CIP Design (Built-in)Commands for searching 50 deliverables and generating corporate identity mockups with Flash or Pro models
  6. Slides (Built-in)References strategic HTML presentation creation with Chart.js and copywriting formulas
  7. Banner Design (Built-in)Workflow for designing 22 art direction styles using frontend-design, ai-artist, and chrome-devtools for export
  8. Icon Design (Built-in)Commands for generating SVG icons in 15 styles using Gemini 3.1 Pro text-only output
  9. Social Photos (Built-in)Workflow for multi-platform social image design from HTML to screenshot export with verification
  10. WorkflowsSequences for complete brand packages and new design system creation across sub-skills
  11. PrerequisitesPython requirement with Windows-specific python vs python3 command instructions
  12. SetupEnvironment variables for Gemini and MuAPI API keys plus Python package installation
The Skill's Own Description
“Comprehensive design skill: brand identity, design tokens, UI styling, logo generation (55 styles, Gemini, Atlas Cloud, or MuAPI 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). Actions: design logo, create CIP, generate mockups, build slides, design banner, generate icon, create social photos, social media images, brand identity, design system. Platforms: Facebook, Twitter, LinkedIn, YouTube, Instagram, Pinterest, TikTok, Threads, Google Ads.”

Front-matter description from SKILL.md. The full file is about 13,348 characters. Read the full file on GitHub.

06 Before you install

Questions About the design Skill

Answers come from the SKILL.md as read on 2026-09-14, not from a recorded run.

How do I run Python scripts on Windows?

Replace python3 with python in all command examples. For example, use python scripts/logo/search.py instead of python3 scripts/logo/search.py. The same applies to pip commands where you may need python -m pip install.

Design

Run design on a Real Brand and design-system Work Task.

Start with the example task above, supply the listed inputs and check the required tools. Review the output against the checklist before using it in a project.

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