Skip to content
Code Recycle

Component · for humans & their agents

INSTRUMENT — design system for AI apps

not verifiedactively maintained$19 one-time

Your AI app looks like every other AI app, and more prompting doesn't fix it. This does.

by Code Recycle · New publisher

Buy for $19Open live demo ↗

Every claim on this page is refundable if it is untrue — refund policy.

Verified: 32 tests

Building it yourself: ~4.5h of agent time across about 6 attempts. Your credits are already paid for, so that feels free — but they are rivalrous: those are hours not spent on the part only you can build. And this one fails quietly when it is wrong, so the attempt that looks finished may not be. $19.

☆ Save
coderecycle.ai/demos/instrument/

The problem it solves

You cannot prompt your way out of the AI-app look. More detailed prompts do not fix it, because the convergence is in the model, not in your wording. The only escape is a system with an actual point of view.

The point of view

**Instrumentation.** An oscilloscope, a mixing desk, a flight panel. Flat fills, hairline rules, near-zero radii, graph-paper field, tabular numerics, and exactly **one** hot accent used as a signal — never as decoration.

Deliberately refused: the purple-blue gradient hero, glassmorphism, one uniform radius on everything, emoji as iconography, centered everything, and pill buttons floating in whitespace.

Built outward from AI surfaces

Not a general design system applied to an AI app — designed from these:

  • **Streaming text** with a block cursor that steps, in a recessed well, with a capped prose measure so output doesn't run edge-to-edge.
  • **Tool calls** as rows on a scope: shared hairlines, state carried in the left rail, expandable payloads, failures auto-open.
  • **Reasoning traces** collapsed to a scope sparkline, expandable to prose.
  • **Approval gates** with severity — and **hold-to-confirm on irreversible actions**, because approval fatigue is real and a click is one motor action.
  • **A cost meter**: multimeter readout plus a notched gauge.
  • **The states everyone forgets**: empty, loading, degraded, refused.

Accessibility asserted in code, not promised in a README

**32 tests.** Every ink/background pair is contrast-checked in *both* themes. State is never conveyed by color alone — every state carries a mono chip label plus a distinct edge or hatch, legible with no color perception at all. `prefers-reduced-motion` collapses all timing including the press and hold gestures. No external font CDNs, so it works under a strict CSP.

The suite earned its keep immediately: it caught **two contrast failures in the original token set** (4.46 and 4.31 against a 4.5 floor) that had been *stated* as passing. Tokens were corrected; the claims now match the measurements.

Delivery

Source delivered as a private repository invite within 24 hours of purchase. Single-product commercial license: use and modify in one shipped product; no redistribution or resale of the source.

Preview

See what it does before you commit. Previews show behavior, never source code.

01Capabilities

Does

  • No capabilities recorded

Doesn’t

  • No exclusions declared

02Requirements & stack

Depends on

No declared dependencies

Credentials needed

None declared

Stack

css react typescript

03Community

No endorsements yet

No verified confirmations yet — be the first.

Confirmations come from verified purchasers, installers, vetted reviewers, or an installation outcome your org reported through the agent tools. They grade quality — security is verified separately, and community votes can never override the security gate.

Sign in to confirm — weight comes from verified usage, not vote count.

04Trust Passport

Full passport →
/100

0/0 automated components pass. An automated score is never a security guarantee.

VersionChannelReleasedNotes
1.0.0stableAug 2, 2026First public release.