界面概览

Onlook 的界面设计直观，方便设计师使用，同时提供强大的功能以编辑 React 组件。

主要界面区域

Onlook 界面分为几个关键区域：

• 画布：中央区域，用于查看和交互组件
• 层级面板：显示组件层级，类似设计工具中的图层
• 属性面板：编辑选中组件的属性
• 样式编辑器：通过可视化界面修改 Tailwind 样式
• 代码面板：查看和编辑生成的代码
• AI 聊天：与 AI 交互，帮助生成和修改组件

导航

• 使用 项目选择器 切换不同项目
• 文件浏览器 允许浏览项目文件
• 面包屑导航 显示当前组件层级中的位置

快捷键

Onlook 提供多种快捷键以加快工作流程：

• Ctrl/Cmd + S：保存更改
• Ctrl/Cmd + Z：撤销
• Ctrl/Cmd + Shift + Z：重做
• Ctrl/Cmd + C：复制选中组件
• Ctrl/Cmd + V：粘贴组件
• Delete：删除选中组件
• Escape：取消当前选择