Onlook 功能

Onlook 提供一系列功能，帮助设计师和开发者更高效地协作。

Onlook 提供强大的功能，简化你的设计到代码工作流程

主要功能

可视化编辑器

可视化编辑器允许你以类似 Figma 等设计工具的方式，可视化编辑 React 组件。你可以：

• 拖拽组件
• 调整元素大小和位置
• 编辑文本和图片
• 使用 Tailwind CSS 应用样式

Onlook 的可视化编辑器提供熟悉的设计工具界面

代码集成

Onlook 与你的代码无缝集成，允许你：

• 实时查看代码变更
• 直接编辑代码
• 导入和导出组件
• 集成到你现有的工作流程

实时观看你的设计变更在代码中的反映

AI 辅助

Onlook 的 AI 辅助帮助你：

• 根据描述生成组件
• 获得改进建议
• 将设计转换为代码
• 调试问题

让 AI 帮助你创建和改进设计

Figma 到 Onlook

将你的 Figma 设计直接导入 Onlook，以：

• 将设计转换为可运行的 React 组件
• 保持设计的还原度
• 使设计互动化
• 连接数据源

无缝从 Figma 设计过渡到可运行的代码