Wonderschool. AI Tooling

A designer who learned to build with the machine.

Over four months I became the single most active contributor to Wonderschool's shared AI knowledge base, not by writing production code by hand, but by building the inputs and tools that let Claude do it well: reusable skills, an autonomous design-build loop, working prototypes, and a personalized memory system that teaches the AI how I work.

Scope: product-docs (shared AI repo) Active: Mar 5 – Jul 9, 2026 Role: Product Designer
908
Commits authored, more than any other individual contributor
218k
Lines of code and documentation added
12
Interactive prototypes built from scratch
46
Memory rules teaching the AI how I work
01

Tools I built

Reusable skills (slash commands) that turn a design brief into real, both-stack output. These live in a shared 74-skill library and run for the whole team, not just me.

/design-system-contribution
Contribute to the design system without code or Figma

Turns a described component or pattern into a both-stacks draft (React common-base-ui + LiveView), opens a draft PR for engineering, and files genuine gaps to the design-systems Slack channel.

designer path
/wonderschool-design-review
A senior design critique in a box

Reviews a built prototype or page the way a senior product designer would: flow, hierarchy, design-system fidelity, copy, trust, and product judgment. Explains the why in plain language for PMs and engineers.

review lens
/designer-loop
Autonomous build-and-review loop

Describe a piece of UI and the problem it solves; an engineer agent builds it and three review lenses plus a test pass loop back until it clears every bar. Detailed below.

orchestration
/ws-common-sync
Safe repo sync for non-developers

Switches into the real app repo and pulls the latest safely, warning before it touches a dirty working tree. Removes a git footgun from the designer workflow.

workflow

I am also a primary co-author of two of the team's most-used quality skills: /design-system (the component and token reference for both stacks) and /react-ui-review (the frontend quality gate).

/designer-loop flagship

An agentic loop that builds UI that is good, not just built

Instead of prompting one step at a time, specialized agents take turns until the work clears every bar. It runs in a safe prototype sandbox or in the real app with guardrails, and it encodes my design taste as review criteria the machine has to satisfy.

Engineer builds → Product Design Implementation Tests → Ship
↪ fails any lens → loops back to the engineer, automatically, until all pass
02

Things I built with it

Twelve interactive prototypes authored end to end, roughly 89,000 lines across 294 component files. Several seeded real product work: IDEC licensing, CCMS 3.0 enrollment, provider onboarding, and the New Mexico childcare finder.

idec-licensing139 files · licensing platform
60,526
ccms-344 files · enrollment
13,312
claim-listing-flow37 files · provider claim
5,526
ccms-student-list19 files · roster
3,471
lightweight-onboarding22 files · provider NUX
2,326
ccms-onboarding-bandaid17 files · onboarding
1,700
nm-childcare-finder9 files · family search
1,213
provider-reference7 files · reference check
947

Two reusable prototype templates (parent and provider shells) are not shown. All sit inside a 52-prototype gallery the team shares.

03

Inputs I fed the AI

Tools are only as good as what the model knows. Alongside the tooling I authored the context that grounds it: forward-looking plans, cached design sources, and a private memory that carries my preferences across every session.

11
Initiative docs

Why / What / How / When plans that give agents the intent behind the work, from onboarding to licensing.

9
Cached design sources

Miro, Figma, and Google Docs snapshots pulled into the repo so the AI can reason over real source material.

46
Memory rules

A personalized config that teaches Claude my design standards, voice, and working style, so it gets me right the first time.

Methodology

Metrics are drawn from the git history of the shared product-docs repository (both authoring identities combined) as of Jul 10, 2026. Commit and line counts cover all authored commits in that repo; skill and prototype attribution uses first-commit authorship, which is reliable here because the repo merges one commit per pull-request author. Prototype line counts count .js / .jsx / .ts / .tsx source files. "Most active contributor" compares total authored commits across individuals. Numbers reflect contribution volume, not a claim that every line was hand-written; the point of the work is that it wasn't.

Back to home