Background

During my career break, I explored emerging AI technologies. Below are my experiments in learning and building products with agentic coding tools:

• React/CSS design system
• Color picker

Project 1: React/CSS Design System

Process

With just a few prompts, the AI tool generated a mini React/CSS design system with Button and Card components:

The visual style was secondary at this stage. My focus was on analyzing the differences between traditional HTML/CSS/JS components and JSX/CSS.

Also for this reason, I skipped Vite for now, and instead used Babel to compile JSX in the browser.

JSX and CSS design tokens

I learned JSX syntax and design tokens management through this AI-generated code.

However, when I tried to extend the UI components beyond just buttons and cards, the AI-generated code didn't seem right: it hardcoded the colors within the components rather than using tokens. I was unsure about this, and then tested by generating the same design system in different AI products.

Eventually, the AI agent acknowledged the issue and corrected the code:

Agent replaced the hardcoded color with design tokens

That wasn't the only exception I encountered.

The AI agent occasionally generated code with defects. Some issues were critical errors that prevented the code from running at all; some were minor style bugs, like this:

This AI-generated switch has a border rendering issue

When fixing this issue, instead of using a conversational prompt, I selected the area and added a comment. The agent understood and resolved it immediately:

This interaction is much more efficient, as I don't need to describe where the issue is.

After a few rounds of iteration, the design system now supports toggling between light and dark modes:

I am still iterating on this design system to see how far it can go.

Key Takeaways

After comparing the code generated by different AI agents, I summarized the structure of the base design tokens:

All UI components are built upon these base design tokens. For example:

• Gray colors tokens are used to define colors for text, layer background and border.
• Font size tokens are used to define font-size for heading, body text, captions, etc.
• A Button component consists of typography, spacing (for padding) and border radius, with different color combinations applied to the background and border for its variants.

The study is still ongoing, and I will update in the future.

Project 2: Color Picker

This was my first AI coding project. When picking colors, I have a particular fondness for color values that are numerically satisfying in Hex, RGB, HSL or other formats.

Main AI tools
Cursor, TraeWork

Purpose

In most design applications, color code is displayed in one of the following formats:

Select color code format in Figma

To analyze the relationships between these color codes, I had to constantly switch formats in the dropdown, which was inefficient.

To view all formats simultaneously, I decided to vibe-code a handy tool with the following requirements:

• Display Hex, RGB, HSL and HSB in one screen for any given color code
• Lightweight, with instant response on open and calculation
• Work without a network connection

Process

Building this function is straightforward for AI coding agents nowadays. I managed to build a single web app that displays color values in four different formats and runs locally.

The feature works quite well. I also added a 'Save color' feature, so I can easily compare new colors with previously saved ones:

When I tested it in a smaller viewport, however, the responsive code didn't seem to cover the font sizes at mobile breakpoints, as the titles should take up less space.

I previewed the rendered page within the agent and pointed out the div that needed fixing.

The agent implemented and tested it in-browser.

Bug Fixing

As I kept iterating with enhancements, some bugs started popping up.

For example, when I tried to optimize the input for RGB code, the agent implemented the feature but messed up the layout:

The Copy button is positioned incorrectly.

To fix this issue, I selected the div and commented with instructions, then the agent understood and implemented it.

Left: Human selected and instructed   |   Right: Agent analyzed and implemented

After a brief generation time, the Copy buttons were correctly positioned, and the layout issue was resolved:

Another bug was: when I typed in one input field, the values in the other fields shifted unexpectedly. The AI agent fixed it by trying different methods. It's interesting to observe it "thinking" and "testing" step by step.

The experiment is currently underway as I continue to develop new features: