ux-ui-agent-skills

Screens an agent built.

A design-system kit for Claude Code. Whole product screens, not component sheets - every one rendered from a single token theme and signed off by a real gate, in light and in dark.

Get the kit See the twenty screens
20product screens
51objective checks
2144design systems
0chart libraries
Meridian Terminalgated, light and dark
Meridian Terminal: a candlestick chart with volume and a moving average, an order book with depth bars, a market depth curve, a time and sales tape and a watchlist
Ten chart types on one screen, every one inline SVG

The kit ships 2,144 named design systems, each as a full written specification.

The difference is not an opinion

Drag it.

Left is the same dashboard written the way a model writes it when nothing stops it. Right is the reference app in this repo. Both are real files you can open; the left one is tests/fixtures/bad/slop-screen.html, and ten of the gates reject it.

The same dashboard built to the kit's rules: one hero revenue card carrying the revenue figure at display size, then three quieter stat cards for active users, churn and NPS The same dashboard as a model writes it unprompted: a purple gradient header with emoji, four identical stat cards with no one leading, grey low-contrast labels, and a blue Delete Account button

Measured, not claimed

51objective gates, all green
56pages rendered here
26runnable skills
2144design systems
0chart libraries

Five websites

Not only dashboards.

A product launch, a furniture shop, a long read in Thai, a neighbourhood restaurant and a public service page. Each takes its visual language from one design system in the library, and each passed the same gates as every screen below. The brands, people and figures are fictional, and every page says so.

Product launch page for a fictional desk speaker, a large light headline beside a drawing of the speaker Product launchA desk speaker, in the bang-olufsen language. Pricing that recomputes Online shop for a joinery workshop: a lead bookcase tile, filters and a grid of solid-wood pieces Online shopSolid-wood pieces made to order, in the floyd language. A cart that remembers Thai long-form article with a large Thai headline beside a cross-section of a raised house over a canal Long read, in ThaiA feature set for Thai type, in the financial-times language Restaurant site with a large serif headline about khao soi and a card showing today's opening hours Neighbourhood restaurantHours from your clock and a booking form, in the savor language Thai public service page for renewing a shop licence, a navy hero under a banner saying it is a fictional example Public service, in ThaiAn eligibility checker in plain Thai, in the korea-gov language

Twenty screens

Whole screens, not component sheets.

A checkout, a patient chart, a threat console, a factory line, a railway timetable and a trial readout. Same tokens, same render checks, different job.

Checkout screen with bag, payment methods and order summary CheckoutSteppers that count, a total that explains itself CRM pipeline with stage columns and a deal panel Sales pipelineWeighted forecast, stages, a panel that follows selection Audio workstation with a six track timeline of waveforms, a mixer and a spectrum analyser Audio workstationGenerated waveforms, vertical faders, spectrum Observability console with a span waterfall, latency heatmap and service dependency graph Distributed tracingSpan waterfall, p95 heatmap, service graph Satellite mission control with ground tracks on a world map, a station pass schedule and telemetry Mission controlGround tracks, pass schedule, telemetry, advisories Freight control room with shipment timeline and exception queue Freight controlTimeline, exceptions, a table that really sorts Security operations console with attack arcs on a world map, a MITRE technique grid and a triage queue Security operationsAttack arcs, a MITRE grid, a triage queue Manufacturing execution console with cycle time distribution, a Pareto chart and SPC control limits Manufacturing lineCycle times, a Pareto, SPC control limits Railway control room with a Marey time-distance train graph, platform occupancy bars and an arrival delay histogram Railway controlA train graph where every crossing is a meet Clinical trial readout in light theme with Kaplan-Meier survival curves, a subgroup forest plot and an adverse event table Clinical trialKaplan-Meier, a forest plot, a null line that holds Retail banking screen with account balances, a spending breakdown and a transaction ledger Retail bankingBalances, a ledger, a transfer that confirms Electronic patient chart with an allergy banner, vitals trends, medications and an encounter timeline Patient chartThe allergy banner comes before anything else Air traffic control radar scope with range rings, aircraft vectors, conflict pairs and flight progress strips Air traffic controlA radar scope, conflict pairs, progress strips Power grid console showing network topology with line loading, system frequency and generation mix Power gridNetwork topology, frequency, generation mix Genomics browser with an exon track, a variant lollipop plot and a coverage histogram GenomicsAn exon track and a variant lollipop plot Video editor with a multitrack timeline, an audio waveform and a keyframe curve editor Video editorA multitrack timeline and keyframe curves Warehouse floor control with an aisle occupancy heatmap, pick wave progress and a dock schedule Warehouse floorAisle occupancy, pick waves, a dock schedule Ride dispatch console with a demand heat grid, surge zones and supply plotted against demand Ride dispatchDemand heat, surge zones, supply against demand Machine learning training console with loss and validation curves, a learning rate schedule and a confusion matrix Training runLoss curves and a confusion matrix Meteorology forecast desk with an ensemble spaghetti plot, WMO wind barbs and precipitation accumulation Forecast deskA 28-member ensemble and real wind barbs

Everything else

23 harnesses and six more screens

Every variant and state of each component, rendered so the gates can measure them, plus the reference app, two aesthetic studies, the two dense consoles and an iPhone Duo simulator. Twenty-nine links, twenty-nine files in this repo.

A passing gate is not taste. It is the floor.

Fifty-one checks prove contrast, keyboard, target size, overflow and intent. They cannot prove any of this is good, so the kit also runs a critic that argues for rejection, and says so on the page.

Read the doctrine Open a template