创建你的第一个项目

【Creating Your First Project】

本教程将指导你在 Onlook 中创建第一个项目。

【This tutorial will guide you through creating your first project in Onlook.】

步骤 1：创建一个新项目

【Step 1: Create a New Project】

1. 打开 Onlook
2. 在欢迎界面点击“新建项目”
3. 选择一个模板或从头开始
4. 为你的项目输入名称
5. 点击“创建”

步骤 2：探索界面

【Step 2: Explore the Interface】

花点时间探索 Onlook 界面：

【Take some time to explore the Onlook interface:】

• 画布：显示并与组件交互的主要区域
• 图层面板：显示组件层级
• 属性面板：编辑所选组件的属性
• 样式编辑器：修改 Tailwind 样式
• 代码面板：查看和编辑生成的代码

第三步：添加组件

【Step 3: Add Components】

1. 点击工具栏中的“+”按钮
2. 从库中选择一个组件
3. 将它拖到画布上
4. 使用属性面板进行自定义

步骤 4：为组件添加样式

【Step 4: Style Your Components】

1. 在画布上选择一个组件
2. 使用样式编辑器应用 Tailwind 类
3. 调整间距、颜色、排版和其他属性

步骤5：预览并导出

【Step 5: Preview and Export】

1. 点击“预览”查看你的项目效果
2. 做最后的调整
3. 点击“导出”以导出你的项目
4. 选择导出选项（代码、图片等）