Fugi

Designing a visual workspace to collect references, organize them, and find the right one later

Chrome Extension

AI-Native Design

Project Type

Chrome extension

Context

Turn scattered design references into one visual workspace

This project focuses on the path from spotting a reference while browsing, to saving it, organizing it on a canvas, and finding it again later. I defined the product with Claude, studied how Figma, Milanote and Eagle handle references, designed each step of that path, and built the extension with AI agents in Codex and Claude Code.

The Problem

I realized saving references was easy.
Finding them again wasn’t.

As a designer, I always kept dozens of tabs open: some I thought would help the current project, others I saved for future ideas.

But when I finally needed one, I remembered its color or layout, not its name, and tabs and bookmarks can only be searched by name. Over time I forgot what I had saved, so I searched for the same things again and again, only to realize I’d seen them somewhere before.

As a designer, I always kept dozens of tabs open: some I thought would help the current project, others I saved for future ideas.

So I set out to build a tool that solves this for me, starting with what existing tools already do well.

Competitive Analysis

Each tool did one step well.
None covered the whole path.

I explored existing tools. Each one was strong where another was weak, so I still needed a different tool for each step.

Save

Milanote · Web clips wait until I place them on a board.

No search by color or shape.

Organize

Figma · A freeform canvas to compare side by side.

No one-click saving from the browser.

Find

Eagle · A library I can search by color, shape and tag.

No canvas to lay references out freely.

So I began to wonder: could I build one tool that brings all three together? Save easily, organize freely, and find it again.

Core Idea

Save the idea first.
Organize it later.

To bring all three together, my idea was to separate saving from organizing. When I spot a reference, I rarely know where it belongs yet, so it lands on one canvas first. Later, I organize it and find it again on the same canvas.

From Milanote

Save without deciding

One click. It waits in Unplaced.

From Figma

Organize anytime

Move, group or split as ideas change.

From Eagle

Find it by how it looked

Search the canvas by color, shape or tag. Plus find similar.

Building with AI

From Markdown rules to a working product

I started using AI to support every step of building this product. I used Claude to define the product, then split the build across AI agents in Codex. Instead of Figma mockups, I wrote the design rules as files every agent could read, and designed directly in code. My role was to define the problem, make tradeoffs, coordinate the work, and validate the experience.

Define scope & models

Cards, tags, folders and the first workflow, written in BUILD.md.

Claude

→

Establish design rules

Research became a design system, written in COMPONENT_SYSTEM.md and TOKENS.json.

Codex

→

Align, then delegate

Every task gets an owner, inputs, outputs and a way to check it.

↓

Refine the rules and test again

Update the shared rules

Findings go into DECISIONS.md and update the rules.

Codex · Claude Code

⇄

Refine the rules and test again

Test the complete flow

Real pages in Chrome, backed by automated tests.

Codex · Claude Code

←

Refine the rules and test again

Build in parallel

Each agent builds its part, then they cross-check.

Codex · Claude Code

Define scope & models

Cards, tags, folders and the first workflow, written in BUILD.md.

Claude

↓

Establish design rules

Research became a design system, written in COMPONENT_SYSTEM.md and TOKENS.json.

Codex

↓

Align, then delegate

Every task gets an owner, inputs, outputs and a way to check it.

↓

Build in parallel

Each agent builds its part, then they cross-check.

Codex · Claude Code

↓

Refine the rules and test again

Test the complete flow

Real pages in Chrome, backed by automated tests.

Codex · Claude Code

⇅

Update the shared rules

Findings go into DECISIONS.md and update the rules.

Codex · Claude Code

Showcase

I designed Fugi.
Then I built it.

The result is Fugi. It saves a reference in one click and places it on the canvas automatically. When I need it again, I find it on the canvas and bring it straight into Figma.

/ 01

Save from any page in one click

Hover an image and click +, or use the toolbar or right-click menu. The reference lands on the canvas.

/ 02

Group references, or break them apart

Select a few cards and group them into a folder that opens like its own canvas. Ungroup keeps every card.

/ 03

Tag references in seconds

The quick tag editor suggests tags I’ve already used. Tags only filter the canvas; they never move a card.

/ 04

Find it by color or shape, not by name

Filters follow how designers remember: by color, shape, type or tag. The options change with my canvas, so the colors are the ones in my own references.

/ 05

Always one click from the source

Right-click any card to open the original page. Every card keeps its source, and dead links are marked Offline.

/ 06

Cards that adapt to the content

Images, websites, articles, social posts, videos and code repos each get their own card, and key information surfaces automatically.

/ 07

Stack links from the same platform

Links saved from the same platform stack into one card instead of spreading across the canvas.

/ 08

Copy a selection to Figma in one click

Select references and copy them as layers. They paste into Figma as separate layers, ready to design with.

What I learned

Agents move fast. Clear rules keep them on track.

In this project, I learned that agents need the full context before execution. So I align with AI on the requirements, define each role's responsibilities and boundaries, and document key decisions, which reduces misunderstandings and rework.

18 button styles

1 shared button

Design system drift

Enforce the design rules

AI agents built one-off components, so I learned to set rules for reusing the same ones.

Loose roles

Clear contracts

Agent sprawl

Limit new agents

More AI agents split the context, so I learned to reuse existing ones before adding new ones.

Local tests

Real pages

Real-world testing gaps

Test in real conditions

Local tests missed bugs, so I learned to test early in real environments.

Fugi

Context

Turn scattered design references into one visual workspace

The Problem

I realized saving references was easy.Finding them again wasn’t.

Competitive Analysis

Each tool did one step well.None covered the whole path.

Core Idea

Save the idea first.Organize it later.

Building with AI

From Markdown rules to a working product

Showcase

I designed Fugi.Then I built it.

Save from any page in one click

Group references, or break them apart

Tag references in seconds

Find it by color or shape, not by name

Always one click from the source

Cards that adapt to the content

Stack links from the same platform

Copy a selection to Figma in one click

What I learned

Agents move fast. Clear rules keep them on track.

I realized saving references was easy.
Finding them again wasn’t.

Each tool did one step well.
None covered the whole path.

Save the idea first.
Organize it later.

I designed Fugi.
Then I built it.