Wonder Round Inc.
2025.04 ~ Present
Day 551 on the job1.
Designed a design system that manages design values and components in one place
- Problem
Designers, planners, and developers handed work to each other in turn — idea → planning → mockup → Figma → development — and bottlenecks at each stage meant a single task took 4–6 weeks on average.
SolutionDesigned and built a design system and a
react-native-web–based preview environment where real app screens can be made right away with the same design rules and components, and checked from a single browser link without a development setup. Introduced together with the Claude Code workspace, it cut the time per task to about 1–2 weeks on average. Managed design values such as colors, type, and corner rounding in a single token file, and used a
Style Dictionarybuild to convert them automatically into the form the app (Tamaguitheme) and the web (CSS variables) each need. App screens use only the components the design system package provides, so even if the styling approach changes later, only the package internals need to change while the screens stay as they are.
2.
Designed a Claude Code workspace where designers and planners build screens themselves while rules and permissions are enforced automatically
Organized the workflow into skills so that drafting screens, changing design rules, and exchanging screens with Figma can all be done just by talking to Claude Code. Let Figma changes reach screens only after they are first reflected in the design standard documents, so the result is the same no matter who builds it.
Instead of relying on people to remember, set up custom
ESLintrules and type checks that automatically block colors or sizes written outside the design system, other UI libraries, and calls to a real server.- Problem
On the GitHub free plan, basic safeguards such as branch protection and CODEOWNERS are unavailable for private repositories, so a worker unfamiliar with development could accidentally push to
mainor run a deploy.SolutionUsed a Claude Code
hookto check the worker role right before a command runs and blockmainpushes, PR merges, and deploy commands for anyone who is not a developer. Arranged the flow so every change goes through a PR and CI (lint / typecheck) and is applied only after developer review.
3.
Designed the handoff and rollout structure that carries finished screens into the real app
For every finished screen draft, generated a handoff spec that AI agents in the app and API repositories can read and implement directly. Split it into app and API versions and listed what is out of scope, what was assumed, and an acceptance checklist, so the same screen can be rebuilt in another repository.
Moved existing app screens into the design system while keeping their current look, and bundled designer improvements separately through pinned package versions and change records (
changesets) so problems introduced during the move never mix with intended changes. Libraries tied to native behavior — toasts, bottom sheets, and images — stay in the app while the design system provides only the visual parts, keeping changes to existing call sites to a minimum.- Problem
Webview screens opened inside the app were drawn in a different style from the app, so two designs were mixed within one app.
SolutionInstead of building separate webview components, had webviews use the same design system as the app via
react-native-web, so native and webview screens share a single design standard.