Rimbly

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 600, 16px panel titles (UI chrome)
• JetBrains MonoBody: JetBrains Mono 400, 15px terminal and editor, line-height 1.55

Patterns

• split view: terminal-style chat left, workspace right
• file list plus editor pane
• embedded shell panel with command input
• slash-command help block
• status line with context usage
• pixel mascot with speech bubble
• hosted demo header with like count and running status
• model load button with runtime badge

States it is designed for

• model not loaded (idle)
• downloading weights with % and cancel
• unsupported browser (no GPU compute): fallback message
• generating (streaming, Stop)
• context near full: status line warns and offers New chat
• shell command not available: clear message listing allowed commands
• storage quota exceeded
• empty workspace

Who it is for

• ML hobbyists and developers exploring on-device models
• educators demoing local AI

Layout

1. host header: space owner/name, copy, like count, running badge; tabs App, Files, Community
2. app bar: small logo, runtime badge (GPU/idle), model name with quantisation tag, Load model button
3. left pane (~55%): terminal chat with intro, command list, messages, status line (workspace · model · tokens used/free), input line, New chat, Newline and Send buttons
4. right pane (~45%): Workspace header (+ File, Import, Export), file list, editor with path and Save; Shell panel below with output, command input and Run
5. below 1024px panes stack with a tab switcher (Chat / Workspace / Shell)

Palette

Hacker-cosy: a dark terminal with a playful pixel pet that keeps things friendly.

• bg#1b1c22
• panel#23242b
• text#e8e8ec
• muted#a0a2ad
• accent#e5c07b
• link#8fb8ff
• success#7ed49a
• bubble#fff4d6
• bubble-text#2a2410
• border#6a6c78

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 600, 16px panel titles (UI chrome)

Body

JetBrains Mono 400, 15px terminal and editor, line-height 1.55

Monospace everywhere in content panes; UI buttons Inter 14px 500; nothing below 12px.

Spacing and imagery

Density: Dense tool. Grid: 4px base; pane padding 12-16px. Container: full viewport, two resizable panes. Radius: 6px panels and buttons. Shadows: None; panels separated by 1px borders.

A small pixel-art mascot (draw your own) with a speech bubble suggesting an example prompt.

Components

• HostHeader
• RuntimeBadge
• LoadModelButton with progress
• TerminalChat (history, streaming, slash commands)
• StatusLine
• FileList
• Editor (plain textarea or Tiptap code block)
• ShellPanel (sandboxed command runner)
• MascotBubble
• PaneResizer

Interactions

• Load model downloads weights with a progress bar and caches them; badge flips from idle to ready
• Slash commands: /load, /help; lines starting with ! run a workspace command
• Enter sends, Shift+Enter newline; ↑/↓ recall history
• Clicking a file opens it; Save writes to browser storage; Import/Export zip the workspace
• Clicking the mascot bubble inserts its suggestion

Data

• WorkspaceFile{path, content, updated_at}
• ChatMessage{id, role (user|assistant|tool), content, tokens}
• ModelState{status (idle|downloading|ready|error), progress, name}

Guardrails

Experience

• Say plainly that files and chat stay on this device
• Show model size before download and let users cancel
• Keep token usage visible in the status line
• List allowed shell commands; reject others with guidance
• Keep the mascot optional (dismissible)

Accessibility

• Terminal output is a log region (role=log, aria-live=polite) with text, not canvas
• All commands also available as buttons
• Resizer is keyboard-adjustable
• Monospace text at 15px minimum with 1.55 line height
• Contrast verified on both dark surfaces

Security

• Sandbox the command runner: no network, no real filesystem, only an allowlist of virtual commands
• Treat model output as untrusted; render as text, never HTML
• Validate imported archives (size, file count, paths without ..)
• Load model weights only from pinned, integrity-checked URLs

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 **Rimbly**, a browser-only AI workspace: a terminal-style chat with a small local model on the left, a file workspace with editor and a sandboxed shell on the right. Build the host header, the app and every loading and error state; everything runs client-side.

### Stack
React 18 + TypeScript + Vite, Tailwind CSS, shadcn/ui and lucide-react. Run inference in a Web Worker using an open-source in-browser inference runtime; persist the workspace in IndexedDB. No backend.

### Pages & layout
1. **Host header**: owner/name, copy button, like count, running badge, tabs.
2. **App bar**: logo, runtime badge, model name with bit-width tag, Load model.
3. **Chat pane**: intro with command list, message history, status line, input, New chat / Newline / Send.
4. **Workspace pane**: file list (readme, a JSON and a CSV), editor with Save, Shell with output, input and Run, footer hint listing limits.

### Design system
- Colors: `--bg: #1b1c22` (app background), `--panel: #23242b` (workspace panels), `--text: #e8e8ec` (primary text), `--muted: #a0a2ad` (status and hints), `--accent: #e5c07b` (command keys and prompt), `--link: #8fb8ff` (hint links), `--success: #7ed49a` (running badge), `--bubble: #fff4d6` (mascot speech bubble), `--bubble-text: #2a2410` (bubble text), `--border: #6a6c78` (input borders).
- Fonts: Inter 600, 16px panel titles (UI chrome) for headings; JetBrains Mono 400, 15px terminal and editor, line-height 1.55 for body. Monospace everywhere in content panes; UI buttons Inter 14px 500; nothing below 12px.
- Spacing: Dense tool. 4px base; pane padding 12-16px. Container: full viewport, two resizable panes.
- Radius: 6px panels and buttons.
- Shadows: None; panels separated by 1px borders.
- Motion: Token streaming in the terminal; blinking caret (off under reduced motion); pane resize handle.

### Components & interactions
TerminalChat renders prompt-styled lines with the accent colour for commands. ShellPanel echoes commands with a $ prompt and prints results from a small virtual command set (ls, cat, head, wc).

- Load model downloads weights with a progress bar and caches them; badge flips from idle to ready
- Slash commands: /load, /help; lines starting with ! run a workspace command
- Enter sends, Shift+Enter newline; ↑/↓ recall history
- Clicking a file opens it; Save writes to browser storage; Import/Export zip the workspace
- Clicking the mascot bubble inserts its suggestion

### Data & state
Seed three invented files (readme, products.json, sales.csv). Chat and files persist in IndexedDB; model state lives in the worker and is mirrored to React via messages.

Entities: `WorkspaceFile{path, content, updated_at}`; `ChatMessage{id, role (user|assistant|tool), content, tokens}`; `ModelState{status (idle|downloading|ready|error), progress, name}`.

States to build and show in a dev-only state switcher:
- model not loaded (idle)
- downloading weights with % and cancel
- unsupported browser (no GPU compute): fallback message
- generating (streaming, Stop)
- context near full: status line warns and offers New chat
- shell command not available: clear message listing allowed commands
- storage quota exceeded
- empty workspace

### Accessibility
- Terminal output is a log region (role=log, aria-live=polite) with text, not canvas
- All commands also available as buttons
- Resizer is keyboard-adjustable
- Monospace text at 15px minimum with 1.55 line height
- Contrast verified on both dark surfaces
Verified contrast: body text: #e8e8ec on #1b1c22 = 13.91:1; muted status: #a0a2ad on #1b1c22 = 6.69:1; text on panel: #e8e8ec on #23242b = 12.65:1; command accent: #e5c07b on #1b1c22 = 9.84:1; hint link on panel: #8fb8ff on #23242b = 7.7:1; running badge text: #7ed49a on #1b1c22 = 9.53:1; bubble text: #2a2410 on #fff4d6 = 14.11:1; input border: #6a6c78 on #1b1c22 = 3.26:1; focus ring: #8fb8ff on #1b1c22 = 8.47:1.

### Security
- Sandbox the command runner: no network, no real filesystem, only an allowlist of virtual commands
- Treat model output as untrusted; render as text, never HTML
- Validate imported archives (size, file count, paths without ..)
- Load model weights only from pinned, integrity-checked URLs

### Performance & SEO
Keep the worker and model runtime out of the main bundle; cache weights with the Cache API; stream tokens without re-rendering the whole log (append-only).

### Guardrails
- Say plainly that files and chat stay on this device
- Show model size before download and let users cancel
- Keep token usage visible in the status line
- List allowed shell commands; reject others with guidance
- Keep the mascot optional (dismissible)
- Write fresh, generic copy and invented sample data; no real brands, logos, product names or people.
- Keep components small and typed (no `any`); surface every error visibly with a way to recover.

Acceptance criteria:
- Model loads with progress and caches for next visit
- Chat can read a file and answer about it
- Shell runs only allowed commands
- Everything persists across reloads locally
- Unsupported browsers get a clear fallback

Open the builderAll templatesThis palette on its own