How a solo designer used AI to ship 7 interactive prototypes, a 42-note design system, and a production-ready developer handoff package — for a feature that would normally take a team 6–8 weeks. The important part was not speed by itself; it was using speed to reduce product risk, compare interaction models, and arrive at an implementation-ready direction.
Arcana is a financial analytics platform used by hedge funds. The team needed a corporate access calendar in the RMS — a place where portfolio managers see upcoming meetings, earnings calls, conferences, and investor days, filtered by portfolio and event type, with shared team calendars and integrated note-taking. Think Google Calendar meets Bloomberg Terminal.
The design challenge was solo: no design system existed, the product is data-dense and dark-themed, the calendar had to handle 100+ events per day without becoming unusable, and the timeline was tight. Rapid iteration was the only way to compare interaction models and reach a defensible direction before commitments got made.
Competitor screenshots in a chat thread became React components a developer could npm install, in seven days. AI generated the prototypes; design judgment chose between them, and the system tokens kept the output honest. Because each iteration behaved like the real thing, stakeholders reacted to behavior instead of imagining it, and the handoff was concrete rather than annotated.
Competitor screenshots were analyzed to surface two mental models: "content events" (a passive feed of earnings and filings) vs. "active workspace" (meetings as first-class objects with notes attached). The chosen direction was active workspace—because portfolio managers don’t just want to see what’s coming, they want to prepare for it. That framing shaped every subsequent decision.
The live product was audited across 7 pages. Every token was extracted — colors, typography, spacing, border radii, elevation. A 42-note design system was built in Obsidian: 7 token notes, 29 components, 3 patterns. The Figma navbar HTML was fed directly into prototypes because pixel accuracy at this stage removes ambiguity during engineering review.
The first prototype: 5,800 lines of fully interactive HTML. Four calendar views. Real meeting data. Working filters. Note viewer with rich text toolbar. The result was a working application instead of a Figma file a developer has to interpret, because the design decisions had to be testable, not only looked at.
9 rounds. Each driven by specific design judgment, each implemented in under an hour:
The handoff package targeted the dev team’s chosen library (FullCalendar React): theme CSS with every Arcana token mapped to FC variables, a <MeetingPill /> React component, a <CalendarSidebar /> with all filters, a data schema transform, and a config object. The developer can npm install, import 6 files, and have the calendar rendering with Arcana’s design in under an hour. Feasibility evaluation happened earlier because the prototypes already behaved like production code.
Reverse-engineered from the running application via Chrome automation. 42 Obsidian notes. 29 components (13 with copy-paste code). 7 token notes. 3 patterns. Every component note includes the actual CSS and HTML — not just documentation, but working code that is read and applied to new designs automatically. The system compounds because every new feature starts with existing components, rather than rebuilding from scratch.
7 pages audited across the live product
42 Obsidian notes — tokens, components, patterns, ADRs
29 components documented with anatomy, variants, states
13 components with copy-paste implementation code
The Figma navbar was fed in as HTML and integrated pixel-perfectly into every prototype. Token constraints meant output stayed consistent without manual correction on each iteration.
The system is a knowledge graph rather than a Figma library. It gets read, applied, and extended with each new component, and it got sharper with every prototype as the tokens and patterns accumulated instead of being rebuilt.
The design system isn’t a Figma library — it’s a knowledge graph. It is read, applied, and extended with each new component. The system got smarter with every prototype because the tokens and patterns accumulated rather than being rebuilt.
Eight versions, each informed by the last. Toggle between them to see how the design moved toward clarity. These are fully interactive — click around.
Each iteration was driven by specific design judgment: V2 removed 15+ elements because density was defeating usability. V3 shifted to a read-first model because search behavior indicated consumption, not creation. V4 expanded scope after alignment on simplicity. The iterations made tradeoffs visible and stakeholder conversations concrete.
Interactive prototypes are best experienced on desktop where you can click through the full UI.
Not every idea survived contact with the team. Some features were deliberately removed or replaced after testing and feedback. Each cut made the product sharper.
The final deliverable was a production-ready package built for the dev team’s chosen library (FullCalendar React), not a Figma file with redlines. The developer doesn’t interpret a design; they import 6 files, run npm install, and the calendar renders with Arcana’s design system. Design-to-code translation: zero.
Prototype fidelity reduced ambiguity for engineering. The handoff included interaction states, layout behavior, and token-mapped CSS rather than static mockups. Engineering could evaluate feasibility earlier because the prototypes behaved like the real product.
The developer doesn’t interpret a Figma file. They import 6 files, run npm install, and the calendar renders with Arcana’s design system. Design-to-code translation: zero.
Speed wasn't the point — visibility was. Iterating in working prototypes meant the tradeoffs showed up early, while they were still cheap to change, and the spec engineering received was one stakeholders had already used.