Ink: A design system built by directing AI
This is an ongoing project and, at this moment, real prototypes can not be shared.
role: Sole designer & AI-workflow director
overview
Instead of designing screens and handing them off, I directed an AI to build the layer underneath.
Ink is an experiment in a different way of working. Rather than producing mockups for engineering to rebuild, I directed Claude Code to construct the design system itself: as Figma libraries and as production React at the same time, so the two never drifted apart.
This is the story of what that took, what a human still had to decide, and where the machine still needed a designer standing over its shoulder.
the premise
Can one person direct an AI to build a real design system, not a mockup of one?
AI is good at generating a screen. I wanted to know whether it could build the plumbing beneath one: a token architecture, a component library, documentation, and the design-to-code wiring that keeps them honest to a standard you could actually ship.
I set the direction and the guardrails; the agent did the building; I reviewed at every gate.
the tools
When an open source design system meets AI
Directing Claude Code, I installed Astryx (Meta's open source design-system library) in a Next.js app, then had it rebuild the system in Figma through the Figma MCP. Tokens as Figma Variables, then components built from them.
Figma Code Connect linked every Figma component to its real code stored on Github, so design and code were built in one loop instead of reconciled after the fact.
foundation
Tokens before pixels
Everything started with a three-file Figma architecture; Foundation, Components, and a planned Modules layer, so a token defined once could flow everywhere.
Foundation is two-tier: raw primitives feed semantic tokens, which resolve to Light and Dark through CSS light-dark.
Roughly 180 tokens in all, ~100 primitives and 80+ semantic colours, plus radius, spacing, type, motion, variable-bound text styles, an icon set and documentation, all authored in Figma Variables by the agent through the Plugin API, and mirrored token-for-token in code.
components
Forty components, Figma and code in parity
Components were built in tiers: atoms, forms, navigation, overlays, data display, each authored in Figma and wired to its Astryx / React counterpart with Code Connect, so a designer opening a Figma component sees the exact code that renders it.
I gated every tier: check Foundation for gaps, add and publish if needed, build, review, connect, move on. Nothing advanced to the next tier until the last one was real.
concept, critique & polish
Turning the AI on its own work
To prove the system carried real weight, I directed Claude to build a multi-section homepage using the components already available on the design system.
I then ran a design-critique routine over the homepage with two independent AI assessments, a design-director review and a deterministic detector, I kept them isolated so neither anchored the other. They scored it 26 / 32 against Nielsen's heuristics and surfaced a broken mobile navigation, an inconsistent numbering system, and accessibility gaps.
The purpose of the test was to make sure the guardrails that kept Claude from creating new components and styles foreign to the design system were not being introduced during a simple design routine.
spliting the work
What I decided, and what the machine executed
Human: Direction
Brand and art direction, and the visual world for each surface
The two-tier token architecture and the light / dark strategy
Publish-gate checkpoints between every component tier
Setting up guardrails to prevent AI overreach and hallucination
The "page code only" constraint that fenced the polish pass
AI: Execution
Authored Figma variables, styles and components via the Plugin API
Wrote the matching Astryx / React implementation, token-for-token
Generated Code Connect mappings across the component set
Scaffolded the homepage and the component gallery
Ran the dual-agent critique and reported findings
Applied the scoped polish and produced reviewable diffs
Built and deployed the surfaces to Vercel
Conclusion and reflection
The interesting part was never that the AI was fast. It's that every decision carrying taste, risk, or brand meaning still had to be mine.
AI collapsed the distance between design and code. The system existed in both at once and stayed in sync, usually the exact seam where design systems rot. Gating it tier by tier kept quality from drifting as the surface area grew. What normally takes a team and months of reconciliation happened in one continuous loop.
But direction never came for free. Deciding what the system should look like, judging when a layout was bold enough, knowing which rules to break stayed a human job because AI was happy to move fast in the wrong direction until told otherwise.
Even with skills meant to guard against issues like colour contrast, it handed me "finished" screens with obvious mistakes: primary buttons rendering white-on-white on every dark surface, flagged by no detector and caught only by looking.
That's the real finding. AI can now build a design system faster than a team can, however it can't yet decide whether the thing it built is any good. The speed is the tool; the judgment is still the job.