Build a polished, premium, multi-screen web app: an internal platform where non-technical employees at a luxury real estate tech company build, test, and deploy their own specialized AI assistants that live in Slack. Each assistant is a named character with a personality, grounded in specific knowledge sources, and refuses to answer when something is outside its sources. This is being demoed to a CTO, so it must feel crafted and real, not like a wireframe.

THE ONE PRINCIPLE THAT MATTERS MOST: an AI assistant here is a pipeline of visible blocks, and the assistant's instructions (its "prompt") are a visible, editable field on the block, not buried in settings. The whole reason this product exists is that today these prompts are scattered and impossible to find. When you click an Agent block, you see its system prompt, its model, the tools it can use, and the knowledge it can read, all on one screen.

=== DESIGN SYSTEM (apply everywhere) ===

• Background: warm paper #FAF8F4. Cards/surfaces: white with soft, warm, low-spread shadows. Generous whitespace, never cramped.
• Ink text #1C1A17, muted text #6B655C, hairline borders #E7E2D9.
• ONE confident accent: warm brass #B45309 (hover #92400E) for primary actions and active states. Use it sparingly.
• Headings in a serif display face (Fraunces or Instrument Serif). Body in a clean sans (Geist or Inter). That serif/sans contrast is the signature look.
• rounded-xl corners, smooth transitions, tasteful framer-motion micro-animations. lucide-react icons, shadcn/ui components, Tailwind. Use React Flow for the canvas.
• Each block TYPE gets a quiet color: Trigger = graphite/slate, Knowledge = teal, Agent = brass (the hero), Guardrail = dusty rose, Human Handoff = green, Action = slate.

=== THE BLOCKS (the building blocks of every assistant) ===
A palette of draggable blocks, grouped:

• TRIGGERS: @Mention, Schedule, Channel Watch, Event, Inbound Email
• KNOWLEDGE: Source (Notion / Coda / Drive / Salesforce / Code), with a "Strict grounding" toggle meaning "refuse if the answer isn't in these sources"
• STEPS: Agent (holds the visible prompt + persona + model + tools), Classifier (branch by intent), Interviewer (ask, then wait for replies), Tool Call, Quality Gate (reviewer), Guardrail (grounding + content checks)
• ACTIONS: Reply in Thread, Post to Channel, Create Ticket, Send Email, Write to Notion, Human Handoff (passes the full transcript + reason)

=== SCREEN 1: GALLERY (home) ===
Serif page title "Your assistants" and a brass button "New assistant". A grid of character cards, each: a large emoji avatar in a soft tinted circle, the name (serif), a one-line personality, the Slack channel, an owner ("Owned by Rebecca V."), and a health line ("Answered 47 questions this week · 94% rated helpful"). Some cards show a subtle amber "No owner assigned" flag to make the point that accountability is the problem this solves. Sample assistants:

• 🦉 Sage — "Knows the product cold. Cites every answer, never bluffs." · #product-questions · Owned by Ethan S.
• 🧾 Penny — "Straight answers on billing and invoices. No guesswork." · #ask-billing · Owned by Rebecca V.
• ✨ Jessica — "Warm nudges to clients without a dedicated CSM." · Digital CSM · Owned by Will K.
• 🧰 Otto — "Triages infrastructure tickets before they hit the queue." · #infra-intake · No owner assigned
• ✒️ Quill — "Drafts LinkedIn posts in your voice, then waits for your edits." · #content-studio · Owned by Zach W.
• 🛟 Marlow — "Launch-day hypercare. Spun up per launch, retired after." · #omni-hypercare · Owned by Rebecca V.

=== SCREEN 2 (THE HERO): THE BUILDER ===
Reached by clicking "New assistant". We are building a new HR assistant named "Hattie".

Top bar: the assistant emoji + name "Hattie", a segmented toggle "Converse | Canvas", a "Test" button, and a brass "Publish to Slack" button.

Three regions:
LEFT (~32%): a conversational build pane. A chat where the platform interviews the owner and assembles the pipeline. Show this already in progress:
Platform: "What should Hattie help people with?"
You: "HR and policy questions. PTO, benefits, holidays."
Platform: "Where should she get answers?"
You: "Our HR space in Notion. Nothing else."
Platform: "Done. I wired her to answer only from those docs and hand off to the People team when she's unsure. Want to give her a personality?"
A chat input pinned at the bottom. (This is "Converse" mode. In "Canvas" mode this left pane becomes a draggable block PALETTE grouped as listed above.)

CENTER (~44%): a React Flow node graph, left to right, the pipeline for Hattie, each node a rounded card with icon + type label + one-line summary, connected by smooth animated edges. Animate the nodes appearing in sequence on load so the graph "draws itself." Nodes:

1. TRIGGER (slate) "@Mention in #ask-hr"
2. KNOWLEDGE (teal) "HR Notion space · 24 docs · refreshed daily · Strict grounding ON"
3. AGENT (brass, slightly larger) "Hattie · warm, concise"
4. GUARDRAIL (rose) "If it's not in the docs, don't guess"
5. HUMAN HANDOFF (green) "Escalate to @people-team"
6. ACTION (slate) "Reply in thread, with sources cited"
   Selecting a node rings it in brass and opens the inspector.

RIGHT (~24%): the INSPECTOR for the selected node. Default it open on the AGENT node, and make this the visual payoff. Show, clearly and editable:

• A large textarea labeled "Instructions" prefilled with: "You are Hattie, the HR assistant for the company. Answer questions about PTO, benefits, holidays, and company policy using ONLY the attached HR Notion sources. Be warm and concise, two or three sentences. If the answer isn't in your sources, say you're not certain and offer to bring in the People team. Never guess about policy."
• A "Model" dropdown (Claude / GPT, with one selected)
• A "Knowledge this step can read" list (HR Notion space)
• A "Tools this step can use" list (Human Handoff)
• A small caption: "This is the prompt. It lives right here, on the block."

=== SCREEN 3: TEST (a slide-over panel from the Builder's Test button) ===
A mock Slack thread where the owner tries Hattie before publishing. Show two exchanges that prove the trust story:

1. User: "How many PTO days do I get on the standard plan?" → Hattie: a warm, correct 2-sentence answer, followed by a citation chip "Source: HR Handbook › Time Off".
2. User: "Can I bring my work laptop to China on a personal trip?" → Hattie: "I'm not certain that's covered in my HR sources, so I don't want to guess. Let me bring in the People team." with a green "Handed off to @people-team" pill.
   A message input at the bottom labeled "Ask Hattie something...". Wire this input to ACTUALLY call an AI model (use the AI SDK) so a typed question gets a real response, not a canned one. The two examples above can be seeded as the opening transcript.

=== SCREEN 4: IDENTITY (a step in the build, reachable from the build pane) ===
A focused, delightful card: a large avatar picker (emoji grid, 🌿 selected and softly glowing), a serif name field "Hattie", a Slack handle field "@hattie", tone pills (Warm selected / Neutral / Playful / Formal), and a "Welcome message" textarea prefilled "Hi, I'm Hattie 🌿 I help with PTO, benefits, and company policy. Ask me anything, and if I'm not sure I'll point you to the right person." On the right, a live preview of Hattie's first message rendered as a Slack message with avatar and handle.

=== SCREEN 5: PUBLISH (a confirm modal from "Publish to Slack") ===
Pick the Slack channel (#ask-hr selected), confirm the handle @hattie, and a note that publishing sends a lightweight approval request. Primary brass button "Request publish". On confirm, route back to the Gallery with Hattie now added as a new card.

=== NAVIGATION ===
Left sidebar: Assistants (gallery, home), plus muted future items (Activity, Knowledge, Settings). The flow Gallery → Builder → Test → Identity → Publish → back to Gallery must actually click through.

Make it feel crafted, warm, editorial, and confident. The serif headlines, the brass accent, the self-drawing canvas, and the visible prompt on the Agent block are what make it sing.