Pix2Layout - 图片转布局

将任意图片智能解析为可编辑的 DIV 布局。支持 AI 识别、拖拽调整、批量编辑，轻松复刻任何网页设计。

Pix2Layout - AI 图片转 DIV 布局生成器 ┌─────────────────────────────────────────────────────────────┐ │ 摘要 (最多 132 个字符) │ └─────────────────────────────────────────────────────────────┘ 使用 AI 将任意图片转换为可编辑的 HTML DIV 布局。拖拽调整、批量操作、导出代码，前端开发必备工具。 ┌─────────────────────────────────────────────────────────────┐ │ 说明 (最多 16,000 个字符) │ └─────────────────────────────────────────────────────────────┘ Pix2Layout 是一款强大的开发者工具，利用 AI 识别技术将任意图片转换为可编辑的 HTML DIV 布局。 🚀 核心功能： • AI 智能图片解析 上传任意 UI 截图、设计稿或网页图片，AI 自动识别元素并生成对应的 DIV 布局结构。 • 可视化拖拽编辑器 直观拖拽移动元素，通过角柄调整大小，实时预览更改效果。 • 智能对齐工具 - 拖拽时显示智能对齐线 - 网格吸附功能 - 一键对齐：顶对齐、左对齐、水平/垂直居中 - 等间距分布：水平或垂直方向自动均匀分布 • 多选批量操作 - 按住 Ctrl/Cmd 多选 DIV 元素 - 同时对多个选中元素执行操作 - 统一大小、批量对齐、均匀分布 • 撤销/重做历史 完整的撤销/重做支持，支持键盘快捷键 (Ctrl+Z / Ctrl+Y) • 干净代码导出 将布局导出为结构化的 JSON 或 HTML 代码，轻松集成到项目中。 • 多语言支持 支持英文和简体中文界面 💡 为什么要安装 Pix2Layout？ • 节省大量开发时间 告别手动从设计稿编写布局代码。即时生成结构，可视化微调。 • 前端开发者必备 无论是构建新网站还是复刻现有设计，Pix2Layout 都能加速你的工作流。 • 无需设计技能 只需粘贴任意图片，让 AI 完成繁重工作。专注于编码，而非测量像素。 • 快速原型制作 几分钟内将截图转换为可用的 HTML 原型，而非几小时。 📖 使用方法： 1. 粘贴或上传任意图片（UI 截图、设计稿、线框图） 2. 点击"AI 解析图片"生成 DIV 布局 3. 可视化调整元素：拖拽移动、手柄调整大小 4. 使用对齐工具完善布局 5. 复制生成的 JSON 或 HTML 代码到项目中 🔒 隐私与安全： • 不收集任何数据 - 图片始终保留在您的设备上 • AI 处理使用您自己的 API 端点（兼容 OpenAI） • 仅本地存储偏好设置和配置