Zaredon is my independent product, born from a problem I kept seeing inside companies: professionals who were new to vibe coding could prototype quickly, but struggled to make those prototypes follow the company’s Design System.
Interface studyScroll to unpack the thinking ↓
I created Zaredon after experiencing the same friction in different work environments. Vibe coding made prototyping more accessible, but professionals with less experience in code or prompt structure found it difficult to tell an agent how the company’s interface should look and behave. The opportunity was to turn the Design System the team already maintained into practical guidance an AI coding tool could follow.
Speed was not the real issue. Without enough context, coding agents improvised components, spacing, colors and interaction patterns. Less-experienced professionals often did not know which instructions to provide, while design-system knowledge remained scattered across Figma, Storybook and token files.
Zaredon connects those existing sources, lets the team review what belongs and generates one readable Markdown guide. The output carries approved components, tokens and usage rules into tools such as Codex, Cursor and Claude Code.
The live product turns a fuzzy “give the AI our design system” request into a clear three-step workflow: connect, review and use. It is available publicly as a free product; adoption metrics are still being gathered, so this case focuses on the shipped experience and its design decisions.
I started by listening for the moments where the experience stopped making sense.
Workflow mapping, comparative product review, source-format analysis and iterative evaluation of the connect, review and export journey.
The people who needed the most help were not necessarily engineers. They were designers and other professionals capable of shaping an idea, but unsure how to give a coding agent enough structured context to respect the company’s system.
Make review the center of the experience, so AI receives deliberate guidance rather than an unfiltered dump of design-system data.
The product is explained as connect, review and use. That sequence keeps a technical workflow understandable before the user creates an account.
Approved and excluded items are explicit. Zaredon helps organize context, but the team remains responsible for deciding what represents the system.
A readable, portable file works across coding tools, can be versioned and does not lock the team into a proprietary handoff format.
Figma, Storybook and token sources visually converge into a reviewed file in the hero, making the value proposition understandable without a long explanation.
The live experience was iterated across the complete path from landing-page comprehension to source connection, review and export. Copy and visual hierarchy were refined to clarify that Zaredon organizes a team’s existing system rather than replacing Figma or Storybook.
Building my own product reinforced that designing for AI tools is still designing for people. Zaredon is not meant to replace Design System knowledge; it makes that knowledge easier to carry into a new prototyping workflow. The most important decision was keeping a human review layer between the company’s sources and the agent.