The engine's reads,
side by side with the resulting interface.
A curated gallery of pages the ux-skill engine helped build. The recommendation on one side; the shipped interface on the other. Nothing here was bolted on after the fact. The palette, the type pair, the motion preset all came out of the 5-parallel-search recommender.
Twelve pages.
Twelve recommendations.
Every card below shows the engine's pick (style + palette + type pair) and a screenshot or link to the resulting interface. The first four are the docs site itself, built on its own engine. The next eight are mini case studies from briefs the recommender has been run on.
-
Dogfood · Homepageuxskill.laithjunaidy.com
Saturated Cinema scenes. Each section owns its color. Bricolage Grotesque display. No yellow, no Cormorant, no purple-to-blue gradient. The engine ate its own cooking.
style: editorial-cinema palette: cinema-night type: bricolage-inter-jbmSee the page -
Dogfood · Compare/compare.html
The 50-point scorecard. Dense, comparison-heavy, table-led. The engine picked Monochrome Precise over Editorial Magazine for this surface because the job is reading, not feeling.
style: monochrome-precise palette: linear-graphite type: bricolage-inter-jbmRead the scorecard -
Dogfood · Editorial/editorial/
The long-read surface. Magazine grid, wide-tracked display, photographic plates instead of icons. The recommendation flipped from Monochrome Precise to Editorial Cinema because the brief tags shifted to warm, literary, ambient.
style: editorial-cinema palette: dark-mode-luxe type: fraunces-inter-jbmSee the editorial wing -
Dogfood · Brand inspectorBrand gallery on the homepage
160 brand DESIGN.md specs visualised as a card mosaic, each card rendered in that brand's actual voice and palette. The engine reads `data/brands/*.json`; the page paints what it reads.
style: gallery-mosaic palette: per-card type: per-brandBrowse the brands -
Case study · Fintech dashboard
Neobank, trader audience, MENA
Brief: precise, trustworthy, dense. The engine recommended Monochrome Precise + Linear Graphite + Bricolage display. Forbidden tags pulled Cormorant and purple-to-blue out of the running before the lanes started.
style: monochrome-precise palette: linear-graphite type: bricolage-inter-jbmSee the command -
Case study · Editorial publication
Long-read magazine, literary tone
Brief: warm, literary, slow. The engine routed to Editorial Cinema + a dark-mode palette built around deep blues and ink reds. The recommendation came back without Cormorant because the forbidden list named it explicitly.
style: editorial-cinema palette: dark-mode-luxe type: fraunces-inter-jbmSee the workflow -
Case study · Dev tools landing
Saturated Cinema, developer audience
Brief: cinematic, saturated, opinionated. The engine returned Editorial Cinema with the per-scene color discipline that drives this site itself: one accent per section, never a single brand color across the whole canvas.
style: editorial-cinema palette: per-scene type: bricolage-inter-jbmRead the writeup -
Case study · Cultural institution
Museum portfolio, Swiss tradition
Brief: precise, calm, archival. Swiss International came back from the recommender with a near-pure-white palette, hairline rules, and a serif body face matched to the long-read context.
style: swiss-international palette: editorial-warm type: instrument-serif-interSee the workflow -
Case study · Image-to-codeFrom editor screenshot → system
Hand the engine the Cursor screenshot. The pipeline reads it as dark canvas, syntax-accent dominant, and returns Monokai + Dark Mode Luxe as the closest match. Pure CV, no multimodal LLM.
style: dark-mode-luxe palette: dark-monokai command: /ux-image-to-codeOpen the command -
Case study · Docs reference
Commands index, dense reference UI
Brief: dense, technical, browseable. The recommender chose Stripe Documentation as the style anchor, the rare case where the palette and type pair stay constant across surfaces but the layout density flexes.
style: stripe-documentation palette: stripe-indigo type: bricolage-inter-jbmSee the docs page -
Case study · B2B SaaS marketing
Calm, confident, founder-led
Brief: confident, founder-voice, calm. The engine returned a near-Linear pick: graphite palette, geometric sans, restrained motion. The rationale lines explicitly cite the founder-led tone over conventional B2B blue.
style: linear-precise-dark palette: linear-graphite type: geist-inter-jbmRead the writeup -
Case study · Design system docs
Internal DS reference, monochrome
Brief: precise, monochrome, RTL-friendly. The engine kept Cormorant out, surfaced an Inter+IBM Plex stack, and recommended a hairline-only border vocabulary the linter then enforces on every change.
style: monochrome-precise palette: monochrome-cool type: ibm-plex-interRead the writeup
Built something with the engine?
Open a GitHub issue using the showcase template. Include the recommendation JSON, a screenshot or two, and what you kept versus overrode. The gallery is hand-picked. The entries with a story attached are the ones that land.
Submit your example on GitHub Or peek at the template: /.github/ISSUE_TEMPLATE/showcase.md