F
floom · wireframes v13
15 pages · latest ← all versions

v13. The full surface.

15 pages covering every flow a user or creator touches. 3 rebuilt with a higher design bar, 7 new pages for the missing surface area (run, share, install, settings, docs, 404, onboarding), 5 carried from v12 unchanged.

Every page ships desktop 1280 + mobile 375 side-by-side. Real app data from preview.floom.dev/api/hub. Nothing here is a promise.

What changed from v12

7 new pages, 3 rebuilt, higher design bar everywhere.

  • · 7 new pages: run surface (/p/:slug/run + /r/:id shared), install wizard, settings, docs shell, 404, onboarding.
  • · Landing rebuilt with animated SVG flow, "Try it" OpenAPI input widget, live demo pane, 6 OSS layer chip rail, bottom two-ICP split.
  • · /apps rebuilt with stronger filter + sort system, category rail, illustrative count footnote.
  • · /p/:slug rebuilt matching click spec exactly, run surface inline, creator card, reviews under fold.
  • · 5 pages carried from v12 unchanged: build, me, creator, login. (These stayed 10/10 after v12 review.)
  • · Higher bar on type, color, density. DM Serif Display 48-64 hero, slate-900 ink, green only for accent moments. Supabase-desktop / Linear-mobile density.
  • · Every page covers desktop + mobile in the same file, side by side. Mobile is explicit, not a media-query afterthought.
SOURCE · HUB API
23 live apps pulled from preview.floom.dev/api/hub. FlyFast is the featured demo throughout (real product, real 1-op manifest).
TYPE SCALE
12 / 14 / 16 / 18 / 22 / 28 / 36 / 48 / 64
DM Serif Display hero, Inter body, JetBrains Mono tags.
COLOR DISCIPLINE
Accent + bg · ink · muted · canvas. No purple.
15 PAGES

The surface, end to end.

Click each row. Every page is a single HTML file, zero build step, desktop + mobile in one frame.

/
REBUILT
Landing · hero + SVG flow + try-it widget
Animated SVG OpenAPI → Floom → MCP/HTTP/CLI/Chat flow. "Try it" input accepts an OpenAPI URL. Featured live demo pane (FlyFast HAM → SFO). 6 OSS layer chip rail. Bottom two-ICP split.
rebuilt
/apps
REBUILT
Apps directory · 23 real apps
Real app list from hub API. Search, category filter chips, sort, card grid with hover state. Empty state when filter returns zero. Illustrative run counts with footnote.
rebuilt
/p/:slug
REBUILT
Product page
Hero, 4 connectors (Claude/ChatGPT/Notion/CLI), inline run surface, schedule drawer, creator card. Reviews under fold. Matches click spec exactly.
rebuilt
/p/:slug/run
NEW
Standalone run surface
3-column: input card left, output right, past-runs sidebar. Copy/download/share, iterate box for NL refinement. Loading/empty/shared-copied state variants. Mobile collapses sidebar to "Past runs (5)" link.
new
/r/:id
NEW
Public permalink of a run
Frozen snapshot with "Run this yourself" primary CTA, creator attribution card, OG metadata preview (slack card mock + meta tags). Feedback + report links. Read-only pinned input and output.
new
/install
NEW
MCP Claude Desktop install wizard
4 steps: pick app, config generated (syntax-highlighted JSON), paste (mac/win/linux paths), verify (fake terminal showing claude mcp list + a tool call). Step rail at top, sticky help CTA.
new
/settings
NEW
Profile + password + API keys + notifications + danger
5 tabs stacked for review. API keys section is the default view. Danger zone has explicit impact list before red button, plus double-confirm modal with typed phrase. Security alerts toggle locked on.
new
/docs
NEW
Stripe/Supabase-style docs shell · IA only
3-column: 240px nav tree (Getting Started / Protocol / Self-host / API Reference / Guides / Troubleshooting), fluid content with breadcrumb, 320px code rail (cURL/Python/JS/MCP tabs) + "On this page" anchors. Search top-center with ⌘K.
new
/404
NEW
Not found · 4 ways out
210px serif 404 with green echo. Search, suggested redirect, 4 destination cards (apps / build / docs / changelog), feedback link. App-specific 404 variant for unpublished apps.
new
/welcome
NEW
Post-signup · 3 states, consumer + creator branches
State 1 welcome + 2 equally-weighted branches. State 2 diverges (consumer: pick → run → install · creator: paste → review → share). State 3 finish + quick links. Skip setup always reachable.
new
/build
CARRIED
Paste-first composer · 4 states
State 1 anonymous picker (5 ramps), state 2 detect preview anon, state 3 publish signup modal, state 4 logged-in direct publish. Carried from v12 unchanged.
v12
/me
CARRIED
Consumer dashboard
Recent runs table, installed apps, connected tools, API key surface, settings tabs. Focus: what have I run and what did it cost me.
v12
/creator
CARRIED
Creator dashboard (supply side)
Owned apps list, per-app runs/installs/revenue tiles, publish/edit buttons, quick analytics, payouts placeholder.
v12
/login
CARRIED
Login · Google + password only
Clean split layout, no magic link, no SSO noise, password reset link. Matches publish modal on /build so auth pattern is consistent.
v12
5 things Federico should look at specifically
  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?
  2. run-shared.html OG metadata pane. The social preview block shows what unfurls. Is the "frozen snapshot" banner clear enough to prevent confusion when results shift later?
  3. install.html step 4 terminal. The fake claude mcp list output is the payoff. Does it read as "it worked" or as fake?
  4. onboarding.html branch picker. Two equally-sized cards per the two-ICP rule. Does consumer card carry enough weight or does creator accidentally feel primary?
  5. docs.html is IA only. No real protocol content. Is the 3-column Stripe/Supabase shell the right pattern, or would Linear's sidebar-only layout fit better?
Known gaps
Full report: /autonomous/2026-04-17-v13-wireframes.md → ← Back to all versions