Sign inJoin Orvio
Join
Use case 04 · ExtendExample

Extend a design.

Your product started from Keelro and now needs a screen it never shipped. The agent reads the product's tokens and screens first, then draws the new page as if it had always been there.

Use Keelro Copy the prompt
Starting point
A running Keelro workspace missing three screens
Orvio product
KeelroWeb app · 0.1.0
Ran in
Claude Code
Access
Remote MCP
Run
10 Nov 2026 · 33 min
Before and after
Drag to compare
Before · exampleAfter · Keelro
The starting point

The brief and the product.

What the team asked for, and the Orvio product the agent worked from.

The briefExample client

Our agent workspace started from Keelro and we love it, but it has no billing, no audit log and no team settings. Add them so they look like they shipped with the product, and don't change what's already there.

brief.md · from the product lead, example
Keep
Existing screens, routes, tokens
Screens
Billing, audit log, team settings
Stack
React, TypeScript
Keelro, a screen of the product
KeelroWeb app · technology0.1.0
Tokens
Cobalt and orange palette, type, spacing
Components
Sidebar, tables, stat cards, approval rows
Screens
Overview, Runs, Approvals
In a member's words

“I asked my agent to extend one of the dashboards with three new screens, and they look like they were always part of it.”

Theo S.Co-founder, refaktor.cc
The prompt

Exactly what the agent was told.

Copy it, swap the highlighted parts for your product and folders, and run it in your own tool.

ExtendAdd a page the product doesn't haveRan in Claude Code
Using Orvio, call get_product for Keelro, then read_tokens, get_component for its stat card and table, and get_page for Approvals. In ./workspace, add three screens drawn in Keelro's style: Billing, Audit log and Team settings. Reuse its tokens and components, follow how Approvals is laid out, add each route to the sidebar, and don't change any existing screen. When you're done, list the new files and any component you had to create because Keelro has none.
Remote MCP or CLIHighlighted parts are yours to replace
The breakdown

Who did what.

What came from the product, what the agent built from it, and what still needed a person.

Orvio supplied

What Orvio supplied

  • Tokens and the full component set
  • Reference screens: Overview, Runs, Approvals
  • Tables, stat cards and approval rows to reuse
  • Light and dark themes, with their states
The agent built

What the agent built

  • Billing, audit log and team settings screens
  • Sidebar entries and routes for all three
  • Empty, loading and error states for each
  • Dark mode through the existing tokens
A person did

What needed a manual touch

  • An invoice table, specified by finance
  • Permission labels on team settings
  • Copy on the audit log's empty state
  • A review of the three screens in dark mode
Next steps

Do it on your app.

Use this product

Start from Keelro

Preview every screen free, then pull the source with MCP or the CLI.

Open Keelro Live preview
Copy the prompt

Run it on your own app

Swap the highlighted parts for your folders and screens.

Using Orvio, call get_product for Keelro, then read_tokens, get_component for its stat card and table, and get_page for Approvals. In ./workspace, add three screens…
Copy the promptPrompt library
Related use cases

Keep going.

03 · Redesign

Redesign an existing interface

Give an inherited app a real design system without rewriting its logic.

CalyxClaudeCodex
05 · Your stack

Bring a design to your stack

Rebuild a product's pages as components in the framework you already use.

XfieldClaudeCodex
01 · Client work

Build a client website

Start from a complete site and make it your client's: their words, their photos, their pages.

VoicelabsClaudeCodex
© Orvio · 2026