Build a polished, premium, multi-screen web app for an internal tool at a luxury real estate technology company. Non-technical employees (customer success managers, support leads, marketers) use it to build, test, deploy, and maintain their own specialized AI assistants that live in Slack. This will be demoed to a CTO tonight, so it must feel crafted, alive, and real, never like a wireframe.

THE CORE IDEA, READ THIS TWICE: an assistant is a CHARACTER with a PIPELINE behind it. The character is what a teammate @-mentions in Slack: a name, a face, a personality. The pipeline is how that character thinks and acts, shown as a left-to-right flow of visible blocks. The instructions that govern behavior (the "prompt") live as an editable field right on the Agent block, in plain sight. The entire reason this product exists is that today those instructions are buried and only an engineer can find them. So the identity and the visible prompt are the two things that must sing.

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

• Background warm paper #FAF8F4. Surfaces white with soft, warm, low-spread shadows. Generous whitespace.
• Ink #1C1A17, muted #6B655C, hairline borders #E7E2D9.
• ONE confident accent: warm brass #B45309 (hover #92400E), used sparingly for primary actions and active states.
• Headings in a serif display face (Fraunces or Instrument Serif). Body in a clean sans (Geist or Inter). The serif/sans contrast is the signature.
• rounded-xl, smooth transitions, tasteful framer-motion micro-animations, lucide-react icons, shadcn/ui, Tailwind. React Flow for the pipeline canvas.
• Block colors: Trigger slate, Knowledge teal, Agent brass (the hero), Guardrail dusty rose, Hand off green, Action slate, Call another agent indigo.

=== THE BLOCKS (palette) ===

• TRIGGERS: @Mention, Schedule, Channel Watch, Event
• KNOWLEDGE: Source (Notion, Drive, Salesforce) with a "Strict grounding" toggle meaning "refuse if the answer is not in these sources"
• STEPS: Agent (holds the visible prompt + persona + model), Classifier (branch by intent), Guardrail (grounding check)
• ACTIONS: Reply in thread, Create ticket, Hand off to a human, Call another agent (a governed, tightly-scoped call to an existing specialist such as Serval or Proppy)

=== SCREEN 1: GALLERY (home) ===
Serif title "Your assistants" and a brass "New assistant" button. A grid of character cards: a large emoji avatar in a soft tinted circle, the name (serif), a one-line personality, the Slack channel, a small owner line, and a health line ("Answered 47 questions this week, 94% rated helpful"). One card shows a subtle amber "No owner assigned" flag, because accountability is part of the point. Sample cards:

• 🦉 Sage, "Knows the product cold. Cites every answer, never bluffs." #product-questions, owner Monica
• 🧾 Penny, "Straight answers on billing and invoices." #ask-billing, owner Rebecca
• ✨ Jessica, "Warm nudges to clients without a dedicated CSM." Digital CSM, owner Will
• 🧰 Otto, "Triages infra tickets before they hit the queue." #infra-intake, No owner assigned
• ✒️ Quill, "Drafts social posts in your voice, then waits for your edits." #content-studio, owner Marketing

=== SCREEN 2 (THE HERO): THE BUILDER ===
Reached from "New assistant". We are building an HR assistant named "Hattie".

A prominent CHARACTER HEADER across the top: a large 🌿 avatar, the serif name "Hattie", the @hattie handle, and a small tone chip ("warm, concise"). Identity leads. Below the header sits a toolbar: a "Converse | Canvas" segmented toggle, a "Test" button, and a brass "Publish to Slack" button.

Three regions under the header:
LEFT (~30%): in Converse mode, a build chat where the platform interviews the builder and assembles the pipeline. Seed it mid-conversation:
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. She answers only from those docs and hands off to the People team when she is unsure. Want to give her a personality?"
In Canvas mode this left pane becomes the draggable block palette grouped as above.

CENTER (~46%): a React Flow pipeline that animates into place on load so it looks like it draws itself. Left to right, rounded block cards with icon, type label, and one-line summary, connected by smooth edges, and it BRANCHES at the guardrail:
@Mention in #ask-hr (slate) -> HR Notion space, 24 docs, Strict grounding ON (teal) -> Hattie, warm and concise (brass, larger) -> Grounded? (rose, a diamond/decision) -> on yes: Reply in thread with citation (slate); on no: Hand off to @people-team (green)
Selecting a block rings it in brass and opens the inspector.

RIGHT (~24%): the inspector, defaulted to the AGENT block, the visual payoff. Show an editable "Instructions" textarea prefilled: "You are Hattie, the HR assistant. 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 is not in your sources, say you are not certain and offer to bring in the People team. Never guess about policy." Below it: a Model dropdown (Claude / GPT), a "Knowledge this step can read" list (HR Notion space), a "Tools this step can use" list (Hand off to a human), and a small caption: "This is the prompt. It lives right here, on the block."

=== SCREEN 3: TEST (slide-over from the Test button) ===
A mock Slack thread to try Hattie before publishing. Seed two exchanges that prove the trust story:

1. "How many PTO days do I get on the standard plan?" -> a warm, correct two-sentence answer with a citation chip "Source: HR Handbook, Time Off".
2. "Can I bring my work laptop to China on a personal trip?" -> "I am not certain that is covered in my HR sources, so I will not guess. Let me bring in the People team." with a green "Handed off to @people-team" pill.
   A message input "Ask Hattie something..." wired to ACTUALLY call an AI model (AI SDK) so a typed question returns a real, grounded-or-refused response.

=== SCREEN 4: IDENTITY ===
A focused, delightful card: a large emoji avatar picker (🌿 selected, softly glowing), a serif name field "Hattie", a "@hattie" handle field, 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 rendering Hattie's first message as a Slack message with avatar and handle.

=== SCREEN 5: PUBLISH (confirm modal) ===
Pick the channel (#ask-hr selected), confirm @hattie, a note that publishing sends a lightweight approval request. Brass "Request publish". On confirm, return to the Gallery with Hattie added as a new card.

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

Make it crafted, warm, editorial, and alive. The character header, the self-drawing branching pipeline, the visible prompt on the Agent block, and the refusal-then-handoff moment are what make it sing.