UIPrompt Library
Account
App DashboardsfreeDeveloper toolsflowPrompt review candidate

Sandbox Feature-Flag Rail Yard

Build a release command center where a demo flag travels through staged checks and stops safely at a named failed guardrail.

Prompt output preview

Sandbox Feature-Flag Rail Yard

Sandbox Feature-Flag Rail Yard prototype poster
Motion previewFive-second interaction + settled hold
Open interactive preview
Prompt
Design and implement Switchyard, a responsive feature-flag command center for a release engineer. It is a completely local sandbox topology: no live environment, repository, deployment, or production flag may be queried or changed. The engineer's job is to trace one demo flag across development and staging checks, understand why promotion stops before production, and see the exact recovery action.

Do not make an admin dashboard with a sidebar and status cards. Build one semantic rail yard where environment tracks DEV, STAGE, and PROD converge through named guardrails. Include a flag manifest strip, fixed route field, ordered check ledger, stop signal, and recovery drawer. The rail visualization may use deterministic Canvas only with an equivalent route list and check table. Every environment and outcome must be labeled sandbox.

Use this exact content: SWITCHYARD; Release flags without losing the route.; Sandbox topology · no live environments; search-v3; Demo flag; DEV; STAGE; PROD; Promote demo flag; Owner check; Expiry check; Test cohort check; Rollback check; PASS; STOP; Rollback owner missing; Promotion stopped · no environment changed; Recovery action; Assign a rollback owner, then rerun sandbox checks.; Assign demo owner; Rerun checks. Do not add deployment metrics, uptime, error-budget claims, repository activity, real teams, customer cohorts, production traffic, or a success state that implies a live mutation.

Art-direct the yard with signal black #111716, ballast #d4d0c4, timetable cream #f1eedf, rail blue #2a607c, switch green #3d7b62, caution amber #e3a43e, stop red #c84c42, and chalk #f5f2e8. Pair an industrial condensed display with a plain interface sans and mono flag/check notation. Use real route numbering, turnout positions, environment labels, and signal words; spend the visual boldness on the single route that stops short of PROD. Avoid fake terminals, neon cyberpunk glow, generic dev-tool cards, gradients, train illustration, SVG tracks, and decorative CSS machinery.

Promote demo flag is the deterministic five-second preview action. During 0–1.0 seconds search-v3 leaves its sandbox STAGE berth and the route locks. During 1.0–2.6 seconds Owner check, Expiry check, and Test cohort check receive PASS in order. During 2.6–3.8 seconds Rollback check receives STOP, the route signal turns red with the words Rollback owner missing, and the demo flag halts before PROD. During 3.8–5.0 seconds Promotion stopped · no environment changed and the Recovery action drawer settle. No loop or secondary action may silently cross the stopped guardrail.

Support idle, route-locked, checks-running, guardrail-stopped, recovery-ready, demo-owner-assigned, rerun-ready, stale-manifest, loading, error, visible-focus, reduced-motion, Canvas-fallback, and route-table states. Assign demo owner changes only local sandbox state; Rerun checks can report that a new preview capture is required rather than inventing a production success. Keyboard users can select the flag, run promotion, traverse checks, and inspect recovery. Use a polite live region for material state. Put one data-preview-ready marker on the settled yard and exactly one data-preview-action marker on Promote demo flag.

At 960×600, keep all three environment tracks, the full stopped route, check ledger, flag manifest, and recovery action within the first 16:10 viewport. Below 740px, show the flag, action, ordered check ledger, stop reason, and recovery action before a simplified route field; never require horizontal scrolling or hide the sandbox label. At 320px, commands and flag names must wrap safely. Under prefers-reduced-motion or Save-Data, display the final stopped route immediately with all PASS/STOP words and recovery controls available.

Return one complete standalone responsive HTML document with internal CSS and JavaScript. Use no framework, external runtime, feature-flag SDK, network request, production operation, live environment name, placeholder screenshot, handmade SVG/CSS illustration, random motion, lorem ipsum, or prose outside the product. Include one quiet source-prompt link and keep every environment and result explicitly sandboxed.
Share a result example

Paste a public image URL from a result this prompt helped create. Submissions stay private until reviewed.

Related prompts