Product Design System Design AI-Directed Development Personal Project

Synapse — AI Knowledge System

A knowledge management app I conceived, specified, and directed into existence using AI as a development partner. Every architecture decision, feature, and design token came from me — the implementation was AI-assisted.

Personal / Side Project
Product Designer · System Architect · AI Director
Concept → Spec → AI-directed implementation
10,712 lines · 32 components · 4 AI providers
🧠

Synapse V2

A second-brain app I designed for how a neurodivergent mind actually works — fast capture, nonlinear connections, AI on demand, no friction. Conceived and directed; AI-assisted implementation.

32Components
10K+Lines
4AI Providers
15AI Tools

Every note-taking app assumes you think in folders

Notion, Obsidian, Apple Notes — they all require you to decide where something lives before you can capture it. For ADHD brains, that decision cost is exactly where things go to die. By the time you've found the right folder, the thought is gone.

I needed a system that could capture first and organize later — ideally never. One that could surface forgotten things at the right moment, connect ideas across contexts, and bring AI in without leaving the app.

"The best second brain isn't a filing system. It's a thinking partner that remembers everything and surfaces the right thing at the right time."

What was built

32Components
21Action types
7Card types
15AI tools

Single-file, no build step

I specified that Synapse should be a single JSX file — a deliberate constraint. No bundler, no dependency sprawl, no CI/CD setup needed. Drop it in a project, it runs. That decision shaped everything: it forced extreme modularity within a flat file, with every component cleanly namespaced and every visual token in one design system object I defined.

┌─ DS (Design System) ─────────────────────────────────────────┐ │ colors · typography · spacing · radius · shadows · animations│ └───────────────────────────────────────────────────────────────┘ ↓ ┌─ storage (IndexedDB) ────────────────────────────────────────┐ │ put · get · getAll · delete · clear │ │ No 5MB cap. Blob-safe. Async-safe. │ └───────────────────────────────────────────────────────────────┘ ↓ ┌─ StoreProvider (Context + useReducer) ───────────────────────┐ │ 21 action types · auto-saves on every dispatch │ └───────────────────────────────────────────────────────────────┘ ↓ ┌─ AppContent ─────────────────────────────────────────────────┐ │ Header · Tabs · QuickCaptureBar · FocusWidget │ │ BrainCard grid (3-col) · Sidebar widgets │ └───────────────────────────────────────────────────────────────┘

7 decisions I made that defined the system

01

IndexedDB over localStorage

localStorage caps at 5MB and blocks the main thread. IndexedDB is async, handles binary blobs (images, audio), and can store gigabytes. The tradeoff is API complexity — wrapped in a clean async abstraction so components never touch it directly.

02

Single design system object (DS)

Every color, font size, radius, shadow, and spacing value lives in one DS object at line 11. No Tailwind classes, no CSS variables scattered across files. Any visual change happens in one place and propagates everywhere.

03

Context + useReducer over Redux

Redux adds a build dependency and boilerplate. React's built-in context + useReducer gives the same predictable state flow for a single-page app. 21 action types cover every state transition with full type safety via string constants.

04

AI provider abstraction

A single callAI() function routes to Claude, GPT-4, Gemini, or Perplexity based on user config. Links auto-route to Perplexity for web grounding. Provider swap requires zero changes to any component — only the config changes.

05

QuickCaptureBar with intent detection

A regex pattern list distinguishes questions/commands from thoughts. "how do I..." routes to AI chat pre-filled. "reminder to call..." creates a card. One input, two destinations, no mode switching.

06

Gamification as a focus tool, not engagement bait

The XP/level system (Seedling → Mastermind) tracks actual cognitive work: cards created, reviews completed, streaks maintained. It's not there to drive retention — it's there to make the heavy cognitive lift of processing your backlog feel like progress.

07

Triage Mode for overwhelm

One card at a time. Keep, Archive, or Delete. Processes the full review queue with no paralysis from seeing everything at once. Designed specifically for the "I have 200 things I haven't processed and I can't start" state.

32 components, one system

📸

Multi-type Capture

7 card types: Note, Link, Image, Video, Voice, Doc, Chat. Paste, drag-drop, URL detection, file upload. QuickCaptureBar always visible.

🤖

Per-Card AI Agent

15 tools per card: rename, rewrite, tag, set due date, link to other cards, generate checklists, estimate time, speak summary via TTS.

🗺

Visual Mindmap

Draggable node graph of card connections. AI suggests related cards based on content similarity. Manual connections also supported.

🎯

Today's Focus

Up to 5 priority tasks with completion tracking, priority levels, and progress bar. Cards can be added to focus from anywhere in the app.

🔍

Fuzzy Search

Searches title, content, tags, OCR text from images, AI insights, and themes. Scored by match quality — exact first, fuzzy last.

📅

Calendar View

Cards with due dates plotted on a calendar grid. Full month view with click-to-open. Integrates with Focus system.

🌪

Brain Dump Mode

Rapid-fire multi-line capture for unloading everything at once. Each line becomes its own card. Designed for overwhelm states.

📊

Brain Stats

Gamified level system, XP bar, daily streak, stats grid. Tracks active cards, pinned, review queue, and archived items.

Four providers, one interface

Users configure their preferred AI provider in Settings. The same components work regardless of which model is active. Auto-routing sends link cards to Perplexity (if configured) for real-time web grounding.

🟣 Claude (Sonnet)
🟢 GPT-4o
🔵 Gemini 2.5
🔷 Perplexity Sonar

The global AI Chat panel is context-aware — it knows all cards, focus tasks, and tags when answering questions. The per-card NodeChat agent has 15 discrete tools that call the same provider abstraction.

What this project demonstrates

Synapse started as a personal need and became a full product specification. I directed an AI to implement my vision — which meant I had to think like a system architect before a single line was written. Every decision had to be articulated clearly enough for AI to execute correctly. Vague direction produces vague software.

The most important UX insight: friction at capture kills the system. Every feature in Synapse is downstream of that principle. The AI integration, the gamification, the Triage Mode — all exist to reduce the cost of processing information, not to add complexity.

This project sits at the intersection of product thinking and AI-directed development — a working model of how designers can ship software without traditional engineering resources. The design system, the architecture decisions, the feature priorities — those were mine. AI was the implementation partner.

Directing AI to build something taught me that clarity of thought is the real skill. If you can't specify it precisely, you don't actually understand what you want.