Skip to main content ホーム クリエイター inugamidev ultrathink-oss ui-ux-pro-max
ui-ux-pro-max Advanced UI/UX design intelligence — InuVerse edition. 84 styles, 160 palettes, 73 font pairings, 161 product types, 98 UX guidelines, 25 chart types across 16 stacks. Absorbs ui, ui-design, ui-styling, ui-ux-pro, ui-design-pipeline, stitch, web-design-guidelines. Routes all UI structure/visual/interaction work.
インストールへ移動 Skills Marketplace コミュニティが作成したAIスキルを発見・探索
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
直接コマンドでは確認用 Prompt が省略されます。実行前にソースを確認してください。
npx skills add https://github.com/InugamiDev/ultrathink-oss --skill ui-ux-pro-maxコマンドは1行のまま表示されます。コピー前に横へスクロールして全体を確認してください。
ローカルで確認しますか？SkillsMP が現在取得できるファイルをダウンロードできます。
Zipをダウンロード ダウンロード中... このリポジトリの他の Skills Unified design foundations — design system architecture, tokens, component specs, visual principles, creative vision, figma integration, plus brand design system loader (66 real brands via DESIGN.md). Absorbs design, design-system, design-systems, design-principles, design-router, creative-vision, figma, design-md.
Render, summarize, and present markdown documents and structured content in multiple output modes
Ultra UI skill - combines Google's DESIGN.md spec (machine-readable design tokens) with the ui-ux-pro-max knowledge base (91 styles, 161 palettes, 73 font pairings, 161 products, 104 UX guidelines, 25 chart types). Generates lint-clean DESIGN.md files, validates token references and WCAG contrast, exports Tailwind/DTCG tokens, and diffs design systems version-over-version.
name ui-ux-pro-max description Advanced UI/UX design intelligence — InuVerse edition. 84 styles, 160 palettes, 73 font pairings, 161 product types, 98 UX guidelines, 25 chart types across 16 stacks. Absorbs ui, ui-design, ui-styling, ui-ux-pro, ui-design-pipeline, stitch, web-design-guidelines. Routes all UI structure/visual/interaction work. layer domain category design triggers ["/design-pipeline","/ui-pipeline","SaaS dashboard","UI review","UX improvement","WCAG compliance","accessibility audit","add styles","admin panel","ai design","award-winning","beautify","build UI","build a dashboard","build a form","build a landing page","build component","color scheme","complex layout","component design","create a website","create dialog","create screen","create table","create the UI for","create ui","css variables","dark mode","design a","design a component","design a page","design card","design from scratch","design guidelines","design modal","design navigation","design review","design screen","design sidebar","design system","design this screen","design to code","design with stitch","elevate ui","fix ui","generate design","generate ui","improve ui","interface design","landing page design","looks bad","looks ugly","make a page","make it look better","make it look good","make it pretty","mockup","needs polish","pen file","pencil design","pixel perfect","polish the ui","premium UI","professional design","redesign","responsive design","shadcn","stitch","style component","style it","style this","tailwind","theme","ui","ui components","ui design","ui guidelines","user interface","web design","wireframe to code"]
ui-ux-pro-max
Advanced UI/UX design intelligence — InuVerse edition. 84 styles, 160 palettes, 73 font pairings, 161 product types, 98 UX guidelines, 25 chart types across 16 stacks. Searchable database with priority-based recommendations.
Absorbs: ui, ui-design, ui-styling, ui-ux-pro, ui-design-pipeline, stitch, web-design-guidelines.
Decision Tree
What does the user need?
│
├─ "Build / design a page or component"
│ ├─ From scratch, wants AI generation → /stitch generate
│ ├─ From scratch, wants code → /ui build
│ ├─ Has a .pen file to edit → /stitch edit
│ └─ Wants full pipeline (inspire→code) → /design-pipeline
│
├─ "Choose style / color / font / theme"
│ └─ CLI search → --design-system, then --domain for details
│
├─ "Review / audit existing UI"
│ ├─ Quick check → Pre-Delivery Checklist (below)
│ ├─ Full audit → /ui fix or /ui ship
│ └─ Web Interface Guidelines → Fetch vercel-labs guidelines
│
├─ "Fix / improve existing UI"
│ ├─ Broken or inconsistent → /ui fix
│ ├─ Boring or generic → /ui elevate
│ ├─ Pre-launch quality pass → /ui ship
│ └─ Brand identity → /ui brand
│
├─ "Match a real brand's style"
│ └─ design-kit Brand Reference → npx getdesign@latest add <brand>
│
└─ "Implement Stitch/Pencil design as code"
└─ /stitch implement
Data Assets
Domain Count File Example Keywords Styles 91 data/styles.csvglassmorphism, minimalism, bento grid, spatial design, calm UI Color palettes 160 data/colors.csvsaas, ecommerce, healthcare, beauty, fintech Font pairings 73 data/typography.csvelegant, playful, professional, modern Product types 161 data/products.csvSaaS, e-commerce, portfolio, healthcare UX guidelines 105 data/ux-guidelines.csvanimation, accessibility, view transitions, APCA, popover Chart types 25
trend, comparison, timeline, funnel, pie
Google Fonts 1,923 data/google-fonts.csvsans serif, monospace, japanese, variable
Stacks 16 data/stacks/*.csvangular, astro, flutter, html-tailwind, jetpack-compose, laravel, nextjs, nuxt-ui, nuxtjs, react-native, react, shadcn, svelte, swiftui, threejs, vue
CLI Search Workflow
Prerequisites Python 3 must be installed (python3 --version).
Step 1: Generate Design System (start here for new projects) python3 .claude/skills/ui-ux-pro-max/scripts/search.py "<product_type> <industry> <keywords>" --design-system [-p "Project Name" ]
Searches domains in parallel (product, style, color, landing, typography), applies reasoning rules, returns complete design system with pattern, style, colors, typography, effects, and anti-patterns.
Persist for cross-session use:
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "<query>" --design-system --persist -p "Project Name" [--page "dashboard" ]
Creates design-system/MASTER.md + optional design-system/pages/{page}.md overrides.
Step 2: Deep-Dive with Domain Searches python3 .claude/skills/ui-ux-pro-max/scripts/search.py "<keyword>" --domain <domain> [-n <max_results>]
Need Domain Example Product type patterns product--domain product "entertainment social"Style options style--domain style "glassmorphism dark"Color palettes color--domain color "entertainment vibrant"Font pairings typography--domain typography "playful modern"Chart recommendations chart--domain chart "real-time dashboard"UX best practices ux--domain ux "animation accessibility"Individual Google Fonts google-fonts--domain google-fonts "sans serif popular variable"Landing structure landing--domain landing "hero social-proof"AI prompt / CSS keywords prompt--domain prompt "minimalism"
Step 3: Stack Guidelines python3 .claude/skills/ui-ux-pro-max/scripts/search.py "<keyword>" --stack <stack-name>
16 stacks available: angular, astro, flutter, html-tailwind, jetpack-compose, laravel, nextjs, nuxt-ui, nuxtjs, react-native, react, shadcn, svelte, swiftui, threejs, vue.
Output Formats
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "fintech crypto" --design-system
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "fintech crypto" --design-system -f markdown
Query Tips
Multi-dimensional keywords : combine product + industry + tone — "entertainment social vibrant content-dense" not just "app"Try different angles : "playful neon" → "vibrant dark" → "content-first minimal"Use --design-system first, then --domain to deep-dive any dimension
/ui — Orchestrator Modes /ui fix [target] — Fix broken or inconsistent UI
/ui elevate [target] — Make good UI exceptional
/ui build [target] — Create new UI from scratch
/ui ship [target] — Pre-launch quality pass
/ui brand [target] — Apply/strengthen brand identity
/ui full [target] — Everything, maximum quality
/ui [target] — Auto-detect mode from context
[target] = file path, page name, URL, or component name. If omitted, targets cwd.
Always Audit First Every mode starts with impeccable-audit. Report findings, confirm mode, then execute.
Mode Chains Mode Chain fix audit → normalize → harden → clarify → polish elevate audit → critique → bolder → colorize → animate → delight → polish build audit → frontend-design → design-system → normalize → accessibility → polish ship audit → harden → adapt → optimize → accessibility → polish brand audit → colorize → normalize → bolder → delight → polish full audit → critique → frontend-design → normalize → colorize → bolder → animate → delight → harden → adapt → optimize → clarify → polish
Auto-Detection Signal Mode "broken", "bug", "wrong", "fix" fix "boring", "generic", "bland", "better" elevate "new", "create", "build", "from scratch" build "launch", "deploy", "ship", "ready" ship "brand", "identity", "colors", "logo" brand No signal / "everything" elevate (default)
Execution Rules
Always audit first — never skip impeccable-audit
Report before acting — show findings, confirm mode
Sequential, not parallel — each skill's output informs the next
Stop on critical blocker — fix critical a11y/security issues first
One file at a time
/stitch — AI Design Pipeline /stitch generate "modern SaaS dashboard with sidebar nav"
/stitch edit path/to/design.pen
/stitch implement [stitch-screen-id or .pen file]
/stitch extract [screenshot or URL]
/stitch full "e-commerce product page with reviews"
Mode: generate (Stitch AI)
List/create project → mcp__stitch__list_projects / create_project
Optional: create design system → create_design_system + update_design_system
Generate screen → generate_screen_from_text (can take minutes — DO NOT RETRY on timeout)
Retrieve details → get_screen
Optional: variants → generate_variants / edits → edit_screens
Full Stitch MCP reference (12 tools): references/stitch-workflow.md
Mode: edit (Pencil .pen files)
Open: mcp__pencil__open_document(filePathOrNew)
State: mcp__pencil__get_editor_state()
Guidelines: mcp__pencil__get_guidelines(category)
Read: mcp__pencil__batch_get(patterns, nodeIds)
Design: mcp__pencil__batch_design(operations) — max 25 ops per call
Validate: mcp__pencil__get_screenshot() — always validate visually
Export: mcp__pencil__export_nodes()
Rules : NEVER read .pen files with Read/Grep — contents are encrypted. Only use mcp__pencil__* tools.
Mode: implement Extract design reference (Stitch HTML/CSS or Pencil exports) → route to /ui build.
Mode: extract Extract design DNA from Stitch screens (get_screen), Pencil files (get_variables, search_all_unique_properties), or screenshots → output as Tailwind config / CSS custom properties.
Mode: full Generate (Stitch) → Refine (Pencil, optional) → Implement (UI skill chain) → Verify (screenshot comparison).
Auto-Detection Signal Mode "generate", "create", "design me", "make a" generate ".pen file", "pencil", "edit design" edit "implement", "code", "build", "convert" implement "extract", "DNA", "tokens from" extract "full", "end to end", prompt text full
/design-pipeline — INSPIRE → DEFINE → ILLUSTRATE → IMPLEMENT For distinctive UI that avoids generic AI aesthetics. Every phase must complete before the next.
Phase 1: INSPIRE Find 3-5 real-world design references. At least 1 cross-domain reference.
Source Best For Dribbble UI components, micro-interactions Behance Full project case studies Awwwards Cutting-edge web design Mobbin Mobile app patterns Godly Web design showcase Land-book Landing pages
For each reference: extract typography, colors, spacing, layout, unique elements.
Phase 2: DEFINE Synthesize inspiration into concrete design system BEFORE writing code:
Typography : Font stack + fluid clamp() type scale + loading strategyColors : Background, surface, primary, text, muted, border, accent, semantic (success/error/warning)Spacing : 4px base unit scale, container widths, grid columns, rhythm rulesComponents : Button/card/input tokens (radius, padding, shadow, states)
Phase 3: ILLUSTRATE Generate custom assets for hero, empty states, error pages, marketing.
Backends (priority order): Puter.js (free, zero setup) → Gemini API (free tier) → gemini-webapi (cookie-based) → TinyFish (500 free steps) → Playwright (local).
Prompt rules: specify exact style, include hex values from Phase 2, describe composition, state intended use, specify dimensions, say what NOT to include.
Phase 4: IMPLEMENT Every decision was made in Phases 1-3. Now code it.
Implementation order: CSS tokens → layout → typography → color → spacing → components → composition → polish → validation.
Design Philosophy
Functionality first — Make it work before making it prettyLayout second — Structure content, establish hierarchyUI polish last — Apply styling, spacing, effectsAnti-generic — The #1 enemy is generic design. Every project should feel unique.Creative spacing — Spacing should breathe and have rhythm, not be rigid everywhereSwiss-flexible grid — Swiss grid for structure, allow intentional offsets for emphasisGrid for components — Grid systems organize components and text, not "grid UI everywhere"
Pipeline pencil.dev → framer → code
Design in pencil.dev (.pen files), prototype in Framer, implement in code.
Quick Reference — UX Rules by Priority 98 rules across 10 categories. Use --domain ux for details. Rule names below for quick lookup.
1. Accessibility (CRITICAL) color-contrast · focus-states · alt-text · aria-labels · keyboard-nav · form-labels · skip-links · heading-hierarchy · color-not-only · dynamic-type · reduced-motion · voiceover-sr · escape-routes · keyboard-shortcuts
2. Touch & Interaction (CRITICAL) touch-target-size (44×44pt / 48×48dp) · touch-spacing (8px+) · hover-vs-tap · loading-buttons · error-feedback · cursor-pointer · gesture-conflicts · tap-delay · standard-gestures · system-gestures · press-feedback · haptic-feedback · gesture-alternative · safe-area-awareness · no-precision-required · swipe-clarity · drag-threshold
3. Performance (HIGH) image-optimization · image-dimension · font-loading · font-preload · critical-css · lazy-loading · bundle-splitting · third-party-scripts · reduce-reflows · content-jumping · lazy-load-below-fold · virtualize-lists · main-thread-budget · progressive-loading · input-latency · tap-feedback-speed · debounce-throttle · offline-support · network-fallback
4. Style Selection (HIGH) style-match · consistency · no-emoji-icons · color-palette-from-product · effects-match-style · platform-adaptive · state-clarity · elevation-consistent · dark-mode-pairing · icon-style-consistent · system-controls · blur-purpose · primary-action
5. Layout & Responsive (HIGH) viewport-meta · mobile-first · breakpoint-consistency · readable-font-size (16px+ mobile) · line-length-control · horizontal-scroll · spacing-scale (4pt/8dp) · touch-density · container-width · z-index-management · fixed-element-offset · scroll-behavior · viewport-units (dvh) · orientation-support · content-priority · visual-hierarchy
6. Typography & Color (MEDIUM) line-height (1.5-1.75) · line-length (65-75 chars) · font-pairing · font-scale · contrast-readability · text-styles-system · weight-hierarchy · color-semantic · color-dark-mode · color-accessible-pairs · color-not-decorative-only · truncation-strategy · letter-spacing · number-tabular · whitespace-balance
7. Animation (MEDIUM) duration-timing (150-300ms) · transform-performance · loading-states · excessive-motion · easing · motion-meaning · state-transition · continuity · parallax-subtle · spring-physics · exit-faster-than-enter · stagger-sequence · shared-element-transition · interruptible · no-blocking-animation · fade-crossfade · scale-feedback · gesture-feedback · hierarchy-motion · motion-consistency · opacity-threshold · modal-motion · navigation-direction · layout-shift-avoid
8. Forms & Feedback (MEDIUM) input-labels · error-placement · submit-feedback · required-indicators · empty-states · toast-dismiss (3-5s) · confirmation-dialogs · input-helper-text · disabled-states · progressive-disclosure · inline-validation · input-type-keyboard · password-toggle · autofill-support · undo-support · success-feedback · error-recovery · multi-step-progress · form-autosave · sheet-dismiss-confirm · error-clarity · field-grouping · read-only-distinction · focus-management · error-summary · touch-friendly-input · destructive-emphasis · toast-accessibility · aria-live-errors · contrast-feedback · timeout-feedback
9. Navigation (HIGH) bottom-nav-limit (max 5) · drawer-usage · back-behavior · deep-linking · tab-bar-ios · top-app-bar-android · nav-label-icon · nav-state-active · nav-hierarchy · modal-escape · search-accessible · breadcrumb-web · state-preservation · gesture-nav-support · tab-badge · overflow-menu · bottom-nav-top-level · adaptive-navigation · back-stack-integrity · navigation-consistency · avoid-mixed-patterns · modal-vs-navigation · focus-on-route-change · persistent-nav · destructive-nav-separation · empty-nav-state
10. Charts & Data (LOW) chart-type · color-guidance · data-table · pattern-texture · legend-visible · tooltip-on-interact · axis-labels · responsive-chart · empty-data-state · loading-chart · animation-optional · large-dataset · number-formatting · touch-target-chart · no-pie-overuse · contrast-data · legend-interactive · direct-labeling · tooltip-keyboard · sortable-table · axis-readability · data-density · trend-emphasis · gridline-subtle · focusable-elements · screen-reader-summary · error-state-chart · export-option · drill-down-consistency · time-scale-clarity
Breakpoints (ONE system — Tailwind-aligned) 375px — small phone (test minimum)
640px — large phone / small tablet (sm:)
768px — tablet (md:)
1024px — laptop / small desktop (lg:)
1280px — desktop (xl:)
1440px — large desktop (2xl:)
Design mobile-first, add complexity at larger breakpoints. Never hide critical content — rearrange, don't remove. Prefer min-h-dvh over 100vh on mobile.
Spacing & Grid Base unit : 4px. Scale: 4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96, 128.
Level Spacing Within component 8-16px (tight grouping) Between components 24-32px (clear separation) Between sections 64-96px desktop, 48-64px mobile
Grid : 12-column desktop, 4-column mobile. Gutters: 24px desktop, 16px mobile. Allow full-bleed for hero/impact sections.
Container : max-w-7xl mx-auto with px-4 sm:px-6 lg:px-8. Responsive padding: clamp(1rem, 5vw, 3rem).
Component Minimums Element Padding Min Height Text Radius Tailwind Button px-6 py-3 2.75rem 1rem rounded-lg px-6 py-3 text-base rounded-lgCard p-6 - 1rem rounded-xl p-6 rounded-xl shadow-smInput px-4 py-3 2.75rem 1rem rounded-lg px-4 py-3 rounded-lgSection py-16 - - - py-16Modal p-8 - - rounded-2xl p-8 rounded-2xlBadge px-2 py-1 1.5rem 0.75rem rounded-full px-2 py-1 text-xs rounded-full
Component code patterns: references/component-patterns.md
Absolute Rules
Padding < 1rem on buttons/cards
Text < 14px (0.875rem) for body content
Icons < 1rem (w-4 h-4 minimum)
Flat cards without shadow-sm or border
Skip hover/focus states on interactive elements
Border-radius < 0.5rem on components
Use px for sizing (use rem for accessibility)
Use emojis as structural icons (use SVG: Lucide, Heroicons)
transition-all duration-200 on interactive elementsfocus-visible:ring-2 focus-visible:ring-offset-2 on interactive elementsmotion-reduce:transition-none on all transitionsWCAG AA contrast: 4.5:1 text, 3:1 UI elements
rem units for all sizing
Anti-Patterns ("AI Slop" Checklist) Before delivering ANY design, verify none of these are present:
Visual
No cyan-on-dark color scheme (unless explicitly chosen)
No purple-to-blue gradients as default accent
No gradient text on headings or metrics
No floating blobs or abstract shapes as decoration
No identical card grids (same-sized cards repeated endlessly)
No hero metric layout (big number + small label + gradient)
No glassmorphism everywhere — use purposefully, not decoratively
No generic shadows on every element
Structural
No cards-in-cards — flatten visual hierarchy
No center-everything — left-aligned with asymmetric layouts feels more designed
No same-spacing-everywhere — vary spacing for rhythm
No monospace-as-"tech-vibe" — pick a real display font
No modals for navigation — modals are for interruptions, not primary flows
Code
No pixel values (use rem)
No missing states (hover, focus, disabled, loading, error, empty)
No color-only indicators (pair with icons/text)
No outline: none without alternative focus indicator
No animations without prefers-reduced-motion support
No placeholder-only labels on form inputs
No raw hex values in components (use semantic tokens)
No inconsistent spacing (define a scale and use it)
No 4+ fonts (max 2 display+body, maybe 3 with mono)
Test: "If someone said 'AI made this,' would they believe it immediately? If yes, redesign."
Pre-Delivery Checklist
Visual Quality
Interaction
Responsive
Accessibility
Dark Mode
Final
Web Interface Guidelines Review For compliance review against Vercel's Web Interface Guidelines:
Fetch latest guidelines: https://raw.githubusercontent.com/vercel-labs/web-interface-guidelines/main/command.md
Read specified files
Check against all rules
Output findings in file:line format
UI Skill Ecosystem
Orchestrators ui (master orchestrator), design-router
Quality Chain (impeccable-*) audit → normalize → colorize → bolder → animate → delight → harden → adapt → optimize → clarify → polish
Additional: critique, distill, quieter, extract, onboard, teach-impeccable
Architecture impeccable-frontend-design, css-architecture, design-system, design-principles
Frameworks shadcn-ui, radix-ui, tailwindcss, framer-motion
Specialized responsive-design, animation, accessibility, landing-gen, brand
References
Core Design Knowledge (load on demand) Document Content references/ux-laws.md30 UX Laws, Nielsen's 10 Heuristics, Gestalt Principles, Don Norman's Principles references/design-languages.md23 design languages with quick selection guide references/color-systems.md14 color system approaches (OKLCH, semantic tokens, dark mode strategies) references/themes.md45 themes with exact hex palettes (12 dark, 6 light, 12 UI/UX, 8 nature, 7 brand) references/component-patterns.mdButton/Card/Input/Form code patterns, design styles (Glass/Clay/Minimal/Liquid), component minimums references/stitch-workflow.mdStitch MCP (12 tools) + Pencil MCP (13 tools), workflow steps, parameters, batch_design operations references/font-pairings.mdCurated font pairings by use case from typography.csv data references/design-systems.md65 design systems across 5 tiers with implementation notes references/composition-rules.mdRule of Thirds/Odds/Balance/Scale/Grid + 5-level visual hierarchy references/illustration-backends.mdPuter.js, Gemini API, TinyFish, Playwright illustration code examples references/modern-techniques.mdScroll-driven animation, View Transitions API, new CSS 2025-2026, design tokens, APCA references/modern-patterns.mdBento grids, kinetic typography, AI chat UI, generative UI, command palettes, spatial design references/operator-console-style.mdPaperclip-inspired Operator Console — control plane aesthetic, audacious-engineer voice, ASCII diagrams, mono numerics
UI Styling (shadcn/ui + Tailwind) Document Content references/ui-styling/shadcn-components.mdComplete component catalog with usage patterns references/ui-styling/shadcn-theming.mdTheme configuration, CSS variables, dark mode references/ui-styling/shadcn-accessibility.mdARIA patterns, keyboard nav, focus management references/ui-styling/tailwind-utilities.mdCore utility classes (layout, spacing, typography) references/ui-styling/tailwind-responsive.mdMobile-first breakpoints, container queries references/ui-styling/tailwind-customization.md@theme directive, custom tokens, plugins references/ui-styling/canvas-design-system.mdCanvas-based visual design philosophy
Scripts Script Purpose scripts/search.pyCLI search — design system generation, domain search, stack guidelines scripts/design_system.pyDesign system persistence (MASTER.md + page overrides) scripts/core.pyCore utilities for search and scoring scripts/ui-styling/shadcn_add.pyAdd shadcn/ui components with dependency handling scripts/ui-styling/tailwind_config_gen.pyGenerate tailwind.config.js with custom theme
External Resource URL Best For Awwwards awwwards.com Award-winning web design Dark.design dark.design Dark mode UI patterns Mobbin mobbin.com Mobile app design patterns Godly godly.website Landing page inspiration 3dicons 3dicons.co Open-source 3D icons (claymorphism) Dribbble dribbble.com Visual concepts, color palettes Behance behance.net Full case studies, brand systems
