Skip to content

Your first creation

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

2 min read

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