Quickstart

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

To create your first app:

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.

Want to go deeper? Check out our Styling & Branding guide to unlock advanced customization features and tips.

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

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.

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.

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.

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.

Need help crafting the perfect AI prompt? Check out our prompt writing guide for best practices and inspiration.