Execute qualquer Skill no Manus
com um clique

Execute qualquer Skill no Manus com um clique

ckm-design

Estrelas95.687

Forks10.044

Atualizado21 de junho de 2026 às 13:02

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

Instalação

Instalar com Codex ou Claude Copie este prompt, cole no Codex, Claude ou outro assistente e deixe que ele revise a página da skill e instale para você.

Executar no Manus

Fonte

nextlevelbuilder

nextlevelbuilder/ui-ux-pro-max-skill

Abrir repositório GitHub Ver repositórios do creator

Download

Executar no Manus

Explorador de arquivos

35 arquivos

SKILL.md

readonly

Mais deste repositório

mesmo repositório

ckm-design-system

nextlevelbuilder/ui-ux-pro-max-skill

Token architecture, component specifications, and slide generation. Three-layer tokens (primitive→semantic→component), CSS variables, spacing/typography scales, component specs, strategic slide creation. Use for design tokens, systematic design, brand-compliant presentations.

2026-06-2295.7k

ckm-ui-styling

nextlevelbuilder/ui-ux-pro-max-skill

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.

2026-06-2295.7k

ckm-brand

nextlevelbuilder/ui-ux-pro-max-skill

Brand voice, visual identity, messaging frameworks, asset management, brand consistency. Activate for branded content, tone of voice, marketing assets, brand compliance, style guides.

2026-06-2195.7k

ckm-banner-design

nextlevelbuilder/ui-ux-pro-max-skill

Design banners for social media, ads, website heroes, creative assets, and print. Multiple art direction options with AI-generated visuals. Actions: design, create, generate banner. Platforms: Facebook, Twitter/X, LinkedIn, YouTube, Instagram, Google Display, website hero, print. Styles: minimalist, gradient, bold typography, photo-based, illustrated, geometric, retro, glassmorphism, 3D, neon, duotone, editorial, collage. Uses ui-ux-pro-max, frontend-design, ai-artist, ai-multimodal skills.

2026-06-2195.7k

ui-ux-pro-max

nextlevelbuilder/ui-ux-pro-max-skill

UI/UX design intelligence for web and mobile. Includes 50+ styles, 161 color palettes, 57 font pairings, 161 product types, 99 UX guidelines, and 25 chart types across 10 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui, and HTML/CSS). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, and check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, and mobile app. Elements: button, modal, navbar, sidebar, card, table, form, and chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, and flat design. Topics: color systems, accessibility, animation, layout, typography, font pairing, spacing, interaction states, shadow, and gradient. Integrations: shadcn/ui MCP for component search and examples.

2026-06-2195.7k

ckm-slides

nextlevelbuilder/ui-ux-pro-max-skill

Create strategic HTML presentations with Chart.js, design tokens, responsive layouts, copywriting formulas, and contextual slide strategies.

2026-06-2195.7k

name	ckm:design
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). 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.
argument-hint	[design-type] [context]
license	MIT
metadata	{"author":"claudekit","version":"2.1.0"}

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

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

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

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

Orchestrate — project-management skill for TODO tasks; parallel subagents for independent work
Analyze — Parse prompt: subject, platforms, style, brand context, content elements
Ideate — 3-5 concepts, present via AskUserQuestion
Design — /ckm:brand → /ckm:design-system → randomly invoke /ck:ui-ux-pro-max OR /ck:frontend-design; HTML per idea × size
Export — chrome-devtools or Playwright screenshot at exact px (2x deviceScaleFactor)
Verify — Use Chrome MCP or chrome-devtools skill to visually inspect exported designs; fix layout/styling issues and re-export
Report — Summary to plans/reports/ with design decisions
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

Logo → scripts/logo/generate.py → Generate logo variants
CIP → scripts/cip/generate.py --logo ... → Create deliverable mockups
Presentation → Load references/slides-create.md → Build pitch deck

New Design System

Brand (brand skill) → Define colors, typography, voice
Tokens (design-system skill) → Create semantic token layers
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

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

Integration

External sub-skills: brand, design-system, ui-styling Related Skills: frontend-design, ui-ux-pro-max, ai-multimodal, chrome-devtools