> For the complete documentation index, see [llms.txt](https://tynker-ai.gitbook.io/tynker-ai-guides/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://tynker-ai.gitbook.io/tynker-ai-guides/getting-started/quickstart.md).

# Quickstart

<figure><img src="/files/XyP4sPYxQg0y7DD0X4rm" alt=""><figcaption></figcaption></figure>

A beautiful app begins with the content you create — and Tynker makes it easy to build exactly what you envision.

## Workspaces: Your Starting Point

After signing in, you’ll land on the **Workspaces** page. Workspaces are where you can:

* Create, edit, and delete workspaces
* Group related apps together
* Collaborate with team members by sharing access

By default, you’ll have one workspace already set up. Any new apps you create will automatically be added to this default workspace unless you have selected a different workspace.

## Creating a New App

<figure><img src="/files/hvR4ZBYuPw0jONXzX1xx" alt="" width="290"><figcaption></figcaption></figure>

To create your first app:

1.
2. Click the **"Create a new app"** button in the top-left corner.
3. Choose a **generation type** that determines what kind of output your users will generate:
   * **Image** – if your app will generate images (e.g. AI-generated art)
   * **None** – if your app is purely for collecting user input or displaying content

*For this guide, we’ll choose the **Image** option.*

## Exploring the Tynker Editor

Once you select a generation type, you’ll be taken to the **Tynker Editor** — your main hub for customizing your app. The editor is divided into three key areas:

* **Left Panel**
  * Navigation between pages
  * Plugin management
  * App-wide settings
* **Center Panel**
  * Live preview of your app
  * Interactive editor for modifying content and styling
* **Right Panel**
  * Design options for selected elements
  * Controls for layout, typography, spacing, colours, and more

Clicking on any element (or the app background) will update the design panel on the right to show relevant customization options.

### Design and Styling Options

Tynker’s design system is based on familiar CSS concepts. If you have experience with web design, you’ll feel right at home. Even if you don’t, each option is intuitive and self-explanatory.

{% hint style="info" %}
Want to go deeper? Check out our [Styling & Branding](/tynker-ai-guides/styling-and-branding/overview.md) guide to unlock advanced customization features and tips.
{% endhint %}

## Adding Your Prompts

To ensure your game generates meaningful and high-quality AI images, you’ll need to configure both the visible choices users interact with and the hidden prompts passed to the AI for generation.

### Step 1: Navigate to the Word Cloud Page

1. In the **left panel**, select the **"Word Cloud"** page.
2. In the **centre preview**, click on the first option labelled **"Choice 1"**.
3. **Double-click** the text to begin editing.

### Step 2: Update Visible Choices

Update the first three visible choices as follows:

* **Choice 1** → `Vinyl doll`
* **Choice 2** → `Spaceman`
* **Choice 3** → `Rockstar`

<figure><img src="/files/Kmbr59qzysKtbzGRYZuq" alt="" width="178"><figcaption></figcaption></figure>

{% hint style="warning" %}
These labels are what your users will see when interacting with your app. They **do not** affect what is passed to the AI — this allows you to provide a user-friendly label while sending a more detailed prompt behind the scenes.
{% endhint %}

### Step 3: Remove Extra Choices

1. Click on **Choice 4** and **Choice 5**.
2. Press the **trash can icon** beneath each one to delete them.

<figure><img src="/files/nSK10zK510ABN8h1oCMq" alt="" width="149"><figcaption></figcaption></figure>

### Step 4: Add More Choices (Optional)

If you want to include additional options:

1. Click on the **container** holding the current choices.
2. Press the **plus (+) button** in the centre to add a new choice.
3. Edit the text as described above.

<figure><img src="/files/s1fl2PMMwU5NoQ3ZuQ9h" alt=""><figcaption></figcaption></figure>

### Step 5: Configure Secret Prompts

Now, let’s assign hidden prompts that will be sent to the AI engine to generate high-quality outputs.

For each choice:

1. Click on the choice in the centre panel.
2. In the **right panel**, find the field labelled **"Secret prompt"**.
3. Enter the corresponding backend prompt:

| Visible Choice | Secret Prompt                                            |
| -------------- | -------------------------------------------------------- |
| Vinyl doll     | *A colourful vinyl doll in the style of a pop figurine.* |
| Spaceman       | *A spaceman floating in space.*                          |
| Rockstar       | *A rockstar playing a guitar.*                           |

***

Once you’ve completed these steps, your app will be ready to generate visually rich images based on user-selected prompts.

{% hint style="info" %}
Need help crafting the perfect AI prompt? Check out our [prompt writing guide](/tynker-ai-guides/ai-and-prompting/prompt-writing.md) for best practices and inspiration.
{% endhint %}