Skip to main content
affpapa.org
RU EN
skill CX Codex

ui-ux-pro-max-skill — Claude Code skill for UI design

Describe a product to get a proposed page structure, visual style, palette, and font pairing. Use it to shape interface decisions before implementation.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓ 
npx skills add reason-machines/trending-skills --skill ui-ux-pro-max-skill -a claude-code
Open on GitHub

What ui-ux-pro-max-skill does

Give the skill a product description and it returns a design system with a page pattern, visual style, colors, typography, and interaction effects. It also flags design choices to avoid and supplies an accessibility and UX checklist. These outputs guide an agent’s design decisions; they are not a finished interface.

The skill can search design rules by product category and styles by keyword. Its CLI can generate results for a chosen stack and export them as JSON or Markdown. The Python API exposes the generator along with rule, style, color, and typography lookups. Installing the CLI requires Node.js and npm: install uipro-cli globally, then add the skill to your project. The Python instructions also use pip install -r requirements.txt to install dependencies.

What it helps with

  • choose a page structure for a product
  • find visual styles that match an interface brief
  • select a color palette and font pairing
  • look up design rules for a product category
  • review a design against accessibility and UX checks

Example prompts for the agent

  • Create a design system for a React analytics dashboard with a page pattern, colors, and typography.
  • Find design rules and matching styles for a clinic app.
  • Generate a portfolio site design system and return it as Markdown.

How to install ui-ux-pro-max-skill

1Skills CLI (Vercel)

npx skills add reason-machines/trending-skills --skill ui-ux-pro-max-skill -a claude-code

2Manually: put the files in place

~/.claude/skills/ui-ux-pro-max-skill/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/ui-ux-pro-max-skill/

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about ui-ux-pro-max-skill

How do I install ui-ux-pro-max-skill in Claude Code?

Run npx skills add reason-machines/trending-skills --skill ui-ux-pro-max-skill -a claude-code. The skill file is available at ~/.claude/skills/ui-ux-pro-max-skill/SKILL.md.

What does ui-ux-pro-max-skill do?

It turns a product description into a proposed page structure, visual style, palette, typography, and effects. The result also includes anti-patterns and an accessibility and UX checklist.

Can I export a design system as JSON?

Yes. The CLI supports JSON output; for example, run npx uipro-cli generate --product "restaurant booking" --output json.

Similar skills

Everything for Design →
frontend-design official anthropics This skill guides intentional visual design for new interfaces and redesigns. Use it when a generic generated UI is not enough. 1,025,790installs grill-me Matt Pocock grill-me interviews you about a plan or design to expose gaps and sharpen decisions. Use it before implementation starts. 1,424,476installs design-taste-frontend Leonxlnx This skill directs the design of public pages and work screens, then checks the result in a browser through screenshots. Use it when an interface feels generic or unfinished. CX Codex +1 678,700installs prototype Matt Pocock Creates throwaway prototypes for checking state logic or exploring UI before committing the decision to the main codebase. 986,201installs grilling Matt Pocock Stress-test a plan, decision, or idea through structured rounds of questions. Use it when you need to expose assumptions before acting. 979,543installs codebase-design Matt Pocock This skill helps design modules with small interfaces and hidden complexity. Use it when refactoring code, choosing a seam, or making tests easier to write. 850,344installs

From the same set139

understand-anything-knowledge-graph Runs a multi-agent pass over your project, builds a graph of files, functions and dependencies, then opens an interactive dashboard for exploring it. CX Codex +1 2,400installs agent-browser-automation This skill gives AI agents a headless browser through a Rust CLI and Chrome DevTools Protocol. Use it for pages, forms, snapshots, and screenshots. CX Codex +1 2,100installs agency-agents-ai-specialists Swap in a specialist persona — frontend, backend, reviewer, UX — and let it carry the task with its own workflow. CX Codex +1 2,100installs daily-stock-analysis Automates stock analysis across US, Hong Kong, and Chinese markets using LLMs. It calculates entry targets, stop-losses, and delivers reports via chat webhooks. CX Codex +1 2,000installs everything-claude-code-harness The skill builds out an agent harness: subagents, slash commands, memory hooks and a security scan. Useful when every Claude session starts from a blank slate. CX Codex +1 1,800installs gstack-workflow-assistant A set of workflows for planning, code review, releases, and browser QA. Call the workflow you need with a slash command. CX Codex +1 1,700installs shannon-ai-pentester A white-box pentester that reads your source, runs live exploits against a running app, and reports only findings it can reproduce. CX Codex +1 1,700installs autoresearchclaw-autonomous-research A skill that wires up AutoResearchClaw, a 23-stage pipeline turning one topic string into a paper with verified citations and experiment code. CX Codex +1 1,600installs

Project sponsors

Companies that keep this analytics open
Gold sponsor
Nutra.Club

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor