可视化设计器
FreePro: AI Designer + React/Vue/SvelteFigma 风格的 HTML/CSS 可视化构建器,带 2D 画布、智能捕捉、对齐和分布、属性 / 图层 / 主题面板、多页面支持以及生成纯 HTML/CSS 和框架代码(React、Vue、Svelte)的导出管道。包括 Pro AI 设计器流程,该流程将自然语言简报转换为可编辑项目,可在应用前审查。
2D 画布
点击选择后拖动移动、调整大小、网格捕捉和与其他组件捕捉、0.1× – 4× 缩放、带距离标签的智能参考线。
14 个内置组件
Text, Heading, Button, Link, Badge, Chip, Icon, HR Divider, Text Field, Text Area, Checkbox, Toggle, Option, Select.
Properties · Layers · Theme
三个侧面板用于样式化、排序和管理颜色 tokens。
多页面
预览中的标签;添加 / 重命名 / 复制 / 删除无限制。
5 个内置模板
Landing, Login, Dashboard, Portfolio, E-Commerce + Marketplace.
双向 Marketplace
导入模板和已下载的组件;发布你的设计。
可视化画布
纯原生画布(非 WebView),带动态画板、可配置背景、可视网格、智能参考线和带两种光标模式(选择和平移)的直接操作。
| 交互 | 机制 |
|---|---|
| 点击 | 选择手指下最内层的组件;点击空白处取消选择 |
| 拖动已选中 | 移动它;智能捕捉建议相邻边缘/中心 |
| 拖动未选中 | 平移/滚动画布(不移动组件) |
| 双指捏合 | 缩放 0.1× – 4×,相对于光标 |
| Resize | 4 个角 + 4 个边的手柄,带幽灵预览 |
| 网格捕捉 | 可配置的网格大小(默认 16 px);开/关切换 |
| 多选 | 拖动已选中的成员会移动整个组 |
| 对齐 | Left/Center-H/Right · Top/Center-V/Bottom |
| 分布 | 水平和垂直 |
| 父子 | 容器组件接受带 flex 自动布局的嵌套子元素(row/column/grid、gap、padding、wrap) |
| 锁定 | 锁定拖动和调整大小 |
| 可见性 | 显示/隐藏切换 |
| Z-index | 图层面板中的视觉顺序 |
Responsive Preview
在不影响底层文档的情况下,以预定义的宽度预览画布。
原始
—
Mobile S
320 px
Mobile
375 px
Mobile L
428 px
Tablet
768 px
Desktop
1280 px
Desktop L+
1440 px+
Pro
自动堆叠重排
画布预览和 HTML 生成器共享的单一纯函数。在窄宽度下,它将根元素聚类成行,并对小项目(导航栏、chip)进行流式换行或将块堆叠为全宽 — 仅显示,文档从不改变。
按断点覆盖
每个元素可以按断点存储位置/大小/可见性覆盖(mobile ≤ 480 px,tablet ≤ 900 px)。从样式面板的 Responsive 标签编辑,优先于自动堆叠,并导出为真实的 @media 查询。
除了画布宽度,全屏 WebView 预览在真实设备框架中渲染生成的 HTML — Mobile 375 · Tablet 768 · Desktop 1280 · Full — 以设备的真实 CSS 宽度,因此导出的 @media 查询会真正触发。
组件面板
Basic
Text · Heading · Button · Link · Badge · Chip · Icon · HR Divider
Input
Text Field · Text Area · Checkbox · Toggle · Option · Select
Layout
Box · Card · Column · Row · Navbar
Container
可以嵌套子元素的组件
Navigation
Navbar · Link
Feedback
Badge · Chip
Downloaded 标签显示从 Marketplace 下载的组件,一键可插入到画布。
属性面板
选定组件上的固定标签:Design、Style、Spacing、Layout、FX 和 Responsive。
内置模板
Landing Page
带英雄区和特性网格的现代落地页
Login Form
邮箱/密码身份验证表单
Dashboard
带统计卡和设置的管理面板
Portfolio
个人作品集,带 about、projects、contact
E-Commerce
带详情视图的产品目录
Free 限制:从模板创建 3 个设计
从第 4 个基于模板的设计起,无限模板限制将被触发。
导出格式
| 格式 | Plan | 分享时的 MIME |
|---|---|---|
| HTML | Free | text/html |
| CSS | Free | text/css |
| SVG | Free | image/svg+xml |
| React (JSX + CSS) | Pro | text/plain |
| Vue (SFC) | Pro | text/plain |
| Svelte | Pro | text/plain |
导出的 CSS 为每个组件发出真实的 @media 查询,将自动堆叠(干净的移动/平板列)与用户覆盖(优先)结合。所有 3 种框架格式(React、Vue、Svelte)受 Premium 限制并继承相同的 @media;Copy HTML、Copy CSS 和 View Code 始终免费。
AI Designer
100 % ProPro 独占功能。将自然语言简报转换为可编辑的设计项目,通过 5 阶段管道,在应用更改到画布之前强制先审查。
Pipeline
Phase 1
Brief & Discovery
Page type, style, palette, discovery form
Phase 2
生成
计划流 + LLM 调用
Phase 3
Review
评判分数 + 动作列表
Phase 4
Apply
通过撤销/重做管理器的操作
Phase 5
Live Preview
WebView, Save/Export/Regenerate
20 page types
Landing · Dashboard · Blog · E-commerce · Portfolio · Admin · SaaS · Marketing · Form · Auth · Onboarding · Settings · Pricing · Data Viz · Docs · Social · Gallery · Email · Wireframe · Presentation
10 visual styles
Minimal · Bold · Dark · Editorial · Playful · Corporate · Technical · Glassmorphism · Brutalist · Soft & Warm
8 个调色板
Blues · Purples · Greens · Reds · Warm · Mono · Teals · Pinks · + 自定义 3 种颜色
发现表单(可选)
Self-critique scores (0-10)
Hierarchy
清晰的视觉层次?
Execution
干净的布局?
Specificity
针对简报的细节?
Restraint
避免不必要的复杂性?
彩色编码平均值:绿色 ≥ 7,黄色 ≥ 4,红色 < 4。
流程保证
- •只接受安全的设计操作(目录验证)
- •应用前在 AI 更改审查屏幕中强制可视化差异
- •撤销/重做保持完好 — 每个操作都通过画布历史记录
- •导出重用手动流的 HTML/CSS 生成器
AI 辅助工具(Pro)
- AI Align — 接收选定的组件并自动重新排列。
- AI Component — 从简短的简报生成一个部分或组件,并将其插入到画布中。
Free vs Pro 计划
| 功能 | Plan |
|---|---|
| 画布编辑器(所有内置组件) | Free |
| 捕捉、网格、标尺、对齐、分布 | Free |
| 多页面 | Free |
| 颜色 tokens、主题、自定义 CSS | Free |
| 撤销/重做、自动保存 | Free |
| 内置模板(最多 3 个设计) | Free |
| 从第 4 个设计起的模板 | Pro |
| 响应式预览(最多 Desktop 1280) | Free |
| 响应式 Desktop L + 自定义断点 | Pro |
| Export HTML / CSS / SVG | Free |
| Export React / Vue / Svelte | Pro |
| Copy HTML, Copy CSS, View Code | Free |
| 向 Marketplace 发布设计/组件 | Free |
| 完整的 AI 设计器(简报 → 审查 → 应用 → 实时预览) | Pro |
| AI Align, AI Component | Pro |
模块统计
14
内置组件
5
内置模板
6
导出格式
6
样式面板标签
7
响应式模式
2
覆盖断点
20
AI page types
10+
AI visual styles
8
AI palettes
下一步
Marketplace