Onlook 功能

【Onlook Features】

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

【Onlook provides a range of features to help designers and developers work together more efficiently.】

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

主要特点

【Key Features】

可视化编辑器

【Visual Editor】

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

【The Visual Editor allows you to edit React components visually, similar to design tools like Figma. You can:】

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

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

代码集成

【Code Integration】

Onlook 无缝集成到你的代码中，让你能够：

【Onlook integrates seamlessly with your code, allowing you to:】

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

观看你的设计更改立即反映在代码中

人工智能助手

【AI Assistance】

Onlook 的 AI 助手可以帮助你：

【Onlook's AI assistance helps you:】

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

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

Figma 到 Onlook

【Figma to Onlook】

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

【Import your Figma designs directly into Onlook to:】

• 将设计转换为可用的 React 组件
• 保持设计一致性
• 让设计具有互动性
• 连接到数据源

无缝将 Figma 设计转化为可用代码