One email. No follow-up unless I ship something that fits.
Read firstOn 25 Oct 2026 I installed UI UX Pro Max and Taste Skill as plugins in Claude Code 2.1.197, ran UI UX Pro Max's design system command, ran Extract Design System on two public sites, and opened Kombai Gallery in a browser without signing in. I previewed the review skill's install list and read its rules file. I did not run a full Taste Skill build or the review skill on a page, so those two are described from their own docs.
THE ORDER
Five steps, and what each one decides
The order is mine. Each step feeds the next, and the review comes last so it checks the finished page.
1systemUI UX Pro Max. Decides style, colours and fonts before any code.
2referenceKombai Gallery. Gives you real designs to point at, with a prompt to paste.
3tasteTaste Skill. Adds art direction and a browser check while the page is built.
4extractExtract Design System. Pulls colours, fonts and spacing from a site you admire.
5reviewWeb design guidelines. Audits your code against Vercel's rules before you publish.
My viewYou do not need all five for every page. For a small page, steps 1, 2 and 5 are enough. Taste Skill takes real time, so save it for pages that matter.
STEP 1 · SYSTEM
UI UX Pro Max: pick the design system first
Use it at the start, when you have a page idea and no look yet. Its README says it activates on its own when you ask for UI work, and it can print a design system for your kind of product. The plugin I installed is version 2.15.0, with 7 skills, no hooks and about 709 always on tokens by Claude Code's estimate.
terminalinstall
claude plugin marketplace add nextlevelbuilder/ui-ux-pro-max-skillclaude plugin install ui-ux-pro-max@ui-ux-pro-max-skill
Inside a Claude Code session the README gives the same two steps as /plugin marketplace add and /plugin install. Its other route is the command line tool, run in your project folder:
terminalother route
npm install -g ui-ux-pro-max-cliuipro init --ai claude
It needs Python 3 for its search script. The script I read imports only Python's standard library. Then ask in plain words, for example:
promptREADME example
Build a landing page for my SaaS product
To see a design system without building anything, the README's command is below. It assumes the skill sits in .claude/skills, which is where the command line route puts it. The plugin route stores the script elsewhere, so with the plugin just ask Claude to run the design system search for your product.
PATTERNHero, Testimonials, CTASTYLESoft UI EvolutionCOLOURSPrimary #EC4899, accent #8B5CF6, background #FDF2F8, text #831843FONTSLora and RalewayCHECKLISTContrast 4.5:1, focus states, reduced motion, test at 375, 768, 1024 and 1440 px
Read itWhen I asked it for a sales plugin guide page, it returned a gaming font pair, Russo One and Chakra Petch. That does not fit a business guide. Treat the output as options, check the fit for your audience, and rerun with more detail about who it is for.
Free partThe README describes a Basic version in the repo and a paid Premium version at uupm.cc that adds brand identity, logo, slides, image generation and priority support. Everything above is the Basic repo.
STEP 2 · REFERENCE
Kombai Gallery: show Claude what good looks like
Use it once you know the page type. Words like clean and modern give Claude little to go on, and a real design gives it a lot. On 25 Oct 2026 the site said it is a free inspiration library with 20,000+ curated UI designs, and its Web tab listed 13,570.
1. Open kombai.com/gallery/web and pick the kind of section or page you are building, such as Hero or Dashboard.
2. Open a design. It has a live preview and a short description of its style and layout.
3. Press Use in other agents. The page showed Copied prompt when I did, with no sign in.
4. Paste it into Claude Code, then add your own brand and copy, using the prompt below.
promptmy wording
[paste the copied prompt]Use this design as a visual reference only. Build [my page] with my brand: [colours and fonts, or the design system from step 1] and my copy: [paste]. Do not reuse its text, logo or images.
RemixThe Remix in Kombai button is a separate action. I understand it uses Kombai credits, and I did not try it. The gallery itself is described as free forever on its page.
Not a copyThese are other people's designs. Use them to learn layout, spacing and mood, then use your own words and images. Read Kombai's terms before reusing anything beyond reference. That check is my advice, not something I verified.
STEP 3 · TASTE
Taste Skill: art direction and a browser check
Use it when you build the page you care about. The README says a build reads your brief, picks one of 20 researched directions, builds with credited real pictures, checks the page in a real browser at three widths, then looks at its own screenshots and fixes the top problems, up to three rounds. The installed plugin is version 2.1.5: one skill, no hooks, about 246 always on tokens and about 9.6k when it runs, by Claude Code's estimate.
claude plugin marketplace add Leonxlnx/taste-skillclaude plugin install taste-skill@taste-skill
promptmy wording
Use the design-taste-frontend skill. Build [my page] from this brief: [paste your brief]. Use my copy and my images where I give them, and credit anything you source.
Needs. Node 22 or newer, and Chrome, Edge or Chromium. The README says it installs nothing and needs no API keys. Finding pictures needs the internet.
Cost. The README says a build takes roughly 30 to 45 minutes and a few hundred thousand tokens. Budget for that if your Claude plan has usage limits.
Pictures. From open collections such as Wikimedia Commons, Openverse and the Met, limited to public domain, CC0, CC BY and CC BY SA, with credits put on the page. Swap in your own when you have them.
Name matchI matched this to the Taste Skill in the video by name and description. Other repos use similar names, so check the repo and licence match what the video showed before you install.
STEP 4 · EXTRACT
Extract Design System: starter tokens from a site you admire
Use it when you have one public site whose colours, fonts and spacing you want as a starting point. It opens the page in a browser and writes token files. It needs Node 20 or newer, and a Chromium download the first time.
terminalinstall
npx skills add arvindrk/extract-design-system
Then ask, using the README's example wording:
promptREADME example
Extract the design system from https://[site] and generate starter token files for this project.
I also ran its command directly, in an empty scratch folder, because it writes files into the folder you run it in:
It writes design-system/tokens.json and tokens.css, plus raw and normalized files in .extract-design-system. Add --extract-only to skip the starter files.
real outputREADME example site, 25 Oct 2026
tokens.css, first lines--color-primary: rgb(83, 58, 253);--font-heading: sohne-var;--space-1: 1px;...to --space-20: 96px, 20 steps in all
Starter onlyIt found 2 colours and 20 uneven spacing steps. On my own site it found 0 palette colours and one font. The README says the results are for initialization, not pixel perfect reproduction, from one page of a public site. Read the files and tidy them by hand.
Safe usePoint it only at public sites, for reference. Its skill file treats the target site as untrusted input and says to ask before changing app code. A font name in the output is not a licence, so check it before you use that font. The licence check is my note, not the README's.
STEP 5 · REVIEW
Web design guidelines: audit before you publish
Use it last, on the finished code. It is one skill inside Vercel's agent skills repo. It reviews UI files against Vercel's Web Interface Guidelines, covering accessibility, focus states, forms, animation, images, touch and more, and prints short file and line findings.
Name the skillThat repo holds 9 skills on 25 Oct 2026, including deploy to Vercel and a Vercel token CLI skill. Without the skill flag the installer offers all of them. Install only the one you want.
promptmy wording
Review index.html against the web design guidelines. List findings as file and line. Do not change anything yet.
Rules load live. The skill fetches its rules each time from the Vercel rules repo, so it needs the internet. I read that file on 25 Oct 2026: 191 lines and about 100 rules. Open it once yourself before you trust it.
Licence gap. The agent skills repo shows no licence on GitHub and has no licence file, although its README says MIT. The separate rules repo has an MIT licence file. Check before any commercial reuse of the skill itself.
THE BRIEF
One paragraph that every step can use
Fill this in once and paste it into steps 1, 3 and 5. The template is mine.
design briefmy template
I am building [page type] for [who it is for], to get them to [one action]. The brand should feel [three words] and should not feel [three words]. Use [colours and fonts, or propose a palette and a font pair]. The first screen must say [headline] and show [one proof]. Sections in order: [list]. Real content I will supply: [copy, photos, logos]. Reference: [one gallery design, and what I like about it: layout, spacing or mood, not its content]. Check it at 375px wide before you show me, and tell me what you could not verify.
PHONE CHECK
The review checklist at 375px
Open the page in your browser's device mode at 375px wide. The source of each check is in brackets. Mine means it is my own addition.
Nothing scrolls sideways. Fix any content that overflows. (Vercel rules)
The first screen works. A clear headline and one button, without scrolling. (Mine)
Text is readable. Body text needs 4.5:1 contrast. (UI UX Pro Max checklist)
Taps are easy. Buttons and links are big enough for a thumb, and nothing needs hover. (Mine)
Forms behave. Each field has a label, the right input type and autocomplete. (Vercel rules)
Keyboard focus shows. Tab through the page and see where you are. (UI UX Pro Max and Vercel rules)
Motion can be turned off. Animations respect reduced motion. (Both)
Notches are respected. Full width layouts use safe area insets. (Vercel rules)
Images have size and alt text. (Vercel rules)
Then widen it. Check 768, 1024 and 1440 px too. (UI UX Pro Max checklist)
CHECKED ON 25 OCT 2026
Stars, licences and status
GitHubpopularity, not quality
UI UX PRO MAX139,995 stars, MIT, activeTASTE SKILL102,086 stars, MIT, activeEXTRACT DESIGN SYSTEM253 stars, MIT, last push 5 Sep 2026VERCEL AGENT SKILLS32,968 stars, no licence on GitHub, README says MITKOMBAI GALLERYA website, not a repo
StarsA star count tells you how many people liked it, not whether it suits your page. Judge each tool by its output.
WHEN SOMETHING LOOKS OFF
Problems, and the fix
A skill does not trigger
Run claude plugin list, start a new session, then name the skill in your prompt.
The system does not fit your business
Rerun with who it is for and the mood you want. Compare options before you pick fonts.
Taste Skill feels slow
That is expected, the README says 30 to 45 minutes. Use it on the pages that matter.
The extractor found few colours
It returned 0 on my own site. Use the fonts and spacing, and set colours by hand.
NOT VERIFIED
What I could not confirm
A full Taste Skill build. I installed it and read its files, but did not run a 30 to 45 minute build. The steps and timings are the README's.
The review skill on a real page. I read its skill file and rules, and listed its install options. I did not run a review.
Your results. My prompts are my wording, except where the README's is marked. Output varies by project and model.
Kombai terms and credits. I did not read the terms or try Remix. The credits point is what I was told, not something I tested.
Anything after 25 Oct 2026. These repos change often, so check each README before you run a command.
That is the whole stack
Decide the system, pick a reference, build with taste, extract only for inspiration, then review at phone size. Sources below, checked 25 Oct 2026.
I'm Raj Singh. I've led ecommerce at two Fortune 100 companies, and at one of them I ran about $8M a year in ads for four years. I've worked with AI since 2019. Now my engineering team and I ship AI products, including debtops.ai. Each guide here is written from a real install, with the output dated.
Next, build one page with the order, then review it.
Start with a small page, such as a waitlist or a one page offer. Run steps one, two and five first, and add the others when a page matters enough to spend the time and tokens.
