Xplored Work Log 1: How a Designer Built a Real Product with AI

• Designing a Supabase-backed content structure

• Refining the submission flow for curated content

• Implementing the upload flow for Works

• Polishing how Insight content is structured and presented

• Setting up Vercel deployments and cache revalidation

Of course, AI didn't magically do everything on its own. It was, however, an incredible accelerator for getting past repetitive chores and quickly setting up solid architectural bones. My job was closer to being the product driver—constantly asking: "Is this the right direction?", "Is this actually usable?", and "Does this interaction feel intuitive from a designer's perspective?"

3. Starting with the design system

The very first thing I tackled was design tokens.

Whenever colors or typography scales changed in Figma, the codebase had to stay in sync. Doing that manually every single time sounded like a nightmare.

So I wired up Figma MCP to read Figma variables directly, saved them as token JSONs, and built a pipeline that automatically generates CSS variables and TypeScript maps.

After that, I cleaned up core UI components like Card, Tab, and HeaderMenu. I also plugged in Storybook and Chromatic so I could visually audit components in context across actual screen layouts.

One thing became crystal clear through this process:

The cleaner your Figma Auto Layouts, variants, and token names are, the better the AI-generated code output becomes.

A design system isn't just documentation for human teammates—it serves as a crucial reference standard for AI while it codes.

4. Setting curation criteria

While building Xplored, the goal was never "let's aggregate as many links as possible." It was far more important to curate quality tools thoughtfully so designers could evaluate them at a glance.

So every time I looked at a new resource, I kept asking myself:

• Which phase of the workflow does this tool actually solve?

• Is there a genuinely compelling reason for a designer to try it out?

• What makes it stand out from similar alternatives?

• Where does it land in the journey between ideation, creation, and launch?

Early on, the tone of the write-ups was pretty inconsistent—some read like dry feature spec sheets, while others felt like casual personal blog posts.

So I kept refining our standards for categories, tags, one-line pitches, and practical usage tips. AI helped tremendously with formatting drafts and speeding up research, but the final editorial call always had to come from a human.

At the end of the day, curation isn't about automation—it's about perspective. I didn't want Xplored to be a massive dump of links; I wanted it to be a trustworthy, practical resource map designers could comfortably explore.

5. Expanding into Works and Insight

Resource listings alone still felt like 2% short. Introducing great tools is fine, but I wanted to show how to understand those tools and connect them to real-world outcomes.

That’s why I expanded the product into Insight and Works:

• Insight: A space covering articles and books around design, product, AI, and branding from a practitioner's lens. Articles are presented like scannable curation notes, while books are summarized like key takeaway notes.

• Works: A gallery where users can post what they've built. They can bundle a cover image, gallery shots, description text, resources used, tags, and a live product link into a single post.

I wanted it to feel like more than just dropping a final hero image—it's designed to be a compact mini case study where you document what you bu