// tools · designer
在手机上设计。以 代码交付
带智能吸附的 2D 画布、十四个组件和真实的响应式预览——导出 HTML、CSS 和 SVG，或 React、Vue 和 Svelte。AI 把简报变成页面。
设计器
14 个组件·6 种导出格式·7 种响应式模式·AI 简报→设计·5 个模板
会帮忙的画布
指南、图层和多页面尽在手中。
- 网格吸附，带实时距离标签
- 多选、对齐和分布
- 图层，带锁定、可见性和 z-index
真正的响应式
以真实设备宽度预览，而非模拟。
- 真实的 @media 查询在预览中触发
- 自动堆叠回流到移动端
- 按断点覆盖，无需代码
简报到页面
描述一个界面；应用前先审阅。
- 五阶段流程：简报、提问、生成、审阅、应用
- 20 种页面类型、10+ 种风格、8 种配色
- 应用前自我评审评分
导出为生产代码
一键从原型到代码库。
- HTML、CSS 和 SVG，免费
- React（JSX）、Vue（SFC）和 Svelte
- 保留 media 查询和覆盖
// spec
技术规格
内置组件14
导出格式6 formats
模板5 + market
响应式模式7 modes
AI 页面类型20
AI 风格 / 配色10+ · 8
画布缩放0.1–4×
颜色令牌✓
plan.free
- ·完整画布和组件
- ·响应式预览至桌面
- ·导出 HTML、CSS 和 SVG
plan.premium
- +导出 React、Vue 和 Svelte
- +AI 设计器、对齐和组件
- +Desktop-L 和自定义断点
- +无限基于模板的设计
// faq
常见问题
可以在 Android 上可视化设计应用界面吗？
可以。可视化设计器是一个拖放画布，含 14 个组件，缩放范围 0.1x 到 4x,让你手动布局 UI 界面并转换为真实代码，而不是静态原型图。
它能用 AI 生成设计吗？
可以。描述你想要的界面，AI 设计向导就会生成一个可继续完善的初始布局，这样你无需手动摆放每个元素——从想法到可编辑 UI 的快捷方式。
它支持响应式布局吗？
支持。你可以在 7 种模式和 20 种页面类型下预览设计，查看布局如何适配不同屏幕尺寸，而 design token 让间距、颜色和字体在屏幕变化时保持一致。
设计可以导出为哪些格式？
设计可导出为 6 种格式并支持 design token,因此你的视觉成果会变成真实可用的代码或资源，而不是一张平面图片——你可以把它交给代码编辑器，继续在此基础上开发。
设计器可以离线使用吗？
可以。设计器在 Android 9 及更高版本上完全在设备上运行，因此你可以在没有任何网络连接的情况下构建、预览和导出 UI——与 PocketCode 的其他工具一样。