7월 17일 금요일
7월 17일 금요일
7월 17일 금요일
7월 17일 금요일
Xplored is a curation site for designers.
It started with a simple idea: gather useful tools for designers in one place. But as I built it, I wanted more than just a collection of links—I wanted a flow where designers could find ideas, choose tools, make something, and come back to reference it later.
Xplored is now largely made up of three areas.
It has grown far beyond what I first expected. It began as a small toolkit, but now it is becoming closer to a curation platform where resources, writing, and work are connected to one another.
The first question I was curious about was this.
Could a non-developer use AI to build and operate a real product?
So after the initial planning, I worked on many parts of the project with AI.
Of course, AI did not do everything on its own.
It was a huge help in quickly handling repetitive work and establishing structure. My role was closer to continually judging whether the direction was right, whether the result was actually usable, and whether the experience felt natural from a designer’s point of view.
The first thing I worked on was design tokens.
When colors or type scales changed in Figma, the code had to change as well. Matching that by hand every time was too cumbersome.
So I connected Figma MCP, read Figma variables, stored them as token JSON, and built a structure that generates CSS variables and TypeScript maps.
After that, I organized UI components such as Card, Tab, and HeaderMenu. I also connected Storybook and Chromatic so I could check how components looked in real screens.
One thing became clear here.
The better Figma’s Auto Layout, variants, and token names are organized, the better the AI-generated results become too.
The design system was not only documentation for people, but also an important reference standard for AI when working.
What mattered most in Xplored was not collecting as much as possible.
It was more important to organize good tools so designers could judge them quickly.
So every time I looked at a resource, I kept asking questions like these.
At first, the content tone was uneven. Some entries read like feature descriptions, while others felt closer to personal impressions.
So I kept refining the standards for categories, tags, one-line descriptions, and practical tips. AI helped with repetitive organization and draft review, but the final judgment still had to be made by a person.
In the end, the core of curation was not automation, but perspective.
The Xplored I wanted to build was not a site with lots of links, but a practical resource map that designers could trust and explore.
Resources alone felt a little insufficient.
I did not want to stop at introducing good tools. I also wanted to show how to understand those tools and connect them to real work.
So I expanded Insight and Works.
Insight is a space for organizing articles and books related to design, product, AI, and branding from a designer’s perspective. Articles are organized like curation notes that can be scanned quickly, and books are organized like reading notes that help capture the essentials.
Works is a space where users can upload projects they made. They can register a cover image, gallery images, body content, used resources, tags, and a link to the final result together.
I wanted it to feel not just like a place to upload the final image, but like a small case-study space where you record what you made and what resources you used.
The part I thought about the most was the connection structure.
When a user enters the resources used in Works, Xplored links them to the resources registered in the catalog. Then, on the resource detail page, you can see Works made with that tool. Insight content is also linked with related resources.
The flow I wanted to build looked like this.
At first, these were all separate pages.
Now they are gradually being connected into one flow.
To run it like a product, the invisible parts mattered quite a bit too.
I organized the cache structure so that only the pages needed would refresh when content changed, and I split public / link-visible / private Works so they would be shown differently according to permissions.
I also kept refining the upload experience. Things like the project registration modal, step-by-step input, the body block editor, image uploads, and resource autocompletion.
Each one looks like a small feature, but when you actually upload and edit something, these details feel pretty significant.
Of course, there was a lot of trial and error.
I changed AI tools too often, which broke the context, and I had to rewrite a lot when moving from Airtable to Supabase.
There were issues that worked locally but broke on Vercel, and times when Storybook threw runtime errors too.
In particular, I felt that I should not trust AI output as-is for security-sensitive areas like environment variables or Supabase keys.
AI builds quickly, but security, permissions, failure states, accessibility, and visual polish had to be reviewed by a human all the way through.
The biggest thing I felt during this project was that AI made it possible for a designer to implement their own ideas directly from start to finish.
In the past, after making the mockup, it was common to shift into handoff-focused work with the development team. But this time, I could keep going past the mockup and directly work on the real service structure, data flow, upload experience, and post-deployment operations.
As I built it myself, things I could not easily see just by looking at the screen started to become visible, and my perspective on the service changed a little too.
AI did not replace everything, but it clearly reduced the distance from mockup to real output. Thanks to that, I was able to understand the overall service much more holistically as a designer.
This side project made design feel more fun, and it made me want to try a wider range of things.
Please look forward to a better and better Xplored.
