Building the Component Sandbox System

Natural Intelligence's comparison pages are built around a single, highly configurable product card. Over time this component grew into one of the most complex pieces of UI in the product — dozens of features, states, and configuration options, designed iteratively across multiple teams.

The problem was that no single person owned the logic of what could coexist with what. Multiple product managers and designers made local decisions that made sense individually but created conflicts systemically. Which features could be combined? What were the real limits of the component? That knowledge lived in people's heads — nowhere else.

Stakeholders kept requesting feature combinations that were already possible, already impossible, or already conflicting with something else. The design team was spending time re-explaining constraints instead of designing.

At the same time, business teams who needed to send partner mockups for approval had no way to do it themselves. Every mockup required opening a ticket — waiting for a designer or ops team member to configure a page, then iterating from there. It was slow, and it created bottlenecks that delayed deal closures.

The card explorer sandbox emerged from this specific pain. If stakeholders could see the full capability and constraint map of the product card — every variant, every state, every valid combination — they could stop guessing. Redundant conversations would drop. Tickets would be more specific, more actionable.

By that point the team already had two other sandboxes: one for the Listicle format (a partner list used in editorial and media pages) and one for the Chart format (a ranked product comparison page by category). Each had been built separately in Figma Make as standalone prototypes, and each had worked fine in isolation.

With three sandboxes now existing independently, shared components were going to drift. The product card appeared in all three contexts, maintained in three separate places. The longer that continued, the harder it would get to keep them consistent.

One platform, with shared components in one place, made the most sense. The question was how to get there.

Rather than rebuilding in Figma Make again, the decision was made to move to code. The platform needed to be maintainable, extensible, and something the design team could contribute to directly — not a prototype that lived outside the real workflow.

All three existing Figma Make projects were exported and handed to Claude Code with full context. From there, Claude Code rebuilt the entire platform from the ground up as a single unified Next.js app — one codebase, one deployment, shared components extracted into a single location, one route per sandbox.

The design team now runs this like a small engineering team. Every contributor has a locally cloned repo, works on branches, pushes to a staging environment, reviews, and merges to production. This is new behavior for a design team — and it's deliberate. Getting closer to code, closer to the development workflow, and closer to collaborators is part of a broader team transformation that's been underway.

Each sandbox shares the same underlying product card component. Changes to the card propagate everywhere — no more maintaining three diverging versions.

The platform serves distinct audiences with distinct workflows, both of which had been bottlenecked by the absence of a self-serve tool.

The platform is now a single source of truth for component capabilities and limitations across the organization. The volume of redundant tickets and repeated constraint conversations has dropped. Business teams move faster on partner approvals. The design team maintains one codebase instead of three.

The less obvious outcome is what this demonstrated about how the design team can work. Using AI tooling to rebuild and consolidate a real production platform — without a dedicated developer — proved that the gap between design and engineering is closable, and that it's worth closing deliberately.

As AI Product Designer, I led this project end-to-end — from identifying the consolidation opportunity, to structuring the Claude Code rebuild, to establishing the GitHub-based contribution workflow for the design team. This sits at the intersection of design systems thinking and AI-enabled execution, which is exactly the space I'm focused on.

The platform is a foundation, not a destination. Three threads are already in motion.