# Tenor (tenor.design)

> Tenor is a creative workspace for refining live React interfaces with AI. Compare variants on a canvas, then continue through coding agents or React code export.

Public documentation for the interface-design product at tenor.design. This is separate from the Tenor GIF service at tenor.com. These documents do not grant access to private account data or authenticated MCP tools.

## Product facts and supported workflows

- [Tenor product reference](https://tenor.design/docs/reference/tenor): Tenor is a creative workspace for refining live React UI interfaces with AI. Compare variants on a canvas, then continue through coding agents or React code export. [Markdown](https://tenor.design/docs/markdown/reference/tenor)

- [Introduction](https://tenor.design/docs): A shared creative workspace for shaping real UI interfaces with AI. [Markdown](https://tenor.design/docs/markdown)

- [Your first creation](https://tenor.design/docs/quickstart): Go from an idea to a working interface, then make it your own. [Markdown](https://tenor.design/docs/markdown/quickstart)

- [Projects and the canvas](https://tenor.design/docs/workspace/projects): Keep your conversations and creative work together. [Markdown](https://tenor.design/docs/markdown/workspace/projects)

- [Tenor for Mac](https://tenor.design/docs/desktop): Coming soon. Use Tenor in your browser today. [Markdown](https://tenor.design/docs/markdown/desktop)

- [Accounts and billing](https://tenor.design/docs/access-and-billing): Sign in, choose a plan, and manage your subscription. [Markdown](https://tenor.design/docs/markdown/access-and-billing)

- [Create from a prompt](https://tenor.design/docs/create/from-a-prompt): Describe the interface, its content, and what it should do. [Markdown](https://tenor.design/docs/markdown/create/from-a-prompt)

- [Images and screenshots](https://tenor.design/docs/create/from-a-visual-reference): Use a visual reference to make the direction easier to see. [Markdown](https://tenor.design/docs/markdown/create/from-a-visual-reference)

- [Bring a Figma selection](https://tenor.design/docs/create/figma): Use a selection’s structure and preview to create a working interface. [Markdown](https://tenor.design/docs/markdown/create/figma)

- [Start with existing code](https://tenor.design/docs/create/from-existing-code): Bring a working React component into the creative process. [Markdown](https://tenor.design/docs/markdown/create/from-existing-code)

- [Images and vectors](https://tenor.design/docs/create/images-and-vectors): Create visual assets alongside your UI interfaces. [Markdown](https://tenor.design/docs/markdown/create/images-and-vectors)

- [Refine with conversation](https://tenor.design/docs/refine/follow-up-edits): Use your current work as the starting point for the next change. [Markdown](https://tenor.design/docs/markdown/refine/follow-up-edits)

- [Point to an element](https://tenor.design/docs/refine/inspect-and-edit): Inspect the visible interface and ask for a precise change. [Markdown](https://tenor.design/docs/markdown/refine/inspect-and-edit)

- [Work with voice](https://tenor.design/docs/refine/voice): Talk through a design while keeping the canvas in view. [Markdown](https://tenor.design/docs/markdown/refine/voice)

- [Models, libraries, and skills](https://tenor.design/docs/reference/models-and-libraries): Choose how Tenor approaches your interface. [Markdown](https://tenor.design/docs/markdown/reference/models-and-libraries)

- [Share and export](https://tenor.design/docs/handoff/sharing-and-export): Take a saved result into the next part of your workflow. [Markdown](https://tenor.design/docs/markdown/handoff/sharing-and-export)

- [Tenor MCP: connect coding agents](https://tenor.design/docs/handoff/coding-agents): Connect Codex, Claude, or Cursor to Tenor’s authenticated MCP endpoint. Inspect shared React components and continue with permitted canvas and version tools. [Markdown](https://tenor.design/docs/markdown/handoff/coding-agents)

- [Task guides](https://tenor.design/docs/how-tos): Short walkthroughs for the next thing you want to make. [Markdown](https://tenor.design/docs/markdown/how-tos)

- [Screenshot to interface](https://tenor.design/docs/how-tos/screenshot-to-component): Turn a visual reference into an interactive first pass. [Markdown](https://tenor.design/docs/markdown/how-tos/screenshot-to-component)

- [Edit a region with Snip](https://tenor.design/docs/how-tos/snip-a-region): Capture the area you mean and describe the change. [Markdown](https://tenor.design/docs/markdown/how-tos/snip-a-region)

- [Compare a variant](https://tenor.design/docs/how-tos/create-a-variant): Explore another direction without losing the source. [Markdown](https://tenor.design/docs/markdown/how-tos/create-a-variant)

- [Take a component into your app](https://tenor.design/docs/how-tos/continue-in-code): Bring the chosen version into a real implementation. [Markdown](https://tenor.design/docs/markdown/how-tos/continue-in-code)

- [Troubleshooting and limits](https://tenor.design/docs/reference/limits): Find the next useful step when something does not work as expected. [Markdown](https://tenor.design/docs/markdown/reference/limits)

## Current access and policies

- [Pricing](https://tenor.design/pricing): Current plan presentation and access options.

- [Privacy](https://tenor.design/privacy): Privacy policy.

- [Terms](https://tenor.design/terms): Terms of service.