Creative Mantra
CLIENT ENGAGEMENT · QUIKEST.AI

The workspace where the whole team points at the same person.

A collaborative AI workspace for marketing, product, and sales teams. Generate personas in minutes, interview them like real customers, and export them into a codebase when the work moves downstream.

A persona portrait generated by Quikest — a product-operations leader at a corner-window workstation.
the founder · sample persona
3–5
Personas per product definition
4
LLMs orchestrated · Gemini · GPT-4o-mini · Imagen · Flash Image
3
Export formats · .claude/ · .cursor/ · generic
1
Real-time cursor, per teammate
the project

A client's workspace, built for the question every cross-functional team keeps re-asking.

Quikest.ai is a client SaaS we designed, built, and continue to operate. A multi-tenant workspace that turns a five-field product definition into a set of personas a team can hold in common — edit together, interview, and travel with into the codebase. Live since 2024.

Client
Quikest.ai

Client SaaS · commissioned, designed, and shipped by Creative Mantra. Multi-tenant workspace platform.

Scope
Persona synthesis

Real-time collaborative editing, AI-generated portraits and environments, agent-context export.

Role
End-to-end

Product, design, and engineering — delivered end-to-end by Creative Mantra.

Stage
Live since 2024

7-day trial · Free and Pro plans. Multi-workspace, permissioned, Stripe-billed.

The Quikest.ai Personas dashboard, showing the workspace nav, personas welcome pane, and the trial and usage panels.
the workspace · dark

“We built Quikest because we kept watching the same failure mode. A marketing lead, a PM, and a sales engineer would each say the customer in the same meeting and each mean someone different. The disagreement about the headline was, underneath, a disagreement about who was reading it. Quikest is what we built to end that argument.”

The Collapse

The moment three teams say “the customer,” they mean three different people.

Three quiet failures every cross-functional team already knows. Set out here plainly, so the rest of the page reads against them.

We built Quikest to make the shared reference a thing — one document, edited together, alive.

Beat 01 · The naming collapse

Marketing writes for one reader. Product prioritises for another. Sales closes a third.

Every cross-functional team has this quiet problem. Nobody is wrong. Nobody is aligned. The disagreement about the roadmap is, underneath, a disagreement about who the roadmap is for.

Beat 02 · The template trap

The persona template is a photograph of a decision, not a working reference.

A PDF, a Miro board, a static slide. It gets filled in once, shared in a launch deck, and then goes stale by the second sprint. Nobody edits it. Nobody talks to it.

Beat 03 · The reference vacuum

Teams improvise — a Slack thread, a call recording, a quote from someone’s memory of a demo.

The reference exists in fragments. It is not in one place. It is not editable together. And it is not something a fourth person joining the team next week can hold in their head.

Discovery

We spent the first month asking teams why the personas they’d already made had stopped being useful.

most
of teams we spoke to had a persona document. Almost none could tell us where it lived.
5
The number of fields it took to describe a product well enough for a persona to be worth generating.
3
The number of export targets engineers actually asked for: Claude Code, Cursor, GitHub Copilot.
1
The number of colour accents we let ourselves keep. Sage — the true brand hex.

“The interviews reshaped three product decisions that we then held to. Everything else on the page follows from these.”

  • A persona has to be editable together.

    The moment a persona sits in one person’s Notion and nobody else can touch it, it starts dying. Real-time collaboration is the fabric, not a feature.

  • A persona has to be interviewable.

    Reading a persona bio is not the same as asking the persona a question. The Ask AI sidebar exists so teams can pressure-test a claim against a live reference.

  • A persona has to travel to where the work happens.

    For engineers that means: into the codebase, as context the AI assistant sees. That is what the .claude/ export is.

A persona is not a form. It is a shared reference — the one the marketing lead will point to when she says she wouldn’t click that headline, the one the product manager will hold in mind when he’s picking between two features, the one the sales engineer will name in a demo to a room of skeptics. Quikest is where that shared reference gets made.

— design principle #1 · Quikest.ai
Architecture

One workspace. Four surfaces. One persona.

The system separates four surfaces by intent — the intake surface (five fields or a URL scan), the synthesis pipeline (two LLM stages plus two image models), the collaborative editor (TipTap on Y.js), and the export surface (.claude/, .cursor/, generic) — and unifies them through a single persona document held in Supabase. Real-time is Y.js + Hocuspocus. Auth is Clerk. Files ride Vercel Blob. LLMs are routed through the Vercel AI SDK.

Quikest.ai solution architecture A five-layer architecture diagram: intake, AI orchestration through Vercel AI SDK routing to Gemini and GPT-4o-mini and Imagen models, TipTap and Y.js editor, Supabase and Clerk data + auth, and the export surface for .claude, .cursor and generic folders. Intake five fields · or a url scan Five-field product formname · industry · type · audience · description URL scanproduct URL · auto-extract intake fields · one-click promote AI orchestration vercel ai sdk · one provider abstraction Vercel AI SDKunified provider layer · streaming · one-line vendor swap Gemini 3 Flashpersona recs · streamedvia OpenRouter GPT-4o-minifull profile synthesis@ai-sdk/openai Imagen 4.016:9 environment scene@ai-sdk/google Gemini 2.5 Flash Image1:1 persona portraitcached in Vercel Blob Ask AI servicepersona-voiced Q&A Editor tiptap · y.js · hocuspocus TipTap v2ProseMirror · slash-AI · DOCX export@tiptap-pro/extension-ai Y.js CRDTcharacter-level merge · no conflict dialogy-indexeddb · offline mirror Hocuspocus serverWebSocket · rooms per documentcursor presence · color-coded Data + Auth state of record Supabase Postgrespersona docs · comments · workspacesRLS enforced · row-level readsRealtime channel · comments Clerk authSSO · session · org membershipJWT → Supabase verifyexternal invites · admin-gated Vercel Blobportrait + environment cacheCDN reads · no LLM re-runregenerate on demand Sharing + Export the persona travels WorkspacesOwner · Write · Readshareable persona URLsthe trust rail .claude/ exportZIP · client-side JSZip.claude/ · .cursor/ · generic/persona rides into the code Token meteringTiktoken · per operationStripe billing · Free · Prono mystery bills
Signature · The Pipeline

Five fields. Or a URL. Three to five personas.

A two-stage LLM pipeline plus two image models — small and fast for the wide-net stage, measured for depth, portrait and environment generated in parallel and cached in Vercel Blob. All unified through the Vercel AI SDK.

The persona pipeline — five stages A horizontal five-stage flow from intake through Gemini 3 Flash recs, user selection, GPT-4o-mini profile expansion, and parallel portrait/environment image generation. signature · the persona pipeline · 5 stages STAGE 01IntakeFive fields · or a URL scan.Lifecycle picker on top. ~90 sec user input STAGE 02Gemini 3 FlashRecommends3–5 candidates.streamed · via OpenRouter ~2 s p95 $ small STAGE 03User selectsPromote whicharchetypes to full. human gate 0 $ STAGE 04GPT-4o-miniExpands to fullpersona profile.@ai-sdk/openai bio · motivationsobjections · JTBD ~6 s p95 $ mid STAGE 05Portrait + EnvironmentTwo image calls · parallel. Flash Image · 1:1 Imagen 4.0 · 16:9 ~8 s p95 $ image cached the shape of the pipeline Small & fast for the wide-net stage. Measured for the depth stage. Two image calls run parallel to the profile. All four models unified through the Vercel AI SDK — provider is a swap, not a rewrite. Every call is metered in tokens against the workspace balance.
A Quikest persona portrait — the founder archetype in a corner-window office, generated by Gemini 2.5 Flash Image.
Marcus Chen
Founder · SMB SaaS · Series A
the founder
A persona biography rendered in the Quikest TipTap editor — 'A day in the life', 'Professional Background', 'Demographics', and 'Influence' sections for a Professional Triathlete persona.
Beat 01 · The intake

Ninety seconds. Five fields or a URL scan.

A team starts one of two ways. They paste a product URL and Quikest scans it — extracting product name, industry, target audience, description — or they fill in five fields by hand. A lifecycle stage picker (Concept through Decline) sits on top.

Beat 02 · Stage one · recommendations

Gemini 3 Flash streams back three to five archetypes.

The intake goes to Gemini 3 Flash Preview via OpenRouter. The output — three to five persona archetypes, each a name, a category, and a short description — streams back to the frontend in real time. Nothing is generated the user did not ask for.

Beat 03 · Stage two · full profiles

GPT-4o-mini expands each into a full profile. Two image calls fire in parallel.

Each promoted archetype goes to GPT-4o-mini for demographics, psychographics, motivations, objections, and a TipTap-ready biography. Gemini 2.5 Flash Image generates the 1:1 portrait. Gemini Imagen 4.0 generates the 16:9 environment. Both cache in Vercel Blob. Both can be regenerated.

“We picked the small model for the wide-net stage, and the measured model for the depth stage. That is not a hack; it is the shape of the problem.”

— internal design review, 2024
Model Orchestration

One workspace. Four models. One SDK.

Quikest routes every LLM and image call through the Vercel AI SDK — a provider-agnostic abstraction that turns “switch from OpenAI to Google” into a one-line change instead of a rewrite. The routing is by job shape, not by vendor preference.

Multi-LLM orchestration — Vercel AI SDK router A routing tree diagram. A central Vercel AI SDK router receives a persona request and fans out to four model endpoints: Gemini 3 Flash, GPT-4o-mini, Gemini 2.5 Flash Image, and Gemini Imagen 4.0. model orchestration · vercel ai sdk router Persona requestintake JSON · job shapeunified call site the abstractionVercel AI SDKprovider-agnostic layerroute by job shape · not vendorone-line vendor swap stream · recsGemini 3 Flash Previewpersona recommendation · streamed · via OpenRouterJSON candidates · ~2s p95$ small profile · depthGPT-4o-minifull profile JSON · biography · JTBD · objections@ai-sdk/openai · ~6s p95$ mid 1:1 portraitGemini 2.5 Flash Imagepersona portrait · 1:1 PNG · face-consistentcached in Vercel Blob · regenerate on demand$ image 16:9 environmentGemini Imagen 4.0environment scene · 16:9 PNG · setting-aware prompt@ai-sdk/google · cached in Blob$ image routing ruleSmall & fast for wide-net.Measured for depth. Two imagemodels for face + room.
JobProvider · ModelSDKOutput shape
Persona recsGoogle · Gemini 3 Flash Preview@openrouter/ai-sdk-provider3–5 archetype JSON, streamed
Full profilesOpenAI · GPT-4o-mini@ai-sdk/openaistructured JSON + rich-text bio
Portrait (1:1)Google · Gemini 2.5 Flash Image@ai-sdk/google-vertexPNG · cached in Vercel Blob
Environment (16:9)Google · Imagen 4.0@ai-sdk/google-vertexPNG · cached in Vercel Blob

Every AI call is metered in tokens (Tiktoken) and billed against a workspace credit balance. When a workspace runs out of credits, the isAiAllowed check quietly blocks the request. No mystery bills.

Portraits · Environments

A persona needs a face. And a room to sit in.

A persona described only in text is a résumé. A persona with a face and a setting is someone the team can picture across a desk. Quikest generates both — and both regenerate on demand. Portraits come from Gemini 2.5 Flash Image; environments from Gemini Imagen 4.0. Both cache in Vercel Blob so the CDN handles retrieval, not the LLM budget.

A Quikest-generated persona portrait — the founder archetype at a corner-window executive workstation.
The founder · corner-window executive
A Quikest-generated persona portrait — the designer archetype at a natural-light workstation.
The designer · natural-light desk
A Quikest-generated persona portrait — the SME buyer archetype, in-transit at an airport gate.
The buyer · airport-in-transit
A Quikest-generated persona portrait — the working-parent archetype in a hybrid home office.
The parent · hybrid home office
A Quikest-generated persona portrait — the athlete archetype on an outdoor training trail.
The athlete · outdoor training trail

Portraits and environments are stored together as a single persona artefact — the person and the room they sit in. That’s how the product renders them, and how this page presents them: not two files, one reference.

Signature · Ask AI

The interesting thing that happens after a persona exists is that a team starts talking to it.

A Quikest persona document open in the editor with the Ask AI sidebar on the right — showing four AI-generated follow-up questions and a regenerate control.
Ask AI conversation flow A horizontal message-flow diagram showing four stages: user question, persona context loaded, Gemini 3 Flash response, and rendered chat UI with follow-ups. signature · ask ai conversation flow STAGE 01User asksThe way you’d type it in Slack.MWould you payfor this?What would makeyou cancel week one?typed into sidebarno prompt engineering STAGE 02Persona context loadedStitched into the prompt.profilename · role · demographicsbiographymotivations · objections · JTBDproduct contextintake fields · lifecycle stageprior Q&Arolling conversation historyone prompt · one call STAGE 03Gemini 3 Flash respondsIn-character. Streamed.AIvia Vercel AI SDK · streamed STAGE 04Rendered in chat UIBubble + follow-ups.Probably not at $49/mo.My team already pays forNotion. I’d need one clearworkflow it does better.source · SME buyer biofollow-upsWhat workflow specifically?What would justify $49?Would a team plan help?
Ask AI · SME buyer persona live
M
Would you pay for this?
Q
I would want to try it for a week first. My last three SaaS purchases were annual commitments I regretted within a month. If there’s a real free trial — not a ‘call our sales team’ trial — I’d probably start there.
follow-ups · the persona’s next questions
Beat 01 · The prompt

A team member types a question the way they’d type it in Slack.

Ask AI sits in a sidebar on desktop, a modal on mobile. Would you pay for this? What would make you cancel in the first week? What headline would stop your scroll? No prompt engineering. Send.

Beat 02 · The response

Persona profile, biography, product context, prior Q&A — stitched into one prompt.

The response comes back in-character. Where the answer makes a claim that has a source, source references — links, images — attach beneath the response.

Beat 03 · The follow-ups

Three suggested follow-ups. Refreshable. Clickable.

Not generic follow-ups — the questions the persona would most likely raise next. The team is not drafting the next question from cold. This is the reference talking back.

“The persona started to feel less like a document and more like a colleague we could tap on the shoulder.”

— early-access user, 2024
the surface · tiptap v2

A persona is a document. The document is editable.

Every persona in Quikest is a TipTap v2 document — ProseMirror underneath, Y.js binding on top, TipTap Pro AI extensions for slash-command completions and structured export. Which is a technical sentence for what it feels like to use: a Notion-caliber editor with real-time sync, real cursor presence, and an AI menu that respects the persona context you’re editing against.

Ext 01

Slash-command AI

/rewrite, /expand, /simplify · tone from 14 options · language from 13.

flip
Extension

@tiptap-pro/ extension-ai

Prompt-aware completions bound to the persona document context.

v3.19.0
Ext 02

Tables, TOC, drag handles

Notion-parity editing primitives inside the persona surface.

flip
Extension

TipTap v2 core

Tables, TOC, DragHandle, Typography — the base extensions.

v3.19.0
Ext 03

Task lists, details

Structured biography sections. Jobs-to-be-done as checkable tasks.

flip
Extension

TaskList · Details

Semantic block nodes that flatten cleanly on DOCX export.

core
Ext 04

DOCX export

One-click download. Clipboard-copy Markdown as a second path.

flip
Extension

@tiptap-pro/ export-docx

Renders the persona document to a Word file the wider org can open.

v2.18-beta.6
Ext 05

Highlight · image · link

The polish extensions that make a persona document read like a designed page.

flip
Extension

Highlight · Image · Link · Typography

Persistent formatting the CRDT tracks alongside the text.

core
Ext 06

Character count · focus mode

The writing-craft extensions. Small features. Big effect on drafts.

flip
Extension

CharacterCount · FocusMode

Enable per-workspace. Off by default. Writers ask, we ship.

core
TipTap persona document schema A left-to-right diagram of the TipTap v2 persona document schema — ProseMirror tree on the left, block anatomy on the right. the surface · tiptap v2 · document schema prosemirror treePersona documentdocTipTap root · ProseMirror schemaheadername · role · avataridentityage · demographicsbiographyrich text · slash-AI enabledpsychologymotivations · objectionsbehaviorsjobs-to-be-done · quotesY.js binding on top · rooms per document block anatomy · one field, one blockNameheadingNode · h2text · plainrequiredAge · demographicsinlineNode · badge rownumber · textstructuredRole · titleheadingNode · h3text · inlineindexedMotivationsbulletList · rich textlist · itemsslash-AIObjectionsbulletList · rich textlist · itemsslash-AIJobs-to-be-donetaskList · checkablelist · tasksJTBDQuotesblockquote · verbatimquote · citesourceBiographyparagraph · rich text with slash-command AI · tables · images · links@tiptap-pro/aiexport-docx v2.18the fabricextension stackSlash-AI · Tables · TOC · DragHandle · TaskLists · Details · DOCX Export · Highlight · Image · Link · Typography · CharacterCount · FocusModeY.js CRDT binding · Hocuspocus WebSocket · IndexedDB offline mirror
A Quikest persona biography in the TipTap editor — serif body prose in columns covering day-in-the-life, professional background, demographics, and influence.
Real-time

Two teammates. One persona. No merge dialog.

Underneath the editor is a Y.js CRDT — a data structure that resolves concurrent edits at character-level granularity without asking either author which one wins. TipTap v2 syncs through a Y.js binding to a Hocuspocus WebSocket server. Every open document is a room. Every teammate in the room gets a color-coded cursor, a name tag, and a real-time view of the other cursors moving. Comment threads ride Supabase Realtime alongside the CRDT.

Chris Delgado · Professional Triathlete
persona · room 4c2f · 3 present

Chris wakes at 5:14 am, checks HRV on his wristband, and picks the day’s session from the plan he built with his coach on Sunday. Breakfast is a bowl of oats and a black coffee, always in the same ceramic mug— Maya

He treats gear as instruments, not fashion. Two pairs of the same shoe, retired at 480 km. His objection to any subscription is speed — if the app takes more than one screen to log a session, he uninstalls by the second week.

Motivations: control over the plan, clean data, and a coach who reads the numbers rather than the vibes. He will pay for tools that respect his time; he will churn from tools that ask him to fill in what they should have inferred. Devi

Y.js CRDT + Hocuspocus real-time topology A three-client CRDT topology diagram. Three teammate clients each holding a local Y.js document and an IndexedDB offline mirror, connecting to a central Hocuspocus WebSocket server. real-time · y.js crdt · hocuspocus · indexeddb the roomHocuspocus serverWebSocket · rooms per persona · authoritative CRDT stateY.Doc canonicalcursor broadcast MMaya · clientediting header blocklocal Y.DocIndexedDBofflinedeltas queued DDevi · clientediting biographylocal Y.DocIndexedDBsynced SSam · clientcommenting on motivationslocal Y.DocIndexedDBsyncing queued CRDT sync cursor + edits parallel railSupabase Realtime · comment threadsresolve state · replies · notifications · flows over its own channel, not CRDTcharacter-level merge
synced syncing offline error
Offline-first

Wi-Fi drops. The work doesn’t.

The Y.js document is mirrored to IndexedDB in the browser through y-indexeddb. When the WebSocket to Hocuspocus goes away — an airport, a tunnel, a hotel — the editor keeps writing to local storage. When the connection comes back, the CRDT rebroadcasts the offline delta and the other clients converge. There is no “reconnect” dialog. The header sync chip goes from offline back to synced and the work continues.

0
Network calls required for local writes
9.0.12
y-indexeddb version in production
char
Character-level CRDT conflict resolution
CONNECTION LOST
Hocuspocus WS closes
LOCAL WRITE
IndexedDB mirror
RECONNECT
socket resumes
CRDT MERGE
converges silently
Permissions · Sharing

Three roles. Deliberate.

A persona in Quikest is a shared reference. Shared responsibly. The permission model is three tiers — Owner, Write, Read — and the tiers exist at the persona and document level, not just the workspace level. Workspace members can be invited from the directory; external users can be invited by email, but only by an admin. An org-wide toggle sets a default. A shareable link copies the persona URL for the everyday case where you just want someone to see the thing.

Workspace permissions — three role tiers A three-column capability matrix showing Owner, Write, and Read tiers with padlock icons and per-row capability check marks. permissions · sharing · three tiers, deliberate OwnerFull control · workspace + document + org access.edit persona & biographydelete persona & documentmanage collaboratorsinvite external userschange org-wide accessexport .claude/ folder6 capabilitiesworkspace + document scope WriteEdit and comment · cannot delete or manage.edit persona & biographydelete persona & documentmanage collaboratorsadd + resolve commentsuse Ask AI · slash-commandsregenerate portrait + env4 capabilitiesthe default for teammates ReadView-only · cannot edit or comment.edit persona & biographydelete persona & documentmanage collaboratorsadd + resolve commentsread persona & documentuse Ask AI in read-mode2 capabilitiesstakeholder view · shareable

Row-level security in Supabase enforces every read. Clerk provides the JWT that Supabase verifies. There is no permission logic in the frontend that the backend does not re-check.

Signature · Agent Context Export

The persona doesn’t stop being useful when the marketing meeting ends.

The Quikest Persona Skills export page — three format tabs (Claude, Cursor, Generic) for exporting a persona as agent context files.
Export to .claude/ folder tree A folder-tree diagram: .claude for Claude Code, .cursor for Cursor, and generic for GitHub Copilot — each showing its file structure. signature · export to .claude/ · for the assistants engineers already use personas-export.zipclient-side · JSZip · nothing leaves the browser CClaude Codereads .claude/Cursorreads .cursor/GitHub Copilotreads generic/ column 01 · claude code.claude/ folder.claude/├──personas.mdprimary index└──contexts/one file per persona ├── sme-buyer.md ├── designer.md └── ops-director.mdauto-discoverableDrop at repo root. Claude Code picks it up on the next session. column 02 · cursor.cursor/ folder.cursor/├──rules/MDC rules └── personas.mdc└──context.mdflattened prompt-attachrules awareCursor loads .mdc rules automatically inside the workspace. column 03 · github copilot + othersgeneric/ foldergeneric/└──personas.mdMarkdown · portable ── name, role, JTBD ── motivations ── objections + quotesany assistantGitHub Copilot & anything else that reads nearby text. the persona rides along · same reference the marketing lead was pointing at, sitting next to the code
Anthropic Claude Claude Code
Cursor IDE Cursor
GitHub Copilot GitHub Copilot

Auto-discoverable by each target · Client-side ZIP via JSZip · No workspace data leaves the browser during export

Beat 01 · The empathy gap

Every other persona tool ends at the PDF export.

Which is fine if the persona lives on a wall in a marketing pod. But the person building the feature the marketing pod was pointing at is an engineer, and their most-used surface is not a slide — it is a code editor with an AI assistant sitting inside it. If the persona does not travel there, the persona does not travel.

Beat 02 · The three targets

A folder with a skills file and structured context.

Three targets: .claude/ for Claude Code, .cursor/ for Cursor, generic/ for GitHub Copilot and anything else that reads a nearby text file. The ZIP is generated client-side (JSZip) so nothing leaves the browser during export.

Beat 03 · The auto-discovery

Drop .claude/ at the root of a repo and Claude Code picks it up on the next session.

The engineer never has to configure a thing. The persona rides along — the same reference the marketing lead was pointing at, now sitting next to the code, understood by the assistant that helps write it.

“We built the export in a week. It has been the single most-quoted feature by engineering teams since.”

— internal review, 2024
Billing · Metering

AI has a cost. We show it.

Every generation — persona recommendations, full profiles, portraits, environments, Ask AI turns, editor slash-commands — is metered in tokens using Tiktoken and billed against a per-workspace credit balance. The Subscription page (admin-only) shows the balance, the burn rate, and the plan tier. When the balance runs out, the isAiAllowed check quietly blocks further AI calls and a soft upgrade prompt appears in context. No overage bills, no mystery charges.

Token-based billing — Tiktoken flow A four-stage horizontal flow: user action, Tiktoken counts input+output, applied to workspace credit balance, displayed in dashboard. billing · metering · tiktoken · per operation STAGE 01User actionAny AI operation triggers metering.persona generateAsk AI turnportrait regenerateslash-command AIclick · type · trigger STAGE 02Tiktoken countsinput + output token count.input742output1,208total1,950 tokensencoding · per model STAGE 03Applied to quotaDeducted from workspace credit.plan balance64,050 / 100,000 tokens−1,950isAiAllowed = true STAGE 04Displayed in dashboardSubscription page · admin-visible.burn rate · 24h4,820tokensPro plan · billed monthlyno mystery bills · Stripe portal
Free
Starter tier

Limited personas, limited documents, limited AI tokens. Enough to run one product definition through the pipeline end-to-end.

7-day trial
Auto-activated

Every new workspace gets a week of unrestricted usage on signup. No card required to start.

Payments are Stripe. Subscription management is the Stripe portal. Invoices download from there. Nothing bespoke.

The Aesthetic

Fifteen sage steps in the source. One in the product.

Quikest’s design system defines fifteen steps of sage green, from a near-white #F8FAFB down to a nearly-black #2D342A. Production uses one. --sage-12 in light mode. --sage-8 in dark mode. That restraint is not a design accident — it is the product’s opinion about what a workspace should feel like: quiet, considered, out of the way of the work. A persona document is the loudest thing on the screen. Everything else recedes.

01
02
03
04
05
06
A0B89D
09
10
11
43553F
13
14
2D342A
15
sage-8 · A0B89D sage-12 · 43553F sage-15 · 2D342A the three the case study inherits from the product

Instrument Serif for occasional weight. Inter and Manrope for body. Radix + shadcn/ui underneath. No mood-board neon. No “dark mode with a purple accent.” Sage green, gray text, black type. That’s the palette.

The Stack

Boring in the best possible way.

Every dependency below is in production. Every version is verified in package.json. Nothing here is aspirational.

Frontend
  • Next.js 14 · App Router
  • React 19.2.4
  • TypeScript 5 · strict
  • Tailwind CSS 3.4.1
  • Instrument Serif · Inter · Manrope
  • Radix UI · shadcn/ui
  • Lucide + Tabler icons
  • Zustand 4.5.5
  • Motion 12.26.1
  • Sonner · Vaul · CMDk
Editor + Realtime
  • TipTap v2 · 3.19.0
  • @tiptap-pro/extension-ai
  • @tiptap-pro/extension-ai-advanced
  • @tiptap-pro/extension-export-docx
  • Y.js 13.6.29
  • @hocuspocus/provider 2.13.5
  • y-indexeddb 9.0.12
  • y-prosemirror
  • @tiptap/y-tiptap
AI
  • Vercel AI SDK 6.0.77
  • @ai-sdk/openai · GPT-4o-mini
  • @ai-sdk/google-vertex · Gemini 2.5 Flash Image
  • @ai-sdk/google-vertex · Imagen 4.0
  • @openrouter/ai-sdk-provider · Gemini 3 Flash Preview
  • @google/genai
  • Tiktoken · per-op metering
  • DALL-E 3 · alt portrait provider
Backend + Data
  • Clerk · auth · JWT bridge
  • Supabase · Postgres
  • Supabase Realtime · RLS
  • Vercel Blob · image storage
  • Stripe 17.3.1 · billing
  • Zod · validation
  • React Hook Form
  • Sharp · image processing
  • JSZip · client-side export
TanStack React Table Embla Carousel React-PDF Date-fns DOMPurify Slugify UUID Lodash Axios ts-pattern JOSE Markdown/HTML TanStack React Table Embla Carousel React-PDF Date-fns DOMPurify Slugify UUID Lodash Axios ts-pattern JOSE Markdown/HTML

Not in the stack: no vector database, no MCP servers, no multi-agent framework, no LangChain, no LangGraph, no fine-tuned models, no bespoke queue infrastructure. Every one of those was considered. Every one was set aside for the version of the problem Quikest is actually solving.

The Rollout

Live. In production. Measured.

Quikest has been in production since 2024. The product has been shipping continuously — persona-image regeneration UI in September 2025, documents and link-person UI in September 2025, login/register rebuild in October 2025, the current asset generation for this case study in July 2026. It is not a launched-and-done product; it is a working workspace being sharpened in the hands of the teams using it.

Mid-2024
First workspace live · initial persona pipeline
Feb 5, 2025
Logo system v1
Apr 25, 2025
Brand mark update · avatar system
Jul 11, 2025
Logo text refresh · logo-txt-2025
Jul 21, 2025
Persona editor asset system
Sep 2–3, 2025
Persona image regeneration UI · SVG update pass
Sep 26, 2025
Documents · link-person UI · dark/light parity
Oct 24, 2025
Login / register route rebuild
2026
Early-access cohorts · case-study publication

“Adoption metrics are held in-family. The architectural numbers — 3–5 personas per product, 4 models per pipeline, 3 export formats, 1 real-time cursor per teammate — are the ones on the page because they are the ones that describe the product.”

What We Learned

Four honest observations from two years in the field.

Lesson 01

The interview interaction is the moat.

Persona generation is now a commodity — every tool ships some version of it. What teams consistently ask us about, and what they keep coming back for, is the Ask AI sidebar. The reference talking back is a different product than the reference sitting still.

Lesson 02

The .claude/ export was a one-week feature that changed the pitch.

We shipped the agent-context export in a single sprint. It has been the single most-quoted feature in demos to engineering-heavy teams. A small feature aimed at the underserved user in a category can outweigh the flagship feature everyone else already has.

Lesson 03

Restraint is a positioning move.

The sage-and-gray palette, the single accent color, the refusal to add a purple gradient anywhere — those are marketing decisions as much as design ones. They tell buyers, before we say a word, that Quikest is not a hype product. The teams that respond to that are the teams we want to serve.

Lesson 04

Realtime is fabric, not a feature.

We do not have a “real-time collaboration” page in the product marketing because real-time is not a feature in Quikest — it is the material the product is made out of. The moment we would need to add such a page is the moment we would know the product had drifted.

Building somewhere teams need to point at the same thing?

We built Quikest.ai for a client. We build the same way for you.

If you’re planning a collaborative AI product where the shared reference matters — personas, briefs, decisions, anything a cross-functional team needs to hold in common — we would like to hear about it.