> ## Documentation Index
> Fetch the complete documentation index at: https://docs.superun.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Kick Start

Kick Start helps you create **a brand-new Figma layout** using a short text description.\
It's the fastest way to **turn an idea into a clean, editable frame** that matches your existing Figma design style.

This guide walks you through each step with simple instructions and visual examples.

***

## 1. Open the plugin and select **Kick Start**

Open **prompt.to.design** from the Figma plugin menu.\
In the top navigation, click the **Kick Start** tab to start a new layout generation.

<img src="https://mintcdn.com/uxarts/I6HFqaPtsdDRX4cS/images/kick-start/1.png?fit=max&auto=format&n=I6HFqaPtsdDRX4cS&q=85&s=89fbd37d329b5e07edad4bc42e5d3f45" alt="Open prompt.to.design and select Kick Start tab" width={700} data-path="images/kick-start/1.png" />

***

## 2. Choose device and layout size

Select whether you want to generate a **Web** or **Mobile** layout.\
Then choose a layout size that fits your project (e.g., Desktop 1440px, Mobile 390px).

<img src="https://mintcdn.com/uxarts/I6HFqaPtsdDRX4cS/images/kick-start/2.png?fit=max&auto=format&n=I6HFqaPtsdDRX4cS&q=85&s=5a834ee4d19bc81972122d3d8fcfe070" alt="Choose Web or Mobile and select layout size" width={350} data-path="images/kick-start/2.png" />

***

## 3. Describe the page you want to generate

Type a **short and clear description** of your page in the prompt box.\
You can describe **layout structure, sections, page purpose, or style preferences.**

Example prompt:

> "A modern dashboard with a left sidebar, top navigation, and four stats cards. Clean and minimal."

<img src="https://mintcdn.com/uxarts/I6HFqaPtsdDRX4cS/images/kick-start/3.png?fit=max&auto=format&n=I6HFqaPtsdDRX4cS&q=85&s=b4d28887de89668f1f3a743a557f118c" alt="Enter a prompt describing the layout you want to generate" width={350} data-path="images/kick-start/3.png" />

***

## 4. (Optional) Add an image or document reference

If you want the AI to follow a specific style or visual layout, you can **upload a screenshot, UI reference, or document**.
The reference will appear as a small thumbnail inside the plugin.

<img src="https://mintcdn.com/uxarts/I3JOnALDZ5tIGfai/images/kick-start/4.png?fit=max&auto=format&n=I3JOnALDZ5tIGfai&q=85&s=c21f8aee303ea3edc2dfa92d5eb93fc5" alt="Upload optional reference image or file" width={600} data-path="images/kick-start/4.png" />

***

## 5. Click **Generate** and review layout previews

Click **Generate** to start the AI process.\
The plugin will show layout preview options when the generation is complete.\
**Scroll or click a preview** to inspect the design before inserting it.

<img src="https://mintcdn.com/uxarts/I6HFqaPtsdDRX4cS/images/kick-start/5_A.png?fit=max&auto=format&n=I6HFqaPtsdDRX4cS&q=85&s=1b8571fbe811eb63764875eb84cb623a" alt="AI generating layout previews" width={700} data-path="images/kick-start/5_A.png" />

<img src="https://mintcdn.com/uxarts/I3JOnALDZ5tIGfai/images/kick-start/5_B.png?fit=max&auto=format&n=I3JOnALDZ5tIGfai&q=85&s=41e81462220c4d1697116dc69a7df60a" alt="Review generated layout previews" width={700} data-path="images/kick-start/5_B.png" />

***

## 6. Insert the layout into Figma

Choose the layout you like and click **Insert**.\
A new frame will be added to your Figma canvas.\
All generated layers are **native Figma elements**, fully editable and ready for iteration.

<img src="https://mintcdn.com/uxarts/I3JOnALDZ5tIGfai/images/kick-start/6.png?fit=max&auto=format&n=I3JOnALDZ5tIGfai&q=85&s=56a70c9a0d12476d1a766dd43478a8af" alt="Insert generated layout into Figma as an editable frame" width={700} data-path="images/kick-start/6.png" />

***

## Summary

Kick Start allows you to:

* Go from idea to layout in seconds
* Generate clean, editable Figma frames
* Use prompt-to-design with or without reference images
* Jump-start your workflow without drawing wireframes manually

This makes it the fastest way to begin any new project, from dashboards to landing pages to mobile screens.

<div
  style={{
marginTop: '2rem',
display: 'flex',
justifyContent: 'center',
}}
>
  <a
    href="https://www.figma.com/community/plugin/1528325292196938261/prompt-to-design-by-superun-ai-10x-faster-with-ai-design-like-a-pro-prototype-instantly"
    style={{
  backgroundColor: '#0F172A',
  color: 'white',
  padding: '12px 28px',
  borderRadius: '8px',
  fontSize: '16px',
  fontWeight: '600',
  textDecoration: 'none',
  boxShadow: '0 4px 12px rgba(0,0,0,0.08)',
  transition: 'all 0.2s ease',
}}
    onMouseOver="this.style.backgroundColor='#1E293B'"
    onMouseOut="this.style.backgroundColor='#0F172A'"
  >
    Start Designing with Prompt.to.design
  </a>
</div>