Skip to main content
uxskill
Star on GitHub
Language
English 简体中文 繁體中文 日本語 한국어 हिन्दी Bahasa Indonesia Tiếng Việt ไทย العربية Español Français Deutsch Português Русский Türkçe Italiano
Showcase · hand-picked dogfood · 2026

# 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.

12 examples 11 manifests behind each 0 stock photos 0 generic templates
01 · The gallery

## 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 · Homepage

  ### uxskill.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-jbm
  See 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-jbm
  Read 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-jbm
  See the editorial wing
- Dogfood · Brand inspector

  ### Brand 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-brand
  Browse the brands
- brief · fintech · dashboard
  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-jbm
  See the command
- brief · editorial · long-form
  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-jbm
  See the workflow
- brief · dev tools · landing
  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-jbm
  Read the writeup
- brief · museum · portfolio
  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-inter
  See the workflow
- Case study · Image-to-code

  ### From 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-code
  Open the command
- brief · docs · reference
  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-jbm
  See the docs page
- brief · b2b saas · marketing
  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-jbm
  Read the writeup
- brief · design system · reference
  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-inter
  Read the writeup

02 · Your turn

## 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