UI Styling
Ohh-889/skyroc
Create beautiful, accessible user interfaces with shadcn/ui components (built on Radix UI + Tailwind), Tailwind CSS utility-first styling, and canvas-based visual designs.
UI/UX design intelligence with searchable database. An agent skill from ZxBing0066/pixel-converter.
Install UI UX Pro Max
$ npx skills add ZxBing0066/pixel-converter --skill ui-ux-pro-max -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install ZxBing0066/pixel-converter ui-ux-pro-max --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/ZxBing0066/pixel-converter.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.opencode/skills/ui-ux-pro-max .claude/skills/ui-ux-pro-max && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "ui-ux-pro-max" agent skill from https://github.com/ZxBing0066/pixel-converter/tree/master/.opencode/skills/ui-ux-pro-max into .claude/skills/ui-ux-pro-max/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ui-ux-pro-max", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/ZxBing0066/pixel-converter/tree/master/.opencode/skills/ui-ux-pro-maxType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add ZxBing0066/pixel-converter --skill ui-ux-pro-max -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install ZxBing0066/pixel-converter ui-ux-pro-max --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/ZxBing0066/pixel-converter.git skills-src && mkdir -p .agents/skills && cp -r skills-src/.opencode/skills/ui-ux-pro-max .agents/skills/ui-ux-pro-max && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "ui-ux-pro-max" agent skill from https://github.com/ZxBing0066/pixel-converter/tree/master/.opencode/skills/ui-ux-pro-max into .agents/skills/ui-ux-pro-max/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ui-ux-pro-max", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add ZxBing0066/pixel-converter --skill ui-ux-pro-max -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install ZxBing0066/pixel-converter ui-ux-pro-max --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/ZxBing0066/pixel-converter.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/.opencode/skills/ui-ux-pro-max .cursor/skills/ui-ux-pro-max && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "ui-ux-pro-max" agent skill from https://github.com/ZxBing0066/pixel-converter/tree/master/.opencode/skills/ui-ux-pro-max into .cursor/skills/ui-ux-pro-max/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ui-ux-pro-max", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/ZxBing0066/pixel-converter.git --path .opencode/skills/ui-ux-pro-max--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add ZxBing0066/pixel-converter --skill ui-ux-pro-max -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install ZxBing0066/pixel-converter ui-ux-pro-max --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/ZxBing0066/pixel-converter.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/.opencode/skills/ui-ux-pro-max .gemini/skills/ui-ux-pro-max && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "ui-ux-pro-max" agent skill from https://github.com/ZxBing0066/pixel-converter/tree/master/.opencode/skills/ui-ux-pro-max into .gemini/skills/ui-ux-pro-max/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ui-ux-pro-max", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install ZxBing0066/pixel-converter ui-ux-pro-maxInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add ZxBing0066/pixel-converter --skill ui-ux-pro-max -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/ZxBing0066/pixel-converter.git skills-src && mkdir -p .github/skills && cp -r skills-src/.opencode/skills/ui-ux-pro-max .github/skills/ui-ux-pro-max && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "ui-ux-pro-max" agent skill from https://github.com/ZxBing0066/pixel-converter/tree/master/.opencode/skills/ui-ux-pro-max into .github/skills/ui-ux-pro-max/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ui-ux-pro-max", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add ZxBing0066/pixel-converter --skill ui-ux-pro-max -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install ZxBing0066/pixel-converter ui-ux-pro-max --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/ZxBing0066/pixel-converter.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/.opencode/skills/ui-ux-pro-max .opencode/skills/ui-ux-pro-max && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "ui-ux-pro-max" agent skill from https://github.com/ZxBing0066/pixel-converter/tree/master/.opencode/skills/ui-ux-pro-max into .opencode/skills/ui-ux-pro-max/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ui-ux-pro-max", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
ui-ux-pro-max- GitHub stars
- 181
- Used in
- 13 other repos
- Token cost
- ~2.6k tokens
- SKILL.md length
- 1,010 words
- Files
- 33 (incl. scripts)
- Skills in repo
- 1
- Repo updated
- First seen
- Licence
- BSD-2-Clause
At a glance
UI/UX design intelligence with searchable database. An agent skill from ZxBing0066/pixel-converter.
- Works in 8 steps: Analyze User Requirements → Generate Design System (REQUIRED) → Supplement with Detailed Searches (as… → …
- Tasks that involve UI design
- SKILL.md covers Prerequisites, How to Use This Skill, Search Reference and Example Workflow, plus 4 more sections
- Calls python3, apt and python
What it does
UI UX Pro Max is an agent skill from ZxBing0066/pixel-converter. UI/UX design intelligence with searchable database
Its SKILL.md is about 2.6k tokens, which your agent loads only when the skill is triggered. The skill folder holds 34 other files, including scripts.
It sits in Frontend & Design, covering UI design. The repository describes itself as: 上传图片即可一键将图片转换为像素风格，支持多种自定义方式，可生成方块像素、点状像素和文字像素图等等。支持导出纯 CSS 像素图，并支持生成 CSS 像素图动画。 The licence is BSD-2-Clause.
When your agent uses it
- Tasks that involve UI design
Example prompts
- “/ui-ux-pro-max”
Requirements
- Python 3
Workflow steps
8 steps, taken from the step headings in SKILL.md.
What it can do on your machine
Read from SKILL.md and the folder at commit ab0c589. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
Ships 1 file in scripts/, which the agent can run.
Shell commands in SKILL.md call:
python3aptpythonbrewwinget
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
UI UX Pro Max loads about 2.6k tokens when it runs. Until then it costs about 16 tokens; SKILL.md has 1,010 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
Safety
Auto-check: notes
The automated check noted patterns worth knowing about, such as sudo or a known installer.
- NoteRuns commands with sudoSKILL.md:26
sudo apt update && sudo apt install python3
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); the scripts in this folder are not scanned.
SKILL.md
The full file from ZxBing0066/pixel-converter at commit ab0c589, republished under its BSD-2-Clause licence (© ZxBing0066). 1,010 words, ~2,647 tokens.
Download SKILL.mdSave it as
.claude/skills/ui-ux-pro-max/SKILL.md (or your agent's skills folder). This skill also uses 32 other files; get the full folder from GitHub.- name
- ui-ux-pro-max
- description
- UI/UX design intelligence with searchable database
ui-ux-pro-max
Comprehensive design guide for web and mobile applications. Contains 67 styles, 96 color palettes, 57 font pairings, 99 UX guidelines, and 25 chart types across 13 technology stacks. Searchable database with priority-based recommendations.
Prerequisites
Check if Python is installed:
python3 --version || python --versionIf Python is not installed, install it based on user's OS:
macOS:
brew install python3Ubuntu/Debian:
sudo apt update && sudo apt install python3Windows:
winget install Python.Python.3.12How to Use This Skill
When user requests UI/UX work (design, build, create, implement, review, fix, improve), follow this workflow:
Step 1: Analyze User Requirements
Extract key information from user request:
- Product type: SaaS, e-commerce, portfolio, dashboard, landing page, etc.
- Style keywords: minimal, playful, professional, elegant, dark mode, etc.
- Industry: healthcare, fintech, gaming, education, etc.
- Stack: React, Vue, Next.js, or default to
html-tailwind
Step 2: Generate Design System (REQUIRED)
Always start with --design-system to get comprehensive recommendations with reasoning:
python3 skills/ui-ux-pro-max/scripts/search.py "<product_type> <industry> <keywords>" --design-system [-p "Project Name"]This command:
- Searches 5 domains in parallel (product, style, color, landing, typography)
- Applies reasoning rules from
ui-reasoning.csvto select best matches - Returns complete design system: pattern, style, colors, typography, effects
- Includes anti-patterns to avoid
Example:
python3 skills/ui-ux-pro-max/scripts/search.py "beauty spa wellness service" --design-system -p "Serenity Spa"Step 2b: Persist Design System (Master + Overrides Pattern)
To save the design system for hierarchical retrieval across sessions, add --persist:
python3 skills/ui-ux-pro-max/scripts/search.py "<query>" --design-system --persist -p "Project Name"This creates:
design-system/MASTER.md— Global Source of Truth with all design rulesdesign-system/pages/— Folder for page-specific overrides
With page-specific override:
python3 skills/ui-ux-pro-max/scripts/search.py "<query>" --design-system --persist -p "Project Name" --page "dashboard"This also creates:
design-system/pages/dashboard.md— Page-specific deviations from Master
How hierarchical retrieval works:
- When building a specific page (e.g., "Checkout"), first check
design-system/pages/checkout.md - If the page file exists, its rules override the Master file
- If not, use
design-system/MASTER.mdexclusively
Step 3: Supplement with Detailed Searches (as needed)
After getting the design system, use domain searches to get additional details:
python3 skills/ui-ux-pro-max/scripts/search.py "<keyword>" --domain <domain> [-n <max_results>]When to use detailed searches:
| Need | Domain | Example |
|---|---|---|
| More style options | style | --domain style "glassmorphism dark" |
| Chart recommendations | chart | --domain chart "real-time dashboard" |
| UX best practices | ux | --domain ux "animation accessibility" |
| Alternative fonts | typography | --domain typography "elegant luxury" |
| Landing structure | landing | --domain landing "hero social-proof" |
Step 4: Stack Guidelines (Default: html-tailwind)
Get implementation-specific best practices. If user doesn't specify a stack, default to html-tailwind.
python3 skills/ui-ux-pro-max/scripts/search.py "<keyword>" --stack html-tailwindAvailable stacks: html-tailwind, react, nextjs, vue, svelte, swiftui, react-native, flutter, shadcn, jetpack-compose
Search Reference
Available Domains
| Domain | Use For | Example Keywords |
|---|---|---|
product | Product type recommendations | SaaS, e-commerce, portfolio, healthcare, beauty, service |
style | UI styles, colors, effects | glassmorphism, minimalism, dark mode, brutalism |
typography | Font pairings, Google Fonts | elegant, playful, professional, modern |
color | Color palettes by product type | saas, ecommerce, healthcare, beauty, fintech, service |
landing | Page structure, CTA strategies | hero, hero-centric, testimonial, pricing, social-proof |
chart | Chart types, library recommendations | trend, comparison, timeline, funnel, pie |
ux | Best practices, anti-patterns | animation, accessibility, z-index, loading |
react | React/Next.js performance | waterfall, bundle, suspense, memo, rerender, cache |
web | Web interface guidelines | aria, focus, keyboard, semantic, virtualize |
prompt | AI prompts, CSS keywords | (style name) |
Available Stacks
| Stack | Focus |
|---|---|
html-tailwind | Tailwind utilities, responsive, a11y (DEFAULT) |
react | State, hooks, performance, patterns |
nextjs | SSR, routing, images, API routes |
vue | Composition API, Pinia, Vue Router |
svelte | Runes, stores, SvelteKit |
swiftui | Views, State, Navigation, Animation |
react-native | Components, Navigation, Lists |
flutter | Widgets, State, Layout, Theming |
shadcn | shadcn/ui components, theming, forms, patterns |
jetpack-compose | Composables, Modifiers, State Hoisting, Recomposition |
Example Workflow
User request: "Làm landing page cho dịch vụ chăm sóc da chuyên nghiệp"
Step 1: Analyze Requirements
- Product type: Beauty/Spa service
- Style keywords: elegant, professional, soft
- Industry: Beauty/Wellness
- Stack: html-tailwind (default)
Step 2: Generate Design System (REQUIRED)
python3 skills/ui-ux-pro-max/scripts/search.py "beauty spa wellness service elegant" --design-system -p "Serenity Spa"Output: Complete design system with pattern, style, colors, typography, effects, and anti-patterns.
Step 3: Supplement with Detailed Searches (as needed)
# Get UX guidelines for animation and accessibility
python3 skills/ui-ux-pro-max/scripts/search.py "animation accessibility" --domain ux
# Get alternative typography options if needed
python3 skills/ui-ux-pro-max/scripts/search.py "elegant luxury serif" --domain typographyStep 4: Stack Guidelines
python3 skills/ui-ux-pro-max/scripts/search.py "layout responsive form" --stack html-tailwindThen: Synthesize design system + detailed searches and implement the design.
Output Formats
The --design-system flag supports two output formats:
# ASCII box (default) - best for terminal display
python3 skills/ui-ux-pro-max/scripts/search.py "fintech crypto" --design-system
# Markdown - best for documentation
python3 skills/ui-ux-pro-max/scripts/search.py "fintech crypto" --design-system -f markdownShow full SKILL.md (420 more words)Show less
Tips for Better Results
- Be specific with keywords - "healthcare SaaS dashboard" > "app"
- Search multiple times - Different keywords reveal different insights
- Combine domains - Style + Typography + Color = Complete design system
- Always check UX - Search "animation", "z-index", "accessibility" for common issues
- Use stack flag - Get implementation-specific best practices
- Iterate - If first search doesn't match, try different keywords
Common Rules for Professional UI
These are frequently overlooked issues that make UI look unprofessional:
Icons & Visual Elements
| Rule | Do | Don't |
|---|---|---|
| No emoji icons | Use SVG icons (Heroicons, Lucide, Simple Icons) | Use emojis like 🎨 🚀 ⚙️ as UI icons |
| Stable hover states | Use color/opacity transitions on hover | Use scale transforms that shift layout |
| Correct brand logos | Research official SVG from Simple Icons | Guess or use incorrect logo paths |
| Consistent icon sizing | Use fixed viewBox (24x24) with w-6 h-6 | Mix different icon sizes randomly |
Interaction & Cursor
| Rule | Do | Don't |
|---|---|---|
| Cursor pointer | Add cursor-pointer to all clickable/hoverable cards | Leave default cursor on interactive elements |
| Hover feedback | Provide visual feedback (color, shadow, border) | No indication element is interactive |
| Smooth transitions | Use transition-colors duration-200 | Instant state changes or too slow (>500ms) |
Light/Dark Mode Contrast
| Rule | Do | Don't |
|---|---|---|
| Glass card light mode | Use bg-white/80 or higher opacity | Use bg-white/10 (too transparent) |
| Text contrast light | Use #0F172A (slate-900) for text | Use #94A3B8 (slate-400) for body text |
| Muted text light | Use #475569 (slate-600) minimum | Use gray-400 or lighter |
| Border visibility | Use border-gray-200 in light mode | Use border-white/10 (invisible) |
Layout & Spacing
| Rule | Do | Don't |
|---|---|---|
| Floating navbar | Add top-4 left-4 right-4 spacing | Stick navbar to top-0 left-0 right-0 |
| Content padding | Account for fixed navbar height | Let content hide behind fixed elements |
| Consistent max-width | Use same max-w-6xl or max-w-7xl | Mix different container widths |
Pre-Delivery Checklist
Before delivering UI code, verify these items:
Visual Quality
- No emojis used as icons (use SVG instead)
- All icons from consistent icon set (Heroicons/Lucide)
- Brand logos are correct (verified from Simple Icons)
- Hover states don't cause layout shift
- Use theme colors directly (bg-primary) not var() wrapper
Interaction
- All clickable elements have
cursor-pointer - Hover states provide clear visual feedback
- Transitions are smooth (150-300ms)
- Focus states visible for keyboard navigation
Light/Dark Mode
- Light mode text has sufficient contrast (4.5:1 minimum)
- Glass/transparent elements visible in light mode
- Borders visible in both modes
- Test both modes before delivery
Layout
- Floating elements have proper spacing from edges
- No content hidden behind fixed navbars
- Responsive at 375px, 768px, 1024px, 1440px
- No horizontal scroll on mobile
Accessibility
- All images have alt text
- Form inputs have labels
- Color is not the only indicator
-
prefers-reduced-motionrespected
© ZxBing0066, BSD-2-Clause. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
SKILL.md and 32 other files (scripts) in .opencode/skills/ui-ux-pro-max of ZxBing0066/pixel-converter.
- SKILL.md
- data/charts.csv
- data/colors.csv
- data/icons.csv
- data/landing.csv
- data/products.csv
- data/react-performance.csv
- data/stacks/astro.csv
- data/stacks/flutter.csv
- data/stacks/html-tailwind.csv
- data/stacks/jetpack-compose.csv
- data/stacks/nextjs.csv
- data/stacks/nuxt-ui.csv
- data/stacks/nuxtjs.csv
- data/stacks/react-native.csv
- data/stacks/react.csv
- data/stacks/shadcn.csv
- data/stacks/svelte.csv
- data/stacks/swiftui.csv
- … and 14 more
Open the folder on GitHubat commit ab0c589
Used in 13 other repositories
We found 18 copies of this SKILL.md (exact, near-identical or edited) in other folders, from 13 other GitHub owners. This page covers the copy in ZxBing0066/pixel-converter, which our catalogue first saw on October 7, 2026.
- rasengan-dev/rasenganjsapps/docs/.agents/skills/ui-ux-pro-maxapps/docs-v2/.agents/skills/ui-ux-pro-max
- 2SSK/dot-files.claude/skills/ui-ux-pro-max
- slimani-dev/muraqib.agents/skills/ui-ux-pro-max
- BiFangKNT/mtga.codex/skills/ui-ux-pro-max
- IvanLi-CN/tavily-hikari.codex/skills/ui-ux-pro-max
- Draculabo/AntigravityManager.agent/skills/ui-ux-pro-max.codex/skills/ui-ux-pro-max
- leoz9/AIWardrobe.agent/skills/ui-ux-pro-max.codex/skills/ui-ux-pro-max
- dainsiahtill-dev/Polaris.codex/skills/ui-ux-pro-max
- allenpeng0705/EnvoyMesh.trae/skills/ui-ux-pro-max
- futureboard/futureboard-studio.agents/skills/ui-ux-pro-max.claude/skills/ui-ux-pro-max
- cdavid817/vanehub-ai.claude/skills/ui-ux-pro-max
- NeverSight/learn-skills.devdata/skills-md/aatrooox/blog.zzao.club/ui-ux-pro-max
- infometa/workbuddyskillsexperts/modern-webapp/skills/ui-ux-pro-maxplugins/cb_teams_marketplace/plugins/modern-webapp/skills/ui-ux-pro-max
Compare with similar skills
UI UX Pro Max next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| UI UX Pro Max this skillZxBing0066/pixel-converter | 181 | 13 repos | ~2.6k | Automated safety check: Notes | BSD-2-Clause | |
| UI StylingOhh-889/skyroc | 795 | 13 repos | ~2.5k | Automated safety check: Pass | MIT | |
| LobeHub Interactive Prototypelobehub/lobehub | 83k | — | ~1.6k | Automated safety check: Pass | Custom licence | |
| Make Interfaces Feel Bettersamuelclay/NewsBlur | 7.6k | 10 repos | ~1.5k | Automated safety check: Pass | MIT | |
| Design Dnazanwei/design-dna | 1.9k | 1 repos | ~2.1k | Automated safety check: Pass | MIT | |
| Figma Design to Codewarpdotdev/warp | 65k | 4 repos | ~2.9k | Automated safety check: Pass | AGPL-3.0 |
Similar skills
LobeHub Interactive Prototype
lobehub/lobehub
Builds single-file interactive HTML prototypes rendered with the real LobeHub UI components and written as production-style React, so they can later be split into files.
Make Interfaces Feel Better
samuelclay/NewsBlur
Design engineering principles for making interfaces feel polished.
Design Dna
zanwei/design-dna
Extract, define, and apply design DNA across three dimensions: design system (tokens), design style (qualitative feel), and visual effects (Canvas, WebGL, 3D, particles, shaders, scroll effects…
Figma Design to Code
warpdotdev/warp
Turns a Figma frame or component into production code that matches the design, using the Figma MCP server and the project's own design system.
- Official
Stitch Prompt Enhancer
google-labs-code/stitch-skills
Rewrites a vague UI generation idea into a structured, keyword-rich prompt for Stitch, pulling in an existing DESIGN.md design system when the project has one.
Related
Categories
Questions about UI UX Pro Max
What does UI UX Pro Max do?
UI/UX design intelligence with searchable database. An agent skill from ZxBing0066/pixel-converter. UI UX Pro Max is an agent skill from ZxBing0066/pixel-converter.
When should I use UI UX Pro Max?
UI UX Pro Max fits situations like: tasks that involve UI design.
How do I install UI UX Pro Max in Claude Code?
Run `npx skills add ZxBing0066/pixel-converter --skill ui-ux-pro-max -a claude-code`. Or copy the skill folder (.opencode/skills/ui-ux-pro-max in ZxBing0066/pixel-converter) into .claude/skills/ui-ux-pro-max in your project. Claude Code loads it when a task matches its description.
How do I install UI UX Pro Max in Codex?
Run `npx skills add ZxBing0066/pixel-converter --skill ui-ux-pro-max -a codex`. Or copy the skill folder (.opencode/skills/ui-ux-pro-max in ZxBing0066/pixel-converter) into .agents/skills/ui-ux-pro-max in your project. Codex loads it when a task matches its description.
Can I use UI UX Pro Max in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add ZxBing0066/pixel-converter --skill ui-ux-pro-max -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/ui-ux-pro-max, .gemini/skills/ui-ux-pro-max, .github/skills/ui-ux-pro-max and .opencode/skills/ui-ux-pro-max in your project.
What does UI UX Pro Max need to run?
Going by SKILL.md and its folder, UI UX Pro Max needs the command-line tools its instructions call (python3, apt, python, brew and winget). Our summary lists: Python 3.
Does UI UX Pro Max access the network?
SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.
Is UI UX Pro Max safe to install?
Our automated static check of SKILL.md found notes only (runs commands with sudo), nothing it rates as a warning. It is not a guarantee. The check reads SKILL.md only: the scripts in the folder are not scanned, so read them before running anything.
What licence does UI UX Pro Max use?
UI UX Pro Max is published under the BSD-2-Clause licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does UI UX Pro Max use?
About 2.6k tokens (SKILL.md is roughly 11k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.
What are the alternatives to UI UX Pro Max?
Skills that share tags, products or a category with UI UX Pro Max: UI Styling (Ohh-889/skyroc, 795 stars), LobeHub Interactive Prototype (lobehub/lobehub, 83k stars), Make Interfaces Feel Better (samuelclay/NewsBlur, 7.6k stars) and Design Dna (zanwei/design-dna, 1.9k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains UI UX Pro Max?
ZxBing0066 (a GitHub user) maintains it in ZxBing0066/pixel-converter, which has 181 GitHub stars. The repository was last updated on February 24, 2026.
Source: ZxBing0066/pixel-converter on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.