> ## 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.

# 快速开始

import Image from '@/components/Image';

Kick Start 帮助您使用简短的文字描述创建**全新的 Figma 布局**.
这是**将想法转化为干净,可编辑的Frame**的最快方式,该Frame与您现有的 Figma 设计style相匹配.

本指南通过简单的说明和视觉示例引导您完成每个Step.

***

## 1.打开插件并选择**Kick Start**

从 Figma 插件选单中打开 **prompt.to.design**.\
在顶部导航中,点击 **Kick Start** 标签以开始新的布局生成.

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

***

## 2. 选择设备和布局尺寸

选择是否要生成 **Web** 或 **Mobile** 布局.
然后选择适合您的项目的布局尺寸（例如,桌面 1440 像素,移动设备 390 像素）.

<img src="https://mintcdn.com/uxarts/I6HFqaPtsdDRX4cS/images/kick-start/2.png?fit=max&auto=format&n=I6HFqaPtsdDRX4cS&q=85&s=5a834ee4d19bc81972122d3d8fcfe070" alt="选择 Web 或移动设备并选择布局大小" width={350} data-path="images/kick-start/2.png" />

***

## 3.描述你想要生成的页面

在提示框中输入页面的**简短而清晰的描述**.\
您可以描述**布局结构,部分,页面用途或样式首选项**.

提示示例:

> "现代化的仪表板,带有左侧边栏,顶部导航和四张统计Card.干净且简约."

<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.（可选）添加图像或文档参考

如果您希望 AI 遵循特定的style或视觉布局,您可以**上传屏幕截图,UI 参考或文档**.
该参考将在插件内display为小缩略图.

<img src="https://mintcdn.com/uxarts/I3JOnALDZ5tIGfai/images/kick-start/4.png?fit=max&auto=format&n=I3JOnALDZ5tIGfai&q=85&s=c21f8aee303ea3edc2dfa92d5eb93fc5" alt="上传可选参考图像或文件" width={600} data-path="images/kick-start/4.png" />

***

## 5. 单击"**生成**"并查看布局预览

单击 **生成** 以启动 AI 流程.\
生成完成后,该插件将display布局预览选项.\
**滾动或单击预览**以在插入之前检查设计.

<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. 将布局插入 Figma

选择您喜欢的布局并点击 **插入**.
新的Frame将添加到您的 Figma 画布中.
所有生成的图层都是**原生 Figma 元素**,完全可编辑并准备好进行迭代.

<img src="https://mintcdn.com/uxarts/I3JOnALDZ5tIGfai/images/kick-start/6.png?fit=max&auto=format&n=I3JOnALDZ5tIGfai&q=85&s=56a70c9a0d12476d1a766dd43478a8af" alt="将生成的布局作为可编辑Frame插入 Figma" width={700} data-path="images/kick-start/6.png" />

***

## 概括

Kick Start 允许您:

* 在几秒钟内从想法到布局
* 生成干净,可编辑的 Figma Frame
* 使用 prompt-to-design,可以带或不带参考图像
* 无需手动繪制线框图即可快速启动您的工作流程

这使其成为开始任何新项目（从仪表板到登陆页面再到移动屏幕）的最快方式.

<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'"
  >
    开始使用 prompt.to.design 设计
  </a>
</div>