The Distance Between Thinking and Making
On creative collaboration, design systems, and the loop that changed how I think about tools
TLDR
I built a generative magazine in the browser. Type a topic. Get an editorial layout with typography, photography, data visualizations, and color. The interesting part is not what it does. It is how it was made. Figma as a living spec. Claude as a creative collaborator. A custom plugin to keep the design system in sync. The result is a prototype. It is slow. It runs out of tokens. It is also the most creatively exciting thing I have worked on in years.
There is a question I keep coming back to. Not about whether AI will replace designers. That question bores me. The interesting question is what happens when you stop treating AI as a production tool and start treating it as a creative partner.
I have been exploring that question for the past few months through a project I am calling Archive. It is a browser-based generative magazine. You give it a topic, any topic, and it produces an editorial layout. Multi-column spreads. Drop caps. Pull quotes. Data visualizations built as SVGs. Photography matched to the content. A color palette that shifts with the subject matter.
Venice gets warm creams and canal blues. The Space Race gets void indigo and re-entry fire. Brutalist Architecture gets raw concrete and teal. Each topic generates its own visual identity from a library of 111 named color palettes, sourced from mymind, that the system matches by mood and keyword.
It is a prototype. I want to be clear about that. It is slow. It sometimes runs out of API tokens mid-generation, and I am not ready to set up auto-refill. The layout variety has known gaps. But it works. And the process of building it revealed something I was not expecting.
I Wanted to See What Was Actually Possible
The idea did not come from a client brief or a business case. It came from curiosity.
I had been watching the conversation around AI and design for months. Most of it frustrated me. Either it was dismissive, designers insisting nothing would change, or it was breathless, people generating UI screenshots and calling it the future. Neither felt honest. Neither felt like someone had actually sat down and pushed the tools to see where the edges were.
So I decided to build something. Not to prove a point. To find out for myself what happens when you take design seriously and give AI a real seat at the table. A project complex enough to expose the limitations. A project ambitious enough to reveal the potential.
I wanted to make something that could inspire, both myself and anyone else wondering what this new creative relationship actually looks like in practice.
Figma Became the Spec Claude Could Read
Here is where it gets interesting.
The workflow that emerged was not what I planned. I started designing in Figma the way I always do. Layout explorations. Type scales. Color tokens. Grid systems. I had an SVG wireframe that defined roughly 30 distinct layout components, each with a naming convention that mapped directly to code: EdDropCap, EdDark, SecQuote, StatCenter.
Then I connected Claude through Figma’s MCP integration.
MCP, the Model Context Protocol, lets Claude read directly from my Figma file. It can see the component hierarchy, the design tokens, the layout structure. Not a screenshot. The actual spec. Node by node.
This changed the dynamic completely.
Instead of designing in Figma, writing a spec, then translating that spec into code, I was working in a loop. Design a component in Figma. Let Claude read the spec. Generate the JSX. Review the output. Refine the design. Let Claude read the updated spec. Regenerate.
The feedback cycle collapsed from days to minutes. And because Claude could see the actual design intent, not a summary of it, the code stayed true to the design in ways that manual handoff rarely achieves.
A Custom Plugin Closed the Drift
One problem emerged quickly. As the design system grew, the tokens in Figma and the tokens in code drifted apart. A color value would change in one place but not the other. A spacing token would get updated during a code iteration and never make it back to the spec.
So I wrote a custom Figma plugin.
The plugin reads the production codebase and generates Figma components with the correct design tokens already applied. Color styles. Text styles. Spacing values. It builds atoms, landing components, magazine layouts, stat sections, and data visualizations directly inside Figma with exact values from the code.
This sounds like a small thing. It was not.
It meant the Figma file was no longer a static reference. It was a living mirror of the system. When I changed a type scale in code, I could regenerate the Figma components and see the impact immediately. When I explored a new layout in Figma, the spec was already in a format Claude could read and implement.
The design system became the connective tissue between my design judgment and AI execution. Not a document. A protocol.
Every Topic Gets Its Own Editorial Identity
When you select a topic, the system generates an entire magazine. Not a template with swapped content. A distinct editorial identity.
The color palette shifts with the subject matter, matched from a library of 111 named palettes by mood and keyword. The layout sequence varies. Drop caps, full-bleed photo spreads, pull quotes, data callouts. The system picks layouts based on the content itself, what kind of text it is working with, how long the headline runs, whether there are numbers worth highlighting. It avoids repeating the same visual weight in consecutive sections, the way a real art director would.
Photography is curated per section. Data visualizations are built as unique SVGs, specific to each topic. A real magazine would never run three bar charts in a row. Neither does Archive.
Better Systems, Not Better Prompts
The biggest lesson was not technical. It was about posture.
When I started, I treated Claude the way most people treat AI tools. Give it a task. Review the output. Correct the mistakes. This works, but it produces work that feels generated. Competent but generic. The kind of output that makes people say AI will replace designers.
What changed was when I started treating the collaboration more like working with a junior designer who has perfect recall and no ego. I would not hand a junior designer a vague brief and expect great work. I would build the system around them. Create clear constraints. Establish principles. Show them what good looks like. Then give them room to execute within that structure.
That is what the Figma spec, the MCP connection, and the custom plugin were really about. Not automation. Scaffolding. Building a system of constraints tight enough that the AI could produce work with genuine editorial character.
The contrast-safe color system is a good example. Early on, the AI-generated palettes looked fine in isolation but failed WCAG accessibility checks in context. Drop caps against dark backgrounds. Folio text on accent colors. So I built a contrast resolver into the theme generator. Every color token gets validated against its intended background and adjusted automatically. The AI does not need to think about accessibility. The system guarantees it.
That is design leadership applied to AI collaboration. You do not fix every mistake. You build systems that prevent categories of mistakes.
It Is a Prototype and I Mean It
I said this is a prototype and I mean it.
The file runs through in-browser Babel, which has practical size limits. Past about 111K lines, the sandbox becomes unresponsive. This constrains how many layout components and SVG visualizations I can ship in a single file.
Large rewrites consistently break things. React error #130. Cannot access before initialization. Component declaration order matters in JSX in ways that are unforgiving when everything lives in one file. I learned the hard way that variant arrays and functions referencing components must be declared after all component definitions.
The generation is slow. Each magazine takes time to assemble, and if your API tokens run out mid-generation, you get a partial result. I have not set up auto-refill because I want to be deliberate about costs while this is still exploratory.
Layout variety has gaps. The Figma spec defines around 30 layout components. Not all of them are implemented yet. The reconciliation between the spec and the code is ongoing.
These are real limitations. They are also the kind of limitations that come with building something genuinely new rather than polishing something safe.
The Gap Between Imagination and Execution Is Shrinking
Here is what I keep thinking about.
The loop I described, design in Figma, read through MCP, generate in code, sync through a plugin, is not specific to magazines. It is a pattern for any design system that needs to bridge intent and execution. Product interfaces. Marketing systems. Data dashboards. Documentation.
The moment you have a design tool that an AI can read natively, and a sync mechanism that keeps the spec and the code in lockstep, you unlock a kind of creative velocity that did not exist before. Not because the AI replaces the designer. Because the designer can operate at the level of systems and judgment while the AI handles the translation.
I am eager to keep pushing this. Archive is one idea. I have others. The creative potential here is not about generating more stuff faster. It is about closing the gap between what a designer imagines and what actually gets built.