This site is an experiment — a working prototype for exploring my relationship with AI and vibe coding, and a live proof of the design systems skills I bring to the door. What you're reading right now is the HTML draft. The plan below is where it's going, one stage at a time. The site (and I) get better every day.
Public GitHub repo becomes the source of truth from the beginning, not the moment React arrives. README that reads like the site, a real semver policy, a release process, and a CHANGELOG.md that gets updated with every ship — even the tiny ones.
Write the intent, audience, and success criteria for the site in a plain-English spec file. Every design and content decision references it. Without a spec, the site drifts — with one, every next choice has something to sit against.
Explore visual directions — palette, typography, tone, decorative elements. Land on something that reads as mine, not templated. The current draft has a working version (Twilight Bloom palette, Inter/Lato type, editorial layout patterns). The goal is to keep refining until every choice feels intentional.
Move tokens out of CSS custom properties and into a real pipeline — Style Dictionary or Terrazzo — with one JSON source of truth that outputs CSS variables, iOS Swift, Android XML, and JS constants.
Write the case studies, essays, playbook, and about copy in a voice that reads like me — not corporate, not AI-generated. Content is the site. Design supports it; it doesn't lead.
In progress: four case studies, two essays, one playbook, a design system inventory. All drafts, all evolving.
Turn the design language from stage 02 and the tokens from stage 03 into a real React library. Composable primitives (Box, Stack, Cluster, Text), higher-order patterns (Card, Callout, Testimonial), and thoughtful prop design — variant, tone, size, slots. APIs that read like English and scale as the system grows.
Every component ships with tests, a11y notes, and a usage example.
Storybook deployed publicly. MDX docs per component covering usage, do/don't, prop reference, accessibility notes. Chromatic wired up for visual regression. Figma Code Connect mappings published so the Figma library and the React repo point at each other.
A real WCAG 2.1 AA audit of the site, with Lighthouse scores and a published accessibility statement. A documented focus-ring token. Skip-to-content links. prefers-reduced-motion honored on every animation.
Dark theme built through the semantic token layer from stage 03 — which is how I'll know the tokens actually flex.
Same content, same design language, but production-shaped — and every UI element on the site comes from the design system's own components. Dogfooding at the highest possible resolution.
A rolling backlog for the design system itself, kept public. Three columns: net-new, migration, deprecation. Updated as I ship. The meta-artifact — the roadmap for the thing that made this site.
New case studies as work ships. New essays as ideas land. New playbooks as processes refine.
Plus a running "AI receipts" section — the actual prompts, tools, diffs, and hours-saved numbers from building this system in an AI-native way. This is what I'd bring to a team that wants to shape how AI shows up in design systems work.
The point isn't to launch a perfect site. The point is to learn in public — about my craft, about AI, about what a personal design system can actually be.