mountains
Dylan Smith
Blog

Intro

Dylan Smith

Designing & developing
0px
pixel-perfect interfaces. Building reusable and scalable systems for the people who use them.
Leading design at SmartAdvocate.
Resume

Principles

“You don't rise to the level of your goals, you fall to the level of your systems.”

— James Clear

0px
The details matter

Small details compound over large surfaces to make a big difference.

In practice: the four-control build bar →

Solutions over tools

Work backwards from the blue-sky result. Systems support the solution, not the other way around.

In practice: a stacked list beat a clever grid →

Be kind to your future self

Document the why and leave clever breadcrumbs.

In practice: two shells, same data →
Design TokensLayout SystemsPrototypingMCPSkills & Agents

Outcomes

SmartAdvocateUI refresh

I restyled every screen of SmartAdvocate without rewriting it.

It's an ASP.NET app built on DevExpress controls. Instead of rebuilding it, I wrote a CSS token system that sits on top of the existing styles, so the whole product changed at once. Contrast went up to WCAG AA, and nothing broke.

Three stacked layers. Bottom: the existing ASP.NET and DevExpress app. Middle: a CSS token layer that overrides its styles. Top: the restyled product, every screen at WCAG AA contrast.
  1. 3 · What users seeThe restyled product
    Every screenWCAG AA contrast
  2. 2 · What I addedA CSS token layer
    One set of CSS tokensDocumented in 100+ pages
  3. 1 · What was thereASP.NET + DevExpress
    No rewriteNo regressions
Tap to compare. Pins mark what the token layer changed.
Data migrations3 months → 2 weeks
Across 12+ concurrent projects, by standardizing the project structure and writing a Python CLI to run them.
Before thatBuilt a component library at MDS.
10+ yearsAcross design, front-end, and data.

Work

Bank Reconciliation

Bringing the experience of reconciling bank statements into the 21st century.

Shipped at MDS ↗

RapidPay

Two-panel design with a guided workflow for processing payments, replacing a disjointed legacy multi-step experience.

Shipped at MDS ↗

Projects

What I build after hours. The prompt fighter and crosscheck demos run each project's own code; rarebrew's is a recreation built on my deck data. Go ahead and poke at them.

rarebrew.gg

A Commander deckbuilder for paper Magic players, built phone first. It has a custom component library on design tokens, a Scryfall + EDHREC data layer, and insights meant to help you decide what to cut.

The card is the row
Each row is a cropped strip of the real card image, so the card's own name plate and mana cost do the work a table row would. Tap one to expand it in place. Double-faced cards get a flip.
Tabs navigate, never filter
The type strip follows your scroll and jumps between sections. Collapsing a group is the only way cards leave the screen. Tap the stats strip for insights, and drag the sheet down to dismiss it.
ReactNext.jsTypeScriptTailwindCSSSupabasePWA
Open rarebrew.ggRead the notes →
Recreated · my Light Party deck

Prompt
Fighter

Build a fighter from four 80-character prompts. Claude turns them into stats, two moves, a flaw, and a 16×16 sprite, and then it fights a ghost that someone else built.

The budget is the anti-cheat.
Stats must total exactly 30 body and 20 spirit points. Describe something invincible and you get a lopsided spread, not extra points.
The model picks, the engine decides.
Moves come from a fixed set of effects, so no prompt can invent “instantly wins.” Same seed, same fight, every time.
The roster · 6 of 84
  • Grull the Unblinking, 177 wins, 71 losses
  • Sax Solomon, 4 wins, 4 losses
  • Vaelith Nyx-9, 9 wins, 5 losses
  • Broadsheet Kestrel, 6 wins, 18 losses
  • Sir Wobbly Bramm, 9 wins, 13 losses
  • Vivienne Mirage, 1 wins, 28 losses

HI-SCORE GRULL 177–71

Next.jsSupabaseClaude APIVitest
Play prompt fighter ▶
Replay · real generations, real sim

Stuck on a crossword clue? Type it in and get likely answers, plus what each word means.

It runs entirely in the browser and works offline.

Convention over association
Datamuse knows which words sit near a clue. Crosswords want the words setters actually use. A hand-curated corpus of crosswordese answers instantly, and the network results merge in underneath it.
Evidence, not padding
Answers backed by published puzzles get top billing, and everything else is labeled as related words. When Datamuse pads its results with junk, the app shows nothing rather than looking broken.
TypeScriptVitePWAVitest
Try crosscheck ↗