Tenor
Log in
Browse docs

Docs · Start here

Tenor Docs

Learn how to take a working AI-built interface from rough to deliberate, one live React component at a time.

4 min read

What Tenor is

Tenor is the interface studio for AI-built software. It gives you a focused place to shape live React components after the app works but before the interface feels finished.

Tenor sits between a coding agent's first plausible UI and the implementation you are ready to stand behind. The component stays working software while you bring its hierarchy, spacing, states, and visual language closer to what you meant.

Start where the interface is getting stuck

  • Start from a prompt when you need a new component shaped around a clear product job.
  • Start from an image or screenshot when you know what good looks like and need to carry over its hierarchy, density, or visual language.
  • Start from existing component code when the UI already works but its structure, styling, or states need a more deliberate direction.

The working loop

  1. 01

    Bring a working starting point

    Generate from a prompt or reference, or paste a self-contained React component.

  2. 02

    Name what feels off

    Describe the visible problem in plain language. You do not need to diagnose the CSS first.

  3. 03

    Make one judgeable change

    Refine the selected component or ask for a distinct variant you can compare.

  4. 04

    Make every part belong

    Check that the result fits the rest of the product, not only that it looks attractive in isolation.

  5. 05

    Continue in code

    Move the strongest version into Codex, Claude Code, or the destination repository for integration.

Expected result

You should leave Tenor with a live React component whose product job still works and whose interface feels more intentional. The next step is to use Quickstart for the full loop or choose the guide closest to your current starting point.

Start with one path

Start here

Quickstart

Take one live component from a rough first pass to a version that feels deliberate, then continue in code.

Create

Create from an image or screenshot

Carry hierarchy, proportion, density, and visual language from a focused reference into working React.

Refine

Refine a component and compare variants

Name what feels off, make one judgeable change, and compare a distinct alternative without losing the working source.

Handoff

Continue in Codex or Claude Code

Move the strongest saved component into the repository where it will meet real data, routes, and product constraints.

Try Tenor