可视化设计器：无需写代码即可创建 UI

可视化设计器：通过拖放构建界面

可视化设计器是 PocketCode 中最强大的功能之一。它让你以可视化的 方式创建用户界面，并自动生成干净、可用于生产的代码。

为什么要用可视化设计器？

在手机屏幕上设计 UI 可能很有挑战性。在小屏幕上手动编写布局代码既慢又容易出错。 可视化设计器用一个直观的拖放界面解决了这个问题。

优势

• 速度： 用几分钟完成设计，而不是几小时
• 可视化： 实时看到结果
• 干净的代码： 生成遵循最佳实践的代码
• 多目标： React、Vue、Svelte、HTML/CSS 和 SVG

开始使用

打开设计器

1. 在任意项目中，点击标签栏里的 Design 图标
2. 选择导出目标（React、Vue、Svelte、HTML/CSS）
3. 从空白画布开始，或选择一个模板

基本界面

设计器分为几部分：

• 组件面板（左侧）—— 可拖动的元素
• 画布（中间）—— 你的设计区域
• 属性（右侧）—— 自定义选中的元素

可用组件

组件面板涵盖35 种组件类型。以下是部分选择：

布局（Layout）

组件	描述
Container	灵活的容器
Row	水平排列的元素
Column	垂直排列的元素
Grid	CSS Grid 布局
Scroll	可滚动的区域

输入（Input）

组件	描述
Button	带多种变体的按钮
TextInput	文本输入框
Toggle	开/关切换
Slider	数值选择器
Dropdown	下拉菜单
Checkbox	复选框
RadioGroup	单选选项

展示（Display）

组件	描述
Text	带样式的文本
Image	图片/图标
Card	信息卡片
List	动态列表
Badge	通知徽章
Divider	视觉分隔线

导航（Navigation）

组件	描述
NavBar	顶部导航栏
TabBar	标签页导航
BottomNav	底部导航
Breadcrumb	层级导航

实战教程：登录界面

让我们一步步创建一个完整的登录界面：

第 1 步：基本结构

把一个 Column 拖到画布上并配置：

• 对齐方式：居中
• 内边距：24px
• 背景：#0a0a0a

第 2 步：添加 logo

在这个 column 内部，拖入一个 Image：

• 尺寸：120x120
• 圆角：full（圆形）
• 下外边距：32px

第 3 步：文本输入框

添加两个 TextInput 组件：

Email：

• 占位符："Email"
• 类型：email
• 图标：mail
• 宽度：100%

Password：

• 占位符："Password"
• 类型：password
• 图标：lock
• 宽度：100%

第 4 步：登录按钮

拖入一个 Button：

• 文本："Log In"
• 变体：primary
• 宽度：100%
• 圆角：12px

第 5 步：额外链接

添加 Text 组件用于：

• "Forgot your password?"（链接样式）
• "Don't have an account? Sign up"（暗淡文本 + 链接）

生成的代码

设计器会自动生成干净的代码：

// React 输出
export function LoginScreen() {
	const [email, setEmail] = useState("");
	const [password, setPassword] = useState("");

	return (
		<div className="flex flex-col items-center justify-center min-h-screen bg-neutral-950 p-6">
			<img src="/logo.png" alt="Logo" className="w-30 h-30 rounded-full mb-8" />

			<input
				type="email"
				placeholder="Email"
				value={email}
				onChange={(e) => setEmail(e.target.value)}
				className="w-full p-3 mb-4 bg-neutral-900 rounded-xl
                   border border-neutral-800 text-white"
			/>

			<input
				type="password"
				placeholder="Password"
				value={password}
				onChange={(e) => setPassword(e.target.value)}
				className="w-full p-3 mb-6 bg-neutral-900 rounded-xl
                   border border-neutral-800 text-white"
			/>

			<button
				className="w-full p-3 bg-blue-600 rounded-xl
                          text-white font-semibold hover:bg-blue-700"
			>
				Log In
			</button>

			<p className="mt-4 text-neutral-500 text-sm">
				Don't have an account? <span className="text-blue-400">Sign up</span>
			</p>
		</div>
	);
}

<!-- Vue 输出 -->
<script setup>
import { ref } from "vue";
const email = ref("");
const password = ref("");
</script>

<template>
  <div class="flex flex-col items-center justify-center min-h-screen bg-neutral-950 p-6">
    <img src="/logo.png" alt="Logo" class="w-30 h-30 rounded-full mb-8" />
    <input
      v-model="email"
      type="email"
      placeholder="Email"
      class="w-full p-3 mb-4 bg-neutral-900 rounded-xl border border-neutral-800 text-white"
    />
    <input
      v-model="password"
      type="password"
      placeholder="Password"
      class="w-full p-3 mb-6 bg-neutral-900 rounded-xl border border-neutral-800 text-white"
    />
    <button
      class="w-full p-3 bg-blue-600 rounded-xl text-white font-semibold hover:bg-blue-700"
    >
      Log In
    </button>
    <p class="mt-4 text-neutral-500 text-sm">
      Don't have an account? <span class="text-blue-400">Sign up</span>
    </p>
  </div>
</template>

高级功能

响应式设计

设计器会自动处理响应式：

• 自动布局： 元素会适应屏幕尺寸
• 断点： 为手机/平板定义不同的排列方式
• 相对单位： 使用 %、rem 和 flex 而不是固定像素

交互状态

设计器捕捉的是视觉状态，而不是行为——它输出的是静态的 HTML/CSS，因此没有事件接线 或导航。你能为每个组件设置的内容有：

1. 选中一个组件（例如一个 Button）
2. 独立设置它的 hover、active、focus 和 disabled 状态的样式
3. 对于链接，设置其 href 目标

真正的行为（点击处理函数、路由、数据）会在之后的代码中添加，也就是在设计器导出的 HTML/CSS/React/Vue/Svelte 上添加。

可复用的模板

把你的设计保存为模板：

• 自定义组件： 把组合保存为单个组件
• 设计系统： 定义颜色、排版和间距
• 界面模板： 与团队共享完整布局

手势支持

设计器专为触控交互而设计：

• 在画布上双指缩放
• 双击以选中嵌套元素
• 长按打开上下文菜单
• 滑动在面板之间移动

导出目标

设计器生成真实、可编辑的代码——全部基于 web：

目标	输出
React / JSX	带 hooks 的组件
Vue	单文件组件
Svelte	.svelte 组件
HTML + CSS	干净、无框架依赖的标记
SVG	画布的矢量导出

技巧与最佳实践

1. 从结构入手： 先放置容器，再放内容
2. 使用自动布局： 尽可能避免固定尺寸
3. 为组件命名： 生成更易读的代码
4. 经常预览： 在不同屏幕尺寸上检查
5. 增量导出： 不要等到最后才检查代码

---

可视化设计器让你在同一台设备上既能设计又能编程——勾勒一个界面，导出干净的 React、Vue、Svelte 或 HTML/CSS，然后就地继续构建。今天就试试，加速你的开发！