# v13 wireframes · full surface **Date:** 2026-04-17 **Scope:** Floom wireframes v13 **Status:** shipped · all 15 pages live at https://wireframes.floom.dev/v13/ **Prior agent:** died on rate limit after writing 7 of 15 pages. This pass completed the missing 7 + nav hub. --- ## Exec summary v12 covered 8 pages and was "launch ready" for a narrow flow: landing, apps, build, p-slug, me, creator, login, index. That left a real surface hole: once a user arrives on Floom, where do they actually run, install, configure, hit a dead end, or onboard? v13 closes that hole. 15 pages total. 7 new pages cover run, run-shared, install, settings, docs, 404, and onboarding. 3 pages were rebuilt with a higher design bar (landing, apps, p-slug). 5 carried from v12 unchanged (build, me, creator, login, build). Every page ships desktop 1280 + mobile 375 side by side in a single HTML file, no build step, with the same type scale, color discipline, and spacing rhythm as v12 landing. Real app data throughout. FlyFast (real 1-op product from preview.floom.dev/api/hub) is the featured demo in run, run-shared, install, and onboarding. 23 live apps pulled from the hub API populate /apps. --- ## Per-page brief ### New pages (7) **`/p/:slug/run` (`run.html`)** — Standalone run surface. 3-column desktop: 380px input card, fluid output column on surface-2, 260px past-runs sidebar. Output shows real-looking flight results (€487 Lufthansa HAM to SFO via FRA). Iterate box below output with dashed accent border for natural-language refinement + pre-seeded chip suggestions. State variants below the main frame: loading (spinning icon + skeleton), empty (first run nudge), shared-link-copied (confirmation card). Mobile collapses sidebar to a bottom "Past runs (5)" link. Keyboard shortcuts rail visible. **`/r/:id` (`run-shared.html`)** — Public permalink of a run. Frozen-snapshot banner at top (accent green, lock icon, "results will not change"). Hero has read-only pinned input on the left, creator attribution card on the right. "Run this yourself" is the only primary CTA, creator dashboard link is secondary. OG metadata preview pane shown below the frame: mock Slack/iMessage card (gradient background with the €487 result) + raw meta tag source in the terminal pane. Zero auth required to view. **`/install` (`install.html`)** — MCP Claude Desktop install wizard. All 4 steps rendered top-to-bottom in one scrollable frame. Step rail at top (step 1 done green, step 2 active dark with accent halo). Step 2 shows the full JSON config with syntax highlighting and a fake scoped token (`flm_live_a8f3...`). Step 3 platform tabs (macOS active, Windows + Linux), full path visible inline with a "Copy path" button. Step 4 is the payoff: fake terminal showing `claude mcp list` → `floom (flyfast) ✓ connected 1 tool`, then a live tool call completing in 820ms with `€487 (LH 456)`. Sticky "Stuck? Read guide / Discord" CTA at the bottom. **`/settings` (`settings.html`)** — 5 tabs stacked vertically for review mode. Profile (name, username, disabled email, timezone, bio), Password (old/new/confirm with min-12-char hint), API keys (selected, default view with accent border; 3 keys listed with name/masked-key/scope/last-used/rotate+revoke actions), Notifications (4 toggle switches, security alerts locked on dimmed), Danger zone (red card with explicit impact list "3 apps unpublished, 12 keys revoked, 247 runs deleted" before the red button). Below the frame: double-confirm modal state requiring the user to type "delete my account" verbatim. **`/docs` (`docs.html`)** — Stripe/Supabase-style shell, IA only, no real protocol content. 3 columns: 240px left nav tree (6 groups: Getting started, Protocol, Self-host, API Reference, Guides, Troubleshooting, ~30 items), fluid center content with breadcrumb + h1 + placeholder prose, 320px right rail with language tabs (cURL/Python/JS/MCP, Python active), example code block, response block, "On this page" anchors. Top-center search with `⌘K` kbd. Prev/next cards at the bottom of the content area. Footer has "Edit on GitHub" left, status/changelog/community right. **`/404` (`404.html`)** — 210px serif DM Serif Display "404" with a faint green echo offset 8px. Grid pattern SVG in the background. Search input with "did you mean /p/flyfast?" suggestion. 4 destination cards in a row (Browse apps, Build your own, Read docs, See what shipped). Feedback link in the footer. Below the main frame: app-specific 404 variant for when an app was legitimately unpublished ("flyfaast was never published" with a softer tone and "Try FlyFast instead" + "Browse similar" CTAs). **`/welcome` (`onboarding.html`)** — Post-signup flow with 3 states stacked vertically, each in a real browser frame with a progress rail. State 1 (welcome): 2 equally weighted branch cards, consumer leans green on hover, creator leans dark. State 2a (consumer path): 3 numbered step cards Pick → Run → Install, first number accent green. State 2b (creator path): 3 numbered step cards Paste → Review → Share, first number dark. State 3 (finish): green checkmark circle, "You're set", dashboard/creator CTAs, 5-pill quick links row. Skip setup always reachable top-right. ### Rebuilt pages (3) **`/` (`landing.html`)** — Hero has animated SVG flow (OpenAPI → Floom → 4 output surfaces) with dashed accent lines and a pulse indicator. "Try it" widget with a black-bordered paste input, 4 example pills below. Featured demo pane shows literal input/output rendering (HAM → SFO query, €487 Lufthansa result). 6 OSS layer chip rail. Self-host terminal with realistic boot sequence + blinking caret. Bottom split CTAs explicitly label the two ICPs. **`/apps` (`apps.html`)** — Real 23-app grid from preview.floom.dev/api/hub. Search, category filter chips (developer-tools, ai, productivity, writing, seo, marketing, analytics, research), sort dropdown, empty state when filter returns zero, illustrative run counts with asterisk footnote. **`/p/:slug` (`p-slug.html`)** — Matches click spec. Hero with illustrative ratings, 4 connectors (Claude/ChatGPT/Notion/CLI), how-it-works, schedule drawer, inline run surface with terminal-style output, reviews under the fold, creator card. ### Carried from v12 (5) **`/build`, `/me`, `/creator`, `/login`, base copy of index/version.** These were 10/10 after v12 review, carried unchanged. --- ## 5 things Federico should look at 1. **`run.html` three-column density.** 380 input · fluid output · 260 past-runs. Desktop-only rail. Is the past-runs sidebar worth the real estate, or should it collapse into a tab? Linear keeps a rail, Raycast doesn't. I kept it because "what did I run before" is the #1 question after "what does this app do". 2. **`run-shared.html` OG metadata pane.** The Slack/iMessage mock card shows what unfurls when a shared run URL is pasted. Does the "Frozen snapshot · will not change" banner prevent the confusion people hit when a live API's results shift between share-time and view-time? 3. **`install.html` step 4 terminal.** The fake `claude mcp list` output plus a successful tool call is the single most important signal that "you did it right". Does it read as legitimate, or does it look too artificial? Stripe's dashboard fakes this well, Vercel's doesn't. 4. **`onboarding.html` branch picker.** Two equally-sized cards per the two-ICP rule. Consumer card leans accent green on hover, creator card leans dark ink. Does the consumer card carry enough visual weight, or does the dark creator card accidentally feel primary? (The user profile note says "two equal CTAs always side-by-side" — check if this honors that.) 5. **`docs.html` is IA only.** No real protocol content. The shell is Stripe/Supabase 3-column. Is that the right pattern for Floom, or would Linear's sidebar-only layout fit the scope better? Stripe needs the right code rail because code examples matter per-language; Linear doesn't because their docs are conceptual. Floom is closer to Stripe. --- ## Known gaps - **No billing/pricing page.** Deferred until Cloud tier pricing locks. Settings references it as "coming soon". - **No changelog page.** The 404 links to `/changelog` as a planned destination; the page itself doesn't exist. - **No workspaces/teams UI.** Settings nav lists it as "coming soon" only. - **MCP for ChatGPT** shown in copy on landing and me, but install.html is Claude Desktop only. ChatGPT MCP flow is a follow-up. - **No audit log / security events UI.** Referenced in settings sidebar as "coming soon". - **Mobile onboarding** only shows state 1 in full detail. States 2a/2b/3 inherit the desktop layout but aren't individually mocked for mobile. - **Docs prose is placeholder.** "Request format", "Streaming", "Error handling" sections are outlines only, not actual protocol documentation. --- ## Files ``` /var/www/wireframes-floom/v13/ index.html (nav hub, 15 pages listed, what-changed callout, 5 review points) landing.html (rebuilt, v13) apps.html (rebuilt, v13) p-slug.html (rebuilt, v13) run.html (new) run-shared.html (new) install.html (new) settings.html (new) docs.html (new) 404.html (new) onboarding.html (new) build.html (carried from v12) me.html (carried from v12) creator.html (carried from v12) login.html (carried from v12) ``` Updated `/var/www/wireframes-floom/wireframes-dashboard.html`: - Header pill now "v13 latest · 15 pages" - Primary CTA switched to `/v13/index.html` - "Latest" section copy rewritten for v13 - Version table gets a new first row for v13 with accent-green left border and "Latest" badge - v12 moves to second row All files chowned to `www-data:www-data`. All 15 pages return HTTP 200 from https://wireframes.floom.dev/v13/.