Marblenote

A mock-up of the screen, drawn from its layout, palette and typefaces. A build follows the full prompt below.

Start from this screenRead the build prompt

Typefaces

The catalog's own faces. A screen composed into a template is drawn in that template's typefaces.

• InterHeadings: Inter 500, 18px for section headings inside answers
• InterBody: Inter 400, 16px/1.6 for assistant prose; user pills 15px; tables 15px/1.5 (dense); captions 13px muted

Patterns

• inset floating sidebar card
• conversation tabs strip with close and new-tab
• right-aligned user pills, full-width assistant prose
• collapsible 'ran N commands' activity line
• rich table inside assistant answer
• per-message action row (copy, helpful, not helpful)
• closing question prompting next step

States it is designed for

• new conversation with starter prompts
• streaming
• running tools (activity line live count)
• tool error inside activity with retry
• long table overflow (horizontal scroll)
• stopped generation
• rate-limited / usage cap reached
• offline composer disabled
• feedback submitted

Who it is for

• small-business operators
• no-code app builders
• project managers

Layout

1. Sidebar (~140px) as a white inset card on the warm canvas: workspace switcher, search and collapse icons, Home, Projects, App store, 'Recent' list with active item highlighted
2. Top: back chevron, conversation tabs (active tab white pill with close), + new tab; right: panel toggle
3. Thread column (~400px max, centred): user pills right-aligned, assistant text left, action rows under assistant turns
4. Activity line: muted '18 steps run' disclosure
5. Answer table: bordered, 3 columns (opportunity, what I found, suggested move)
6. Composer docked at bottom (hidden in the screenshot but required)
7. Below 900px sidebar becomes a drawer; tables scroll horizontally inside the bubble

Palette

Warm, calm, conversational. Warm off-white canvas and quiet greys make long answers easy to read.

• canvas#f5f5f2
• surface#ffffff
• user-bubble#ededeb
• text#1c1c1a
• muted#62625e
• border#d9d9d5
• table-head#f9f9f8
• primary#1c1c1a
• on-primary#ffffff
• focus#2f6fdf
• icon#6e6e69

Every checked pair, measured again

As vibld’s tokens

The palette on the fifteen colour tokens vibld styles a project with, each text colour on the fill it is read on. Marked tokens are solved from the palette, because no swatch held that role at 4.5:1.

• background
• card
• muted
• primary
• secondary
• accent
• destructive *

Type scale

Display

Inter 500, 18px for section headings inside answers

Body

Inter 400, 16px/1.6 for assistant prose; user pills 15px; tables 15px/1.5 (dense); captions 13px muted

Similar to the observed neo-grotesk.

Spacing and imagery

Comfortable; 8px base; thread max width 640px; 24px between turns; user pill padding 8px 14px, radius 16px; tables radius 8px with 1px borders and 12px cell padding; sidebar card radius 12px with 8px inset margin.

No imagery; icon-only action buttons; tables for structured findings.

Components

• workspace switcher
• inset sidebar
• conversation tabs
• user message pill
• assistant message
• activity disclosure
• answer table
• message action row
• composer with attach and send
• suggested next-step question

Interactions

• Streaming assistant text with a subtle caret
• Activity line expands to show each command with status
• Copy copies markdown; thumbs record feedback and show a toast
• New tab starts a fresh conversation; tabs can be closed with middle-click or Cmd+W
• Scroll-to-bottom button appears when the user scrolls up during streaming
• Enter sends, Shift+Enter new line, Escape stops generation

Data

• Conversation{id, workspace_id, user_id, title, created_at}
• Message{id, conversation_id, role (user|assistant), content_md, created_at}
• ToolRun{id, message_id, command, status (ok|error), duration_ms}
• Feedback{message_id, user_id, rating (up|down), note}

Guardrails

Experience

• State the data the agent looked at before its conclusions
• Put structured findings in a table, not long paragraphs
• Always end a multi-option answer with a clear next-step question
• Keep tool activity collapsed by default but one click away
• Label caveats about data coverage explicitly
• Let users stop generation at any time

Accessibility

• Thread is a log region; new assistant content announced politely after streaming completes
• Tables are real <table> with header cells and scope
• Action buttons have accessible names and tooltips
• Tabs use tablist semantics with close buttons named per tab
• Composer has a visible label for screen readers and keyboard shortcuts listed
• Focus ring 2px blue on all controls

Security

• Agent tools run server-side with the user's permissions only (RLS-scoped queries)
• Model and tool secrets live in Edge Function env, never in the client
• Rate-limit messages per user and per workspace
• Sanitise rendered markdown (no raw HTML)
• Log tool runs for audit

Build prompt

The baseline every prompt in the catalog assumes, then this design’s own ten sections, from goal to guardrails.

Copy the baseline and build prompt

### How to use these prompts
Paste an entry's build prompt into your coding agent as the first message. Each prompt names its own stack, tokens and acceptance criteria; the rules below apply to all of them and can be prepended once per project.

### Engineering baseline
- TypeScript strict mode, no `any`, small typed components, feature folders, and one source of truth for design tokens (CSS variables consumed by Tailwind).
- Validate every input with a shared zod schema on the client and again on the server or edge function. Never trust client-side checks alone.
- Show loading, empty and error states for every async view. Surface errors in plain language with a retry, and log details to the console in development only.
- Keep secrets out of the bundle. Only publishable keys (for example a Supabase anon key) belong in client code; service-role keys, API keys and webhooks live in server or edge-function environment variables.

### Data and auth baseline (full-stack entries)
- Enable Row Level Security on every table before inserting data. Default-deny, then add owner-scoped policies (`auth.uid() = user_id`) and explicit role checks for admin views.
- Store roles in a separate table checked by a security-definer function, never in a user-editable profile field.
- Upload files to private storage buckets with size and MIME limits, and serve them through signed URLs.
- Rate-limit public endpoints (forms, auth, AI calls) and add a honeypot field or captcha to anonymous forms.
- Take payments through a hosted checkout and verify webhooks by signature. Never handle raw card data.

### Accessibility and UX baseline
- Target WCAG 2.2 AA: 4.5:1 contrast for normal text and 3:1 for large text, input borders, focus rings and meaningful icons or chart lines. Every palette in this catalog lists its verified pairs; re-check with a contrast tool after any colour change.
- Keep body text at 16px or larger with 1.5 line height, nothing below 12px, no light weights under 24px, and uppercase only for short labels.
- Give every interactive element a visible focus ring, full keyboard support, semantic landmarks, labelled form fields, and alt text on meaningful images.
- Respect `prefers-reduced-motion` for every animation. Give drag-and-drop and carousels keyboard and button alternatives.
- Build mobile-first and test at 375px, 768px and 1280px.

### Content guardrails
- Use original copy, fictional sample data and placeholder or licensed imagery. Do not reuse another product's name, logo, screenshots or marketing text.
- Label demo testimonials and metrics as samples. Collect the minimum personal data the feature needs.

### SaaS screen baseline
- Design every screen for its full set of states: first-run empty, loading skeleton, partial data, error with retry, permission-denied, and success feedback. Each entry lists the states its screen needs.
- Keep destructive actions (delete, revoke, downgrade, remove member) behind a confirmation that names the object, and prefer undo over a second dialog where the action is reversible.
- Enforce authorisation on the server for every action a screen exposes. Hiding a button is not access control; check the role again in the API or RLS policy.
- Never show secrets (API keys, tokens) in full after creation. Show them once, then mask them, and offer rotate and revoke.
- Keep the app shell (navigation, workspace switcher, account menu) consistent across screens, and preserve filters, sort and scroll position when the user navigates back.

### Goal
Build **Marblenote**, the AI agent chat inside a no-code app builder. A user asks the agent to look at their workspace; it runs read-only commands over projects and data, reports what it did, and answers with prose plus a table of improvement opportunities before asking which to tackle.

### Stack
React 18 + TypeScript + Vite, Tailwind CSS, shadcn/ui (Tabs, Collapsible, Tooltip, Toast, Textarea), lucide-react, react-markdown + remark-gfm for tables, TanStack Query, zod. Supabase Auth, Postgres, and an Edge Function that streams from a hosted model API and executes whitelisted read-only tools.

### Pages & layout
1. **Shell**: warm canvas, inset sidebar card (workspace 'Harbor & Pine', Home, Projects, App store, Recent: 'Workspace review', 'Welcome to the builder').
2. **/chat/:id** (this screen): tabs strip; thread: user 'Can you review our projects and tell me what to fix first?'; assistant short reply; user 'Surprise me, let the agent decide'; activity '18 steps run'; assistant caveat paragraph; heading 'Where to focus next'; table with rows like 'Surface overdue work' / '14 tasks past due across 6 projects' / 'Add an overdue queue with owner and age'; closing question; action rows. Composer: attach, textarea, send.
3. Responsive: drawer sidebar under 900px; composer full width with safe-area padding.

### Design system
- Colors: `--canvas: #f5f5f2`, `--surface: #ffffff`, `--user-bubble: #ededeb`, `--text: #1c1c1a`, `--muted: #62625e`, `--border: #d9d9d5`, `--table-head: #f9f9f8`, `--primary: #1c1c1a`, `--on-primary: #ffffff`, `--focus: #2f6fdf`, `--icon: #6e6e69`.
- Fonts: Inter (similar to observed). Prose 16px/1.6; pills 15px; tables 15px/1.5; headings 18px/500; captions 13px.
- Spacing: 8px base; 24px between turns; thread max 640px.
- Radius: sidebar card 12px, pills 16px, tables 8px, composer 16px.
- Shadows: composer `0 4px 16px rgba(28,28,26,.06)`.
- Motion: streaming caret blink; 150ms disclosure; reduced motion removes caret blink.

### Components & interactions
`InsetSidebar`, `ConversationTabs`, `Thread`, `UserPill`, `AssistantMessage` (markdown renderer with table styles), `ActivityDisclosure` (ToolRun rows with status icons), `MessageActions` (copy, up, down), `Composer` (attach, auto-grow textarea, send/stop), `ScrollToBottom`.

### Data & state
Tables per data model. Messages stream via server-sent events from the Edge Function, persisted on completion. Tool runs inserted as they happen and shown live. Mock workspace with invented projects ('Riverside library refit', 'North Quay offices').

### Accessibility
Thread uses role=log. Table markup semantic with captions. Stop button reachable during streaming. Feedback toasts via role=status. Keyboard shortcuts documented in a help popover.
Verified contrast: body text on canvas: #1c1c1a on #f5f5f2 = 15.63:1; user pill text: #1c1c1a on #ededeb = 14.56:1; muted activity text on canvas: #62625e on #f5f5f2 = 5.61:1; table text on header fill: #1c1c1a on #f9f9f8 = 16.2:1; action icon on canvas: #6e6e69 on #f5f5f2 = 4.69:1; focus ring on canvas: #2f6fdf on #f5f5f2 = 4.31:1; send button icon on primary: #ffffff on #1c1c1a = 17.07:1.

### Security
RLS on conversations, messages, tool_runs, feedback: `user_id = auth.uid()` within workspace membership. Tools query through RLS as the user (pass the user JWT), read-only. Model key in Edge Function secrets. Markdown sanitised, links rel=noopener. Rate-limit per user.

### Performance & SEO
Stream tokens; virtualise long threads; lazy-load markdown renderer. Noindex.

### Guardrails
- Invented workspaces, projects and numbers
- Agent must not claim data it did not read
- No raw HTML rendering
- Typed code, visible errors
- Acceptance criteria: (1) streaming, stop and retry work; (2) activity disclosure lists each command; (3) tables render semantically and scroll on mobile; (4) RLS isolates conversations; (5) works at 390px.

Open the builderAll templatesThis palette on its own