Skip to content
Best Agent Skills
Premium Websites

UI UX Pro Max skill

Design know-how for websites and apps, with searchable libraries of styles, color palettes and font pairings.

A Premium skill. Premium opens soon.

By
Next Level Builder
Licence
MIT
Installs
405.8K
Works in
17 apps
Budgeting app landing page, made with the UI UX Pro Max skill. Tally budgeting app landing page.
Made with this skill: Budgeting app landing page. Any brands, names or numbers inside are invented examples.

What UI UX Pro Max makes

This skill gives your AI a design library to look things up in. It holds 79 searchable styles, 192 product palettes, 74 font pairings, 119 usability guidelines, 105 icons, 25 chart types and guidance for 22 tech stacks. When you ask for a page or app screen, the AI searches the library for what fits your kind of product.

For a new project it can generate a full design system: style, colors, fonts and page layout. It also ranks what to check first, starting with accessibility and touch size, then performance, style, layout, type and color, animation, forms, navigation and charts. The search tool is a small Python script that needs no extra packages.

Best for: People building apps or sites who want solid usability and style choices backed by a reference library.

  • Design-system generator for a new page or product
  • Priority checklist, from accessibility and contrast to charts
  • Palettes and font pairings matched to product type
  • Rules for touch size, loading feedback, forms and navigation
  • Works for web, mobile and desktop interfaces

Made with this skill

Tally budgeting app landing page. A landing page for "Tally", a budgeting app for freelancers: hero with phone mockup drawn in HTML/CSS, three features, pricing, testimonials-free (no fake quotes). Any brands, names or numbers inside are invented examples.

Example prompts

Type something like this once the skill is added. Your app opens the skill when the request matches.

  • Design a landing page for a budgeting app for freelancers, with a phone mockup and three features.

  • Review my signup form for usability and accessibility problems.

  • Pick a color palette and two fonts for a meditation app.

  • Create a dashboard layout for a small shop owner with sales charts.

What’s inside

74 files in the skill folder, with its MIT licence kept inside. 18 are program files your agent can run. Read them before you install.

  • SKILL.md the instructions
  • data/ 39 files
  • references/ 2 files
  • scripts/ 31 files
  • LICENSE licence

Which apps it works in

A skill is a folder of plain files, so any app that reads the open skills format can use it. Pick your app for its page.

How to add UI UX Pro Max to your app

Step by step for each app. We say where to click, so you never need to leave this page.

ChatGPTby OpenAI
  1. 1 Download the skill (.zip) with the button at the top of this page, then unzip it.
  2. 2 Open the ChatGPT desktop app and look for Skills in the sidebar, where standalone skills are listed.
  3. 3 Add the “ui-ux-pro-max” folder there if your version offers it. If you do not see Skills yet, use this skill in Claude or Codex instead.
  4. 4 In a chat, type @ and pick the skill, or just ask. Ask for what you want, for example: “Design a landing page for a budgeting app for freelancers, with a phone mockup and three features.”

To make your own, describe the workflow to @skill-creator in ChatGPT Work and it drafts a skill for you.

More ChatGPT skills

Claude appby Anthropic
  1. 1 Download the skill (.zip) with the button at the top of this page.
  2. 2 In the Claude app, open Settings > Features.
  3. 3 Upload the .zip file.
  4. 4 Ask for what you want, for example: “Design a landing page for a budgeting app for freelancers, with a phone mockup and three features.”

The current Claude Help Center lists Free, Pro, Max, Team and Enterprise. Organization policy can restrict uploads and sharing. Chat runs code in an isolated environment; uploading a skill does not give it your local project, coding-agent tools or unrestricted network access.

More Claude app skills

Codexby OpenAI
  1. 1 Download the skill (.zip) with the button at the top of this page, then unzip it.
  2. 2 Move the “ui-ux-pro-max” folder into your skills folder:~/.agents/skills
  3. 3 Or paste the install prompt below into Codex and let it do the copying.
  4. 4 Start a new session. Ask for what you want, for example: “Design a landing page for a budgeting app for freelancers, with a phone mockup and three features.”

Install prompt: paste this into Codex

I downloaded the agent skill "UI UX Pro Max" as ui-ux-pro-max.zip. Unzip it and copy the ui-ux-pro-max folder into ~/.agents/skills. Before you finish, list every file it contains, show me any scripts and what they do, and stop if anything asks for passwords, API keys or downloads from other websites.

To use the skill in one project only, put it in .agents/skills inside that project instead.

More Codex skills

Claude Codeby Anthropic
  1. 1 Download the skill (.zip) with the button at the top of this page, then unzip it.
  2. 2 Move the “ui-ux-pro-max” folder into your skills folder:~/.claude/skills
  3. 3 Or paste the install prompt below into Claude Code and let it do the copying.
  4. 4 Start a new session. Ask for what you want, for example: “Design a landing page for a budgeting app for freelancers, with a phone mockup and three features.”

Install prompt: paste this into Claude Code

I downloaded the agent skill "UI UX Pro Max" as ui-ux-pro-max.zip. Unzip it and copy the ui-ux-pro-max folder into ~/.claude/skills. Before you finish, list every file it contains, show me any scripts and what they do, and stop if anything asks for passwords, API keys or downloads from other websites.

Built-in installer: claude plugin marketplace add <owner/repo>

Built-in installer: claude plugin install <plugin>@<marketplace>

To use the skill in one project only, put it in .claude/skills inside that project instead.

More Claude Code skills

Cursor
  1. 1 Download the skill (.zip) with the button at the top of this page, then unzip it.
  2. 2 Move the “ui-ux-pro-max” folder into your skills folder:~/.cursor/skills
  3. 3 Or paste the install prompt below into Cursor and let it do the copying.
  4. 4 Start a new session. Ask for what you want, for example: “Design a landing page for a budgeting app for freelancers, with a phone mockup and three features.”

Install prompt: paste this into Cursor

I downloaded the agent skill "UI UX Pro Max" as ui-ux-pro-max.zip. Unzip it and copy the ui-ux-pro-max folder into ~/.cursor/skills. Before you finish, list every file it contains, show me any scripts and what they do, and stop if anything asks for passwords, API keys or downloads from other websites.

To use the skill in one project only, put it in .cursor/skills inside that project instead. Cursor also reads ~/.agents/skills, ~/.claude/skills, ~/.codex/skills.

More Cursor skills

GitHub Copilotby GitHub
  1. 1 Download the skill (.zip) with the button at the top of this page, then unzip it.
  2. 2 Move the “ui-ux-pro-max” folder into your skills folder:~/.copilot/skills
  3. 3 Or paste the install prompt below into GitHub Copilot and let it do the copying.
  4. 4 Start a new session. Ask for what you want, for example: “Design a landing page for a budgeting app for freelancers, with a phone mockup and three features.”

Install prompt: paste this into GitHub Copilot

I downloaded the agent skill "UI UX Pro Max" as ui-ux-pro-max.zip. Unzip it and copy the ui-ux-pro-max folder into ~/.copilot/skills. Before you finish, list every file it contains, show me any scripts and what they do, and stop if anything asks for passwords, API keys or downloads from other websites.

Built-in installer: gh skill install <owner/repo> <skill> --agent github-copilot --scope user

To use the skill in one project only, put it in .github/skills inside that project instead. GitHub Copilot also reads ~/.agents/skills.

More GitHub Copilot skills

Gemini CLIby Google
  1. 1 Download the skill (.zip) with the button at the top of this page, then unzip it.
  2. 2 Move the “ui-ux-pro-max” folder into your skills folder:~/.gemini/skills
  3. 3 Or paste the install prompt below into Gemini CLI and let it do the copying.
  4. 4 Start a new session. Ask for what you want, for example: “Design a landing page for a budgeting app for freelancers, with a phone mockup and three features.”

Install prompt: paste this into Gemini CLI

I downloaded the agent skill "UI UX Pro Max" as ui-ux-pro-max.zip. Unzip it and copy the ui-ux-pro-max folder into ~/.gemini/skills. Before you finish, list every file it contains, show me any scripts and what they do, and stop if anything asks for passwords, API keys or downloads from other websites.

Built-in installer: gemini skills install <git-url>

To use the skill in one project only, put it in .gemini/skills inside that project instead. Gemini CLI also reads ~/.agents/skills.

More Gemini CLI skills

Windsurf
  1. 1 Download the skill (.zip) with the button at the top of this page, then unzip it.
  2. 2 Move the “ui-ux-pro-max” folder into your skills folder:~/.codeium/windsurf/skills
  3. 3 Or paste the install prompt below into Windsurf and let it do the copying.
  4. 4 Start a new session. Ask for what you want, for example: “Design a landing page for a budgeting app for freelancers, with a phone mockup and three features.”

Install prompt: paste this into Windsurf

I downloaded the agent skill "UI UX Pro Max" as ui-ux-pro-max.zip. Unzip it and copy the ui-ux-pro-max folder into ~/.codeium/windsurf/skills. Before you finish, list every file it contains, show me any scripts and what they do, and stop if anything asks for passwords, API keys or downloads from other websites.

To use the skill in one project only, put it in .windsurf/skills inside that project instead.

More Windsurf skills

Kiro
  1. 1 Download the skill (.zip) with the button at the top of this page, then unzip it.
  2. 2 Move the “ui-ux-pro-max” folder into your skills folder:~/.kiro/skills
  3. 3 Or paste the install prompt below into Kiro and let it do the copying.
  4. 4 Start a new session. Ask for what you want, for example: “Design a landing page for a budgeting app for freelancers, with a phone mockup and three features.”

Install prompt: paste this into Kiro

I downloaded the agent skill "UI UX Pro Max" as ui-ux-pro-max.zip. Unzip it and copy the ui-ux-pro-max folder into ~/.kiro/skills. Before you finish, list every file it contains, show me any scripts and what they do, and stop if anything asks for passwords, API keys or downloads from other websites.

To use the skill in one project only, put it in .kiro/skills inside that project instead.

More Kiro skills

Antigravityby Google
  1. 1 Download the skill (.zip) with the button at the top of this page, then unzip it.
  2. 2 Move the “ui-ux-pro-max” folder into your skills folder:~/.gemini/antigravity/skills
  3. 3 Or paste the install prompt below into Antigravity and let it do the copying.
  4. 4 Start a new session. Ask for what you want, for example: “Design a landing page for a budgeting app for freelancers, with a phone mockup and three features.”

Install prompt: paste this into Antigravity

I downloaded the agent skill "UI UX Pro Max" as ui-ux-pro-max.zip. Unzip it and copy the ui-ux-pro-max folder into ~/.gemini/antigravity/skills. Before you finish, list every file it contains, show me any scripts and what they do, and stop if anything asks for passwords, API keys or downloads from other websites.

To use the skill in one project only, put it in .agents/skills inside that project instead.

More Antigravity skills

OpenCode
  1. 1 Download the skill (.zip) with the button at the top of this page, then unzip it.
  2. 2 Move the “ui-ux-pro-max” folder into your skills folder:~/.config/opencode/skills
  3. 3 Or paste the install prompt below into OpenCode and let it do the copying.
  4. 4 Start a new session. Ask for what you want, for example: “Design a landing page for a budgeting app for freelancers, with a phone mockup and three features.”

Install prompt: paste this into OpenCode

I downloaded the agent skill "UI UX Pro Max" as ui-ux-pro-max.zip. Unzip it and copy the ui-ux-pro-max folder into ~/.config/opencode/skills. Before you finish, list every file it contains, show me any scripts and what they do, and stop if anything asks for passwords, API keys or downloads from other websites.

To use the skill in one project only, put it in .opencode/skills inside that project instead. OpenCode also reads ~/.agents/skills, ~/.claude/skills.

More OpenCode skills

Cline
  1. 1 Download the skill (.zip) with the button at the top of this page, then unzip it.
  2. 2 Move the “ui-ux-pro-max” folder into your skills folder:~/.agents/skills
  3. 3 Or paste the install prompt below into Cline and let it do the copying.
  4. 4 Start a new session. Ask for what you want, for example: “Design a landing page for a budgeting app for freelancers, with a phone mockup and three features.”

Install prompt: paste this into Cline

I downloaded the agent skill "UI UX Pro Max" as ui-ux-pro-max.zip. Unzip it and copy the ui-ux-pro-max folder into ~/.agents/skills. Before you finish, list every file it contains, show me any scripts and what they do, and stop if anything asks for passwords, API keys or downloads from other websites.

To use the skill in one project only, put it in .agents/skills inside that project instead.

More Cline skills

Amp
  1. 1 Download the skill (.zip) with the button at the top of this page, then unzip it.
  2. 2 Move the “ui-ux-pro-max” folder into your skills folder:~/.config/agents/skills
  3. 3 Or paste the install prompt below into Amp and let it do the copying.
  4. 4 Start a new session. Ask for what you want, for example: “Design a landing page for a budgeting app for freelancers, with a phone mockup and three features.”

Install prompt: paste this into Amp

I downloaded the agent skill "UI UX Pro Max" as ui-ux-pro-max.zip. Unzip it and copy the ui-ux-pro-max folder into ~/.config/agents/skills. Before you finish, list every file it contains, show me any scripts and what they do, and stop if anything asks for passwords, API keys or downloads from other websites.

Built-in installer: amp skill add <github-url> --global

To use the skill in one project only, put it in .agents/skills inside that project instead. Amp also reads ~/.agents/skills, ~/.config/amp/skills, ~/.claude/skills.

More Amp skills

Gooseby Block
  1. 1 Download the skill (.zip) with the button at the top of this page, then unzip it.
  2. 2 Move the “ui-ux-pro-max” folder into your skills folder:~/.agents/skills
  3. 3 Or paste the install prompt below into Goose and let it do the copying.
  4. 4 Start a new session. Ask for what you want, for example: “Design a landing page for a budgeting app for freelancers, with a phone mockup and three features.”

Install prompt: paste this into Goose

I downloaded the agent skill "UI UX Pro Max" as ui-ux-pro-max.zip. Unzip it and copy the ui-ux-pro-max folder into ~/.agents/skills. Before you finish, list every file it contains, show me any scripts and what they do, and stop if anything asks for passwords, API keys or downloads from other websites.

To use the skill in one project only, put it in .agents/skills inside that project instead. Goose also reads ~/.claude/skills.

More Goose skills

OpenClaw
  1. 1 Download the skill (.zip) with the button at the top of this page, then unzip it.
  2. 2 Move the “ui-ux-pro-max” folder into your skills folder:~/.openclaw/skills
  3. 3 Or paste the install prompt below into OpenClaw and let it do the copying.
  4. 4 Start a new session. Ask for what you want, for example: “Design a landing page for a budgeting app for freelancers, with a phone mockup and three features.”

Install prompt: paste this into OpenClaw

I downloaded the agent skill "UI UX Pro Max" as ui-ux-pro-max.zip. Unzip it and copy the ui-ux-pro-max folder into ~/.openclaw/skills. Before you finish, list every file it contains, show me any scripts and what they do, and stop if anything asks for passwords, API keys or downloads from other websites.

Built-in installer: openclaw skills install @owner/<slug>

Built-in installer: openclaw skills install @owner/<slug> --global

Built-in installer: openclaw skills install git:owner/repo@ref

To use the skill in one project only, put it in skills inside that project instead. OpenClaw also reads ~/.agents/skills.

More OpenClaw skills

Hermes Agentby Nous Research
  1. 1 Download the skill (.zip) with the button at the top of this page, then unzip it.
  2. 2 Move the “ui-ux-pro-max” folder into your skills folder:~/.hermes/skills
  3. 3 Or paste the install prompt below into Hermes Agent and let it do the copying.
  4. 4 Start a new session. Ask for what you want, for example: “Design a landing page for a budgeting app for freelancers, with a phone mockup and three features.”

Install prompt: paste this into Hermes Agent

I downloaded the agent skill "UI UX Pro Max" as ui-ux-pro-max.zip. Unzip it and copy the ui-ux-pro-max folder into ~/.hermes/skills. Before you finish, list every file it contains, show me any scripts and what they do, and stop if anything asks for passwords, API keys or downloads from other websites.

Built-in installer: hermes skills install <owner/repo/skill>

More Hermes Agent skills

VS Codeby Microsoft
  1. 1 Download the skill (.zip) with the button at the top of this page, then unzip it.
  2. 2 Move the “ui-ux-pro-max” folder into your skills folder:~/.copilot/skills
  3. 3 Or paste the install prompt below into VS Code and let it do the copying.
  4. 4 Start a new session. Ask for what you want, for example: “Design a landing page for a budgeting app for freelancers, with a phone mockup and three features.”

Install prompt: paste this into VS Code

I downloaded the agent skill "UI UX Pro Max" as ui-ux-pro-max.zip. Unzip it and copy the ui-ux-pro-max folder into ~/.copilot/skills. Before you finish, list every file it contains, show me any scripts and what they do, and stop if anything asks for passwords, API keys or downloads from other websites.

To use the skill in one project only, put it in .github/skills inside that project instead. VS Code also reads ~/.claude/skills, ~/.agents/skills.

More VS Code skills

This skill includes 18 program files. That is normal for skills that build real files, but read them first, and stop if anything asks for passwords or outside downloads.

Questions about UI UX Pro Max

Do I need Python?

The search tool is a Python script, so your agent needs Python 3 available. It has no other dependencies.

Will it always pick the right style?

Not always. In our test run the first search matched the wrong product type, and the skill's own advice to retry with a narrower query fixed it.

Was this skill tested?

We ran it for a made-up budgeting app landing page. It produced a dark navy glassmorphism page with blue and green accents and a phone mockup drawn in HTML. The brand and every number were invented.

Is the UI UX Pro Max skill free?

It is a Premium skill on Best Agent Skills. Premium opens soon, with monthly, yearly and lifetime plans on the pricing page.

Who made the UI UX Pro Max skill?

Next Level Builder. We did not write it. Best Agent Skills curates skills like this one, explains them in plain words and shows how to add them to your app. It is shared under the MIT licence (Copyright (c) 2024 Next Level Builder).

Browse all skills