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