[ Case Study ]

Loom

I kept burning out building UI foundations, so I built a pipeline that generates them.

// Every atom on this page came out of it

Active — validated across three products
  • React
  • Tailwind CSS
  • TypeScript
  • Figma Plugin API
Questionnaire
  • Primary color
  • Font pairing
  • Type scale
  • Spacing density
  • Edge style
Figma
  • Token variables
  • Text styles
  • Layout templates
  • 55 component sets
Next.js
  • tokens.css
  • 55 React atoms
  • Storybook stories
  • Playground

[ The Problem ]

Every time I started a new project the right way — modular UI, proper tokens, real components, dark mode, Figma parity — I spent the first few weeks on foundation work and never made it to the product.

The foundation kept eating the project.

Design and dev had to be set up twice: once in Figma, once in code, with manual translation between them. Every change meant updating both worlds and praying they didn't drift. A primary color tweak became a half-day of synchronization. I wanted to solve it once — a system where the design tokens, the Figma library, and the production code all came out of the same source.

That system is Loom.

[ Architecture ]

Loom is five things working in series.

  1. 01

    A three-tier questionnaire

    Tier 1 sets style direction defaults (product type + style direction). Tier 2 is the concrete brand work — primary color, font pairing, edge style, spacing density, shadow depth, type scale. Tier 3 is overrides for unusual cases. About 10–15 decisions total. Answerable in a single client conversation or a quiet evening at the desk.

  2. 02

    Five base config files

    The questionnaire answers compile to JSON: colors.json, spacing.json, sizing.json, typography.json, effects.json. These are the single source of truth. Everything downstream reads from them.

  3. 03

    Thirty Figma scripts

    Paste them into the Plugin API console in order — one shared-utils helper, then 29 step scripts. The output is a fully-populated Figma file: variables for the entire token system, text styles, primitives, semantics, layout templates, and 55 component sets. From paste-go to a working Figma library is about fifteen minutes.

  4. 04

    Thirty code template modules

    Orchestrated by scripts/code-templates/orchestrator.js. Each module owns one component family — Button, Calendar, the Radix-wrapped dialogs and menus, the data display set, the navigation patterns, the form controls. The templates emit React/Tailwind components, Storybook-style stories, an interactive playground, and a scaffold deployable to any Next.js project.

  5. 05

    One setup.sh

    The scaffold ships with a setup script that deploys tokens.css, the 55 atoms, the playground, the stories, and the providers directly into a target project's frontend/src/. No intermediate generated/ directory in the consuming project — flat path, fewer indirections.

[ Decisions ]

One JSON source, two synchronized worlds. The questionnaire compiles to five JSON files. The Figma scripts read from them; the code templates read from them. Change a token in spec/config/, regenerate, both worlds update — Figma and code in lockstep. The cost is discipline: the generator must always keep both halves in sync, which means new features ship to both layers or neither. The payoff is that drift becomes structurally impossible, not just discouraged. There is no second source to drift from.

Private generator, not a public framework. Loom isn't on npm, isn't a CLI for the world, isn't competing with Shadcn or Material Design. The scope is deliberately narrow: a generator I run for my own projects. The cost is no community, no contributions, no leverage beyond what I build with it. The payoff is that I never had to design for the general case — I could make decisions specifically for the proportions of work I actually ship in. Validated in production through three products: Paperboy, Party Wipe, and this portfolio.

Paste-go Figma scripts, not a Figma plugin. The Figma side is thirty scripts pasted into the Plugin API console, not a packaged Figma plugin. The cost is no GUI — each script gets copied and pasted manually, one at a time. The payoff is portability: no plugin install per account, no plugin runtime to maintain, no permissions or distribution channel to manage. Scripts can be run independently — update one component config and rerun just that script, no rebuild required. Anyone with access to the Figma file can run them, and the entire "front end" stays as plain text.

[ Under the Hood ]

JSON in, files out. The four slices below show the shape of the pipeline end to end — pick one.

The single source of truth. The questionnaire compiles to five JSON files — this is colors.json, the palette and role mapping every downstream step reads from.

> spec/config/base/colors.json
{
  "$note": "Generated from primary: #1E90FF, secondary: #1E90FF, accent: #1E90FF.
            Neutral tinted from primary hue (210°). Questionnaire is the override
            mechanism — change inputs and regenerate.",
  "palette": {
    "primary":   { "50": "#ecf2f9", "300": "#4da7ff", "500": "#006dd6", ... },
    "secondary": { ... },
    "neutral":   { "5": "#0c0d0e", "15": "#242629", "90": "#e4e6e7", ... },
    "success":   { ... },
    "warning":   { ... },
    "error":     { ... },
    "info":      { ... }
  },
  "roles": {
    "dark":  { "surface": "neutral.10", "on-surface": "neutral.90", ... },
    "light": { "surface": "neutral.95", "on-surface": "neutral.10", ... }
  }
}

[ More Case Studies ]

JAMIE

A persistent AI development partner — part JARVIS, part operating system for how I work.

[ read case study ]

Paperboy

A daily news dashboard I built so I’d stop opening six apps every morning.

[ read case study ]

Party Wipe

A D&D roguelike — captures the scramble of a session going sideways, solo, without needing a DM.

[ read case study ]