Back to portfolio
Lifedesigner — glowing orb floating above a table, cinematic atmosphere
Issue #042026

Studio concept · MCP-native AI

Lifedesigner.

A voice-first life designer that lives inside your existing AI — not in a new chat window.

Status
Live · Open-source · 48h build
Year
2026
Category
Studio concept · MCP-native AI

The pitch

04 chapters

What if your AI didn't live in a chat window? Most AI products today look the same: a text box, a sidebar, a floating button that opens another conversation. To get help with your life, you have to go to the AI — open the app, set up the prompt, explain your context every time.

I wanted the opposite: an AI that lives where you already are, knows what's already on your calendar, and reaches into your week before you ask. Not a productivity coach, not a habit tracker. Closer to a friend with access to your diary.

The right surface for a life-design agent isn't a new app — it's the agent inside the app you already use.

The whole site is built around a single persona — Maria, 31, a product designer in Brooklyn who lost her Saturday morning runs after a move. The page walks through her three months with the designer: what it reads (Gmail, Calendar, Strava), what it asks ("imagine your dream Saturday morning"), what it writes (a 12-week program of micro-habits), what changes (she runs 10 km on Saturday of week 12 — nothing else in her life had to).

MCP is what makes this possible. The right surface for a life-design agent isn't a new app — it's the agent inside the app you already use. Lifedesigner doesn't ask you to install another chat. It plugs into Claude, ChatGPT, Open Web UI or Cursor via a single MCP endpoint.

The stack

Front

Next.js 14 (App Router)TypeScript strictCSS Modules

Graphics & voice

WebGL 1 (raw, no Three.js)Web Audio APIWeb Speech API

AI tooling

Claude DesignClaude CodeMCPEdge runtime · OG images

Behind the scenes

04 steps

How I built it in 48 hours.

Designed in Claude Design in an afternoon. The hero, the orb concept, the section rhythm, the early copy. Surprisingly strong for editorial, atmospheric work.

Built in Claude Code in ~48 hours. It scaffolded the Next.js project, wrote the WebGL shaders, the React components, the i18n, the deployment config.

Four orbs share one ~80-line fragment shader — hero, mini-orb in the YourTurn input, sticky bottom-right that follows scroll, footer. Domain-warped FBM noise gives the swirling colour body. Premultiplied alpha to fix iOS Safari's compositing bug.

No Three.js, no Tailwind, no UI library, no next-intl. The project's claim is minimal, so the dependencies are too. Bilingual EN/FR with a tiny ~5 KB custom i18n.

Links

Lifedesigner