04 - UX Recommendations

🎯 For CreateOS specifically: Your shell is probably already close to the converged pattern. The CreateOS-specific UX priorities are inside the shell: (1) persistent usage widget with MPP earnings alongside credits (Replit does this for credits only — you have more to show); (2) named agent presets as the analog of Anything's named design systems ("research agent", "trading agent", "support agent" pre-wired to MPP + router); (3) agent reasoning display that specifically surfaces tool-call logs including MPP transactions — making the earning visible is itself a retention mechanic no competitor can copy.

Thesis

There are two UX disciplines, not one. The builder shell (Discipline 1) is where users set up agents — Replit and Anything converged on it, adopt the shape and differentiate inside components. The agent runtime (Discipline 2) is where agents actually execute — no UI at all, just SDK/CLI DX. Fly.io showed CreateOS is on this second side too. You need both.

The two disciplines

Discipline 1 — Builder shell (web)

The CreateOS dashboard / console. Three-pane workspace, prompt input, preview panel, settings hierarchy. This is where the "Adopt these 7" and "Differentiate on these 5" rules below apply. Lessons come from Replit - Agent Chat with Preview and Anything.com - Agent Chat.

Discipline 2 — Agent runtime (API / CLI / SDK)

The Sprites / E2B / Modal lane. Judged on DX, not UI. Quickstart that fits on one screen, typed SDKs, framework examples (OpenAI Agents SDK, LangChain, LangGraph, Vercel AI SDK), per-stack quickstarts. Lessons come from Flydotio - Tech and Flydotio - Sprites.

Why this matters for CreateOS: the OpenAI Agents SDK default-provider listing (Blaxel, Cloudflare, Daytona, E2B, Modal, Runloop, Vercel) is a Discipline-2 surface. You don't win that listing with a nice dashboard; you win it with npm install @createos/sandbox + a 5-line quickstart + a MPP example that earns real money. Fly.io is pitching into the same listing with Sprites.

✅ Patterns to adopt

The 7 shell elements you don't need to reinvent

Don't fight these. Innovate inside them.

The 5 differentiating components to execute well

1. Named design-system presets (Anything-style). The agent snaps to a curated catalog ("High-Fidelity SaaS", "Ghost Structure"). Reduces taste burden + improves visual consistency. Your opportunity: build this with a user-extendable system. Let power users publish presets. Marketplace ensues.

2. Cost-quality mode dial (Economy / Auto / Performance). Give users an explicit lever. Name it clearly. Show the estimated cost per invocation at current setting.

3. Task board for agent orchestration (Replit-style, Drafts → Active → Ready → Done). If you support parallel or autonomous agents, operationalize the UI. Don't leave it as invisible plumbing.

4. Persistent usage widget (Replit-style). Left-sidebar, always visible, 2-3 meters. Discussed in detail in 02 - Retention.

5. Command palette (⌘K). Low-cost feature, outsized audience signal. Dev-adjacent users expect it; everyone else benefits when they discover it.

⚡ Discipline 2 — Agent runtime DX (lessons from Flydotio - Sprites + Flydotio - Tech)

These rules apply to the SDK / CLI / docs surfaces where there is no UI. Getting these right is how you land on the OpenAI Agents SDK default-provider list, LangChain partnership doc, and agent-framework quickstart pages.

1. CLI-first onboarding

Fly's canonical first step is fly launch. Users never land on a "welcome" screen first — they install, type one command, get a running app. CreateOS analog: npx createos init → sandbox + router + MPP wired in one command. First line of every doc, every quickstart, every tutorial.

2. Per-framework quickstarts (not per-use-case)

Fly organizes docs around stack (Phoenix, Rails, Django, Laravel, JS, Rust, Python, Go), each with a dedicated quickstart. Developer-psychology marketing — reduce friction by meeting people where their identity lives. CreateOS analog: one quickstart per agent framework — OpenAI Agents SDK, LangChain, LangGraph, Vercel AI SDK, raw TS, raw Python. Each shows the same earning-agent demo, implemented differently.

3. Per-ecosystem content publications

Fly runs five named blogs: Phoenix Files, Laravel Bytes, Ruby Dispatch, Django Beats, JavaScript Journal. Community-flavored = community-trust. CreateOS analog: one publication per agent framework — Agents Dispatch, LangChain Field Notes, Vercel Agents Weekly — plus monthly earning-agent case studies. See Creator Education Content.

4. Sandbox as API, not console

Fly's pitch is "agents run better on Sprites" — an SDK pitch, not a dashboard pitch. The UI is a convenience layer on top. CreateOS rule: the SDK call shape is the product; the console ships after. Every documented agent example should be copy-pasteable into a .ts or .py file.

5. Docs index = product taxonomy

Fly's docs are organized by primitive (Machines / Sprites / GPUs / Postgres), not by use case. For infra-literate buyers this is clearer — they know what they need, not what it's called. CreateOS docs IA: mirror it. One top-level section per primitive: Sandbox · Router · MPP · Marketplace. Use cases live inside as recipes.

6. Pricing transparency for the developer buyer

Fly's calculator-first pricing works for infra buyers (they know their workload) but fails for makers (they can't estimate "what will one app cost me"). If CreateOS adds a maker-facing SKU on top of metered agent credits, publish the per-1000-actions rate card, not just a calculator.

7. Submit-time feedback matters even without a UI

CLI / SDK feedback loops are their own UX: flyctl deploy prints a live status stream; errors link back to docs; retries are non-destructive. CreateOS rule: every CLI / SDK call streams status by default, errors are one-line with a docs link, and nothing destructive happens without --force or confirmation. The closest builder-side analog is Replit's submit-flips-to-stop — mirror the intent in SDK form.

The 4 IA decisions that signal audience

The structure of your settings page signals who you're for. Pick one:

• Per-project settings with sections for AI / Assets / Secrets / Auth / Mobile App (Store Marketing + Monetization) / Share → maker audience (Anything.com - Project Settings).
• Workspace / Account / User three-level hierarchy → enterprise-ready (Replit - Workspace Settings).
• Org / Members / Tokens flat hierarchy → developer / infra operator (Fly.io pattern).
• Agent / Task / MPP-entry hierarchy → agent economy. This is the unclaimed IA. Make "agent" a top-level object with budget, MPP earnings, router telemetry, and audit log as peer tabs. Ships as the CreateOS signature — no competitor has this shape.

Don't split the difference — the IA structure is the audience statement.

❌ Anti-patterns to avoid

❌ Hiding features from your marketing

Anything.com has a full code editor + Figma import. Neither is marketed. Users don't discover what isn't advertised. If you have it, put it in the nav, on the landing, in the prompt toolbar.

❌ Generic / stock brand imagery

Utility-grade landing pages are invisible. Anything.com's CRT-in-flowers aesthetic is memorable. Pick a visual identity that earns a mental bookmark.

❌ Ambiguous mode-selector labels

Anything's Auto > doesn't tell the user what Auto does. Economy > (Replit) is clearer — it names the trade. Always name the dimension (cost, quality, speed), not just the setting.

❌ Submit button that doesn't turn into stop during generation

A running agent needs a visible, prominent stop. Replit and Anything both do this; many competitors don't. Pattern: submit ↔ stop on the same pixel real-estate.

❌ Over-nested settings without section headers

If your settings page is a flat list of 30 items, users can't find anything. Anything.com's six sections (AI / General / API / User Auth / Mobile App / Share) are clean — emulate the discipline.

❌ No in-product version diff

Users won't "restore version" if they can't see what's different. Version cards should show visual diff on select (preview re-renders at that state).

❌ Modal hell

Chaining modals (signup → onboarding → plan picker → first project → paywall) is a churn generator. Progressive disclosure, not serial modals.

❌ Hiding what the agent ran

Even if your agent is "magical", show enough of the execution that users trust it. Reasoning blocks OR tool calls — pick one, execute.

❌ Calculator-only pricing for makers

Fly.io's calculator works for infra buyers who know their workload. It fails for users trying to answer "what will one app cost me." If CreateOS has a maker-facing SKU, publish the per-1000-actions rate, not just a calculator. See Flydotio - Pricing.

❌ Docs organized by use case when users know primitives

For developer / infra buyers, "Getting started → Deploy an app → Add a database" is less clear than "Machines / Postgres / GPUs." Users know what they need, not what you've decided to call it. Don't interpose marketing-taxonomy between user and doc.

❌ Hiding the SDK call behind a dashboard

Builders can lead with a prompt input; agent-runtime products cannot. The first thing an agent-framework integrator wants to see is the 5-line code example. If it's behind "Sign up → create project → get API key → paste" the integrator is already gone.

The opinionated defaults

If you can't decide, use these:

Sources

• All wiki/ux-patterns/* pages
• Replit - Agent Chat with Preview, Anything.com - Agent Chat, Anything.com - Project Settings
• Flydotio - Sprites, Flydotio - Tech, Flydotio - Marketing, Flydotio - Pricing
• 01 - Acquisition, 02 - Retention, 03 - Revenue