# Your first creation

Go from an idea to a working interface, then make it your own.

Source: https://tenor.design/docs/quickstart

## Before you begin

Sign in with the account you use for Tenor. If you’re new, choose a plan on the pricing page.

Pick a concrete starting point: a settings panel, a product card, or a page section. You can build out the surrounding interface as the direction becomes clearer.

## Create, inspect, refine

### 1. Open your workspace

Choose a saved chat from the sidebar or start a new one in the project you want to use.

### 2. Describe the interface

Include the intended user, important content, and the action they should be able to take. Add a visual reference if you have one.

### 3. Review the first pass

Wait for the live preview, then check its content, layout, and interactions.

### 4. Make one focused change

Select the component and describe what should change. Ask for a separate variant if you want to keep the original alongside it.

### 5. Save and continue

Wait for the result to save. Return from the sidebar or use Share to continue in code.

## Try a starting prompt

### Example prompt

> Create a compact project settings panel with a project name, a visibility selector, and a Save changes button. Include a saved confirmation and an empty-name error. Make it work on a narrow screen.

## Choose the next step

Once the structure works, refine the hierarchy, spacing, and states. Point to an element for a precise edit, or describe a broader change in the conversation.

## Next steps

- [Point to an element](https://tenor.design/docs/refine/inspect-and-edit) — Inspect the visible interface and ask for a precise change.
- [Compare a variant](https://tenor.design/docs/how-tos/create-a-variant) — Explore another direction without losing the source.
- [Share and export](https://tenor.design/docs/handoff/sharing-and-export) — Take a saved result into the next part of your workflow.