可视化设计器

你可以

• 点按卡片，在编辑器中打开该设计。
• 打开卡片的 ⋮ 菜单，可 复制 它（副本沿用原名称并加上“（副本）”）或 删除 它。删除前会要求确认，并永久移除该设计及其备份和所有版本。
• 点按 新建设计 来创建：给空白设计起名并选择尺寸，或选择 从模板创建。
• 使用顶部的三个导入按钮：导入设计 (.pcd)、从 Figma 导入 (JSON) 和 从 HTML 导入。
• 空白设计可以随意创建多个。在 Free 上，当你已有三个由模板创建的设计后，手动设计 和 新建设计 上会出现 PRO 徽章，但它指的是模板数量上限，从不针对空白设计。
• 如果某个设计文件无法读取，它那一行会显示 该设计已损坏；点按 恢复（见编辑器中的恢复）。

你不能，以及原因

• 重命名设计。名称在创建时设定；应用没有针对整个设计的重命名操作（页面可以重命名）。尚未提供

你可以

• 为设计命名，并选择竖屏或横屏。
• 选择尺寸：Mobile (360×640)、Tablet (768×1024)、Desktop (1280×800) 或 Custom，每边 64 到 8192 px。
• 选择布局：页面流（默认；各模块按顺序堆叠，并导出真正的响应式 HTML）或 自由画布（组件位于绝对位置）。
• 之后可通过画布缩放菜单中的 页面流 在两者之间切换。
• 在 我的设计 中，新建设计 会打开一个更简短的对话框：名称和尺寸，或 从模板创建。

你不能，以及原因

• 从模板或导入得到 页面流 设计：从模板创建的设计和导入的设计都从自由画布开始。有意为之

你可以

• 用任意模板创建设计，并像编辑其他设计一样编辑它。
• 在 Free 上，同一时间最多保留三个由模板创建的设计。删除一个会腾出一个名额（见Free 与 Pro）。由模板创建的设计的副本，或重新导入的它的 .pcd，同样会计入。

你不能，以及原因

• 在这里选择市场模板：选择器只列出五个内置模板。市场项目模板创建的是代码项目，而不是设计。有意为之
• 在 Free 上从模板创建第四个设计：它会打开用于解锁无限模板的 Pro 页面。Pro

你可以

• 导入 .pcd、Figma JSON 或 HTML 文件；应用会提示 设计已导入、已从 Figma 导入设计 或 已从 HTML 导入设计。
• 用 在 Designer 中打开 打开 AI 聊天中的 HTML 或 SVG 工件。

你不能，以及原因

• 从 Figma 账号或链接导入：只支持 JSON 文件。有意为之
• 完整保留 HTML 文件中的所有内容：脚本、@media 规则、伪类、复合选择器和复杂布局都不会被带入。有意为之
• 导入大于 20 MB 的 .pcd：应用会以“该文件不是有效的 PocketCode 设计”拒绝它。设备

你可以

• 在顶部栏撤销和重做，最多 200 步。
• 点按 ✨ 用 AI 改进 来改进当前打开的设计（见用 AI 设计）。
• 点按 保存 立即保存，点按 🌐 预览 预览设计。
• 通过页面选择器管理页面：切换页面、添加页面、重命名、复制页面 和 删除（需确认）。页面数量没有上限，但最后一页不能删除。
• 打开 原型 芯片，可在带有交互的组件之间绘制箭头。平板上还有 对比，可并排显示两个画布。
• 用边缘的标签收起停靠面板；在 工具 中可以关闭或开启浮动选中工具栏，或启用左手模式（它会移动该工具栏）。每个面板的高度都会被记住。

你不能，以及原因

• 在手机上使用 对比：该芯片只存在于宽布局（平板或横屏）中。设备
• 在多次会话之间保留撤销历史：关闭设计时会清空，且最多保存 200 步。有意为之

你可以

• 在 选择工具、平移工具 和 区域选择工具 之间切换。双击区域工具可让它保持启用。
• 打开缩放胶囊，可使用 放大、缩小、精确百分比（10 到 400）、50%、100% 和 200%、适应屏幕、缩放到选区、选区 100%、小地图（默认关闭）、显示标尺、页面流 和 重置视图。
• 双指捏合可在 0.1× 到 4× 之间缩放，缩放以你的手指为锚点；双指拖动可平移。
• 点按以选中最内层的组件，再次点按它可上升一层，点按空白处取消选择，长按一个未选中的组件可将它加入选区。
• 拖动已选中的组件来移动它。把它放到容器上即可嵌套；会有一条插入线显示它将落在哪里。拖动未选中的组件或空白处会平移画布。
• 用四个角和四条边上的手柄调整大小（实时预览显示宽 × 高），用圆形手柄旋转，旋转时每 15° 吸附一次。
• 双击文本打开 编辑文本。双击容器可将其隔离；带关闭按钮（退出隔离）的面包屑可让你离开。
• 吸附到 16 px 网格，以及相邻组件的边缘和中心，并显示距离标签；还可以从标尺拖出参考线。
• 使用选区上方的浮动工具栏：复制、删除、编辑文本 或 锁定宽高比、更改颜色、在父级中居中、上移一层、下移一层，以及会打开属性的 更多。
• 长按已选中的组件打开其上下文菜单：复制、复制所选内容、粘贴、置于顶层、置于底层、锁定 或 解锁、隐藏 或 显示、移出容器、转换为组件、导出为 HTML（把该组件导出为文件）和删除。
• 选中两个或更多组件时，对齐栏提供 左对齐、水平居中对齐、右对齐、顶部对齐、垂直居中对齐、底部对齐、水平分布、垂直分布、编组 和 取消编组。

你不能，以及原因

• 更改网格大小。网格固定为 16 px：你只能显示或隐藏它，以及开启或关闭 对齐吸附。有意为之
• 用 区域选择工具 选中容器的子级：它只会选中矩形所触及的顶层组件。有意为之
• 移动、调整大小或旋转已锁定的组件。有意为之
• 直接在画布上输入文字：双击会打开 编辑文本 对话框。有意为之

你可以

• 拖动内边距或间隙手柄来改变容器的间距；数值会四舍五入为整数像素。
• 开启 显示布局参考线（工具 → 视图），会绘制内边距色带，并为每个容器标出名称和间隙的标签。关闭后，参考线只显示在选中的容器上。
• 从标尺（显示标尺）拖出参考线。参考线会随设计一起保存，组件会吸附到它们上。

你不能，以及原因

• 让间距吸附到主题的间距刻度：手柄只会取整为整数像素，不会吸附到令牌。设计系统健康度 可以标出偏离刻度的数值并给出替换建议。有意为之

你可以

• 点按卡片即可添加组件，或长按卡片并拖动以精确放置；放到容器上会将其嵌套。
• 用 搜索组件… 查找组件，按分区筛选，复用 最近使用（最近 8 个），并用星标标记 收藏。
• 在 模块 中，插入五个现成模块之一：Hero、Feature strip、Pricing card、Contact form 和 Footer。
• 在 已下载 中，插入你从市场下载的组件。作为工具包应用（令牌、样式、组件） 会把已下载设计的令牌、样式和可复用组件复制到你的设计中。
• 在 我的组件 中，插入你自己的可复用组件。
• 为 Icon 和 Icon Button 从一套共 176 个 Material 图标中选择图标；图标会以矢量形式导出。
• 用 Code Embed（自定义 HTML / CSS / JS）添加自定义 HTML、CSS 和 JS。它会在导出时原样输出，不做转义，所以不要粘贴你不信任的代码。

你不能，以及原因

• 看到每个组件的实时缩略图：卡片上显示的是图标和组件的英文名称，搜索在所有语言下匹配的都是这些英文名称。有意为之
• 在这里插入市场模板：已下载 只列出已下载的组件。有意为之

你可以

• 同时编辑多个选中的组件：字段会显示共同的值或混合状态，并应用到所有组件。设计 标签页会被禁用，并显示 请只选择一个组件来编辑此项。
• 添加固定在组件上的 评论，可以解决和删除它们。评论随设计一起保存，并在 ZIP 导出中写入 comments.txt。
• 把组件转换为可复用组件，更新它的所有实例，或取消某个实例的关联（见可复用组件）。

你不能，以及原因

• 在画布上看到网页字体：导出的 HTML 会从 Google Fonts 链接字体，但画布绘制的是最接近的系统字体。有意为之
• 从属性搜索直接跳到具体字段：它打开的是正确的标签页，而不是具体控件。有意为之

你可以

• 用 搜索图层 按名称或类型搜索图层。
• 双击图层可重命名，用箭头上移或下移，用 移入 嵌套，用 移出容器 取出，用眼睛图标隐藏，用挂锁图标锁定。⋮ 菜单中有重命名、复制和删除。
• 开启 选择模式 可同时操作多个图层：隐藏或显示、锁定、复制或删除、复制和粘贴。
• 找出没有有效父级的组件：面板会告诉你有多少个，修复 会把它们移回根级。

你不能，以及原因

—

你可以

• 编辑 浅色 主题，在 创建深色主题 之后还可编辑 深色 主题。移除深色主题 会将其删除。
• 在 导出页面默认模式 下，选择导出的页面是 跟随系统、浅色 还是 深色。
• 创建八种类型的 令牌：颜色、间距、排版、阴影、圆角、不透明度、字号和行高。每个令牌都会显示被使用的次数，重命名令牌会改写所有对它的引用。
• 保存 文本样式 和 效果样式，并一键应用。
• 如果你应用过市场设计工具包，可在 工具包 中查看。

你不能，以及原因

• 撤销令牌的更改：创建、重命名或删除令牌、文本样式和效果样式不属于撤销历史。把样式应用到组件上则属于。有意为之
• 单独设置画布背景：画板颜色就是主题的背景色。有意为之

你可以

• 选中组件后选择 转换为组件（或按 Ctrl+Alt+K）。它会出现在 我的组件 中。
• 从 我的组件 插入它；每次使用都是一个实例（…的实例）。
• 编辑原件后选择 更新所有实例，即可把改动推送到其他实例。你在实例上手动改过的字段会被保留。
• 选择 取消关联，可把实例变回普通组件。

你不能，以及原因

• 让实例自动跟随原件：实例是静态副本，在你选择 更新所有实例 之前什么都不会变。有意为之

你可以

• 选择 悬停、激活、聚焦 或 禁用，并修改该状态下的样式。它们会导出为 :hover、:active、:focus 和 :disabled 规则。
• 用 预览为 在画布上查看所选组件处于某个状态时的样子；预览只作用于该组件。完成后可重置某个状态的覆盖。

你不能，以及原因

—

你可以

• 在 工具 → 视图中以七种宽度预览画布：原始尺寸、Mobile S (320)、Mobile (375)、Mobile L (428)、Tablet (768)、Desktop (1280) 和 Desktop L (1440)。绿色横幅（例如 Responsive: Mobile S (320px)）会告诉你当前所在位置，并带有 退出。文档本身不会改变。
• 打开 响应式 标签页，编辑某个断点的覆盖。默认断点是 Tablet（最多 900 px）和 Mobile（最多 480 px）；你可以在 100 到 2000 px 之间添加、编辑和移除断点，Desktop 是基准。
• 按断点和组件，更改位置、尺寸、可见性（在此断点下隐藏）、包括布局在内的样式、网格列数；对于自由画布中的根组件，还可设置堆叠模式：堆叠、流动、保持 或 隐藏。覆盖会导出为真正的 @media 规则。
• 在自由画布中，窄宽度下根组件会自动重排（分成行、换行或堆叠），画布和导出中都是如此；你的覆盖优先于它。在 页面流 中则由浏览器负责重排。

你不能，以及原因

• 在 Free 上预览 Mobile S、Mobile L 和 Desktop L：这三种预览需要 Pro（它们与 React、Vue 和 Svelte 导出共用同一道权限）。Original、Mobile、Tablet 和 Desktop 是免费的，编辑断点也是免费的。Pro

你可以

• 点按 添加交互 并选择一个 触发条件：点击、悬停、滚动进入视图、页面加载、延迟后（带 延迟（毫秒））或 提交表单。
• 选择一个 动作：跳转到页面、打开浮层、关闭浮层、切换可见性、滚动到、设置状态 或 打开 URL。对于页面切换，选择一个 过渡：无（即时）、淡入淡出 或 滑动。
• 开启 原型 芯片，会从每个带交互的组件向它的目标组件绘制蓝色箭头。
• 在 预览 中，或在浏览器中打开导出的 HTML 来运行原型：页面会跳转，对话框会打开和关闭，提交表单 使用浏览器自己的表单验证。

你不能，以及原因

• 看到指向页面的原型箭头：箭头只会绘制到目标组件，不会绘制到页面。有意为之
• 用链接分享原型：设计器生成的是文件（HTML、ZIP）和 PNG 截图，没有托管功能。有意为之

你可以

• 选择一个预设（淡入、淡出、从左、右、上或下滑入、弹跳、脉冲或抖动）或 自定义，并用 添加关键帧 编辑它的关键帧。
• 设置 时长（毫秒）、延迟（毫秒）、缓动曲线、重复次数（0 = 循环）、方向 和 结束后，并选择它何时 开始时机：页面加载时 或 出现在屏幕上时。
• 点按 播放 在画布上预览。它会导出为真正的 @keyframes 规则。

你不能，以及原因

• 给一个组件添加多个动画：最多只有一个。有意为之

你可以

• 点按某一项，即可撤销或重做到那一步。
• 最多可回退 200 步。

你不能，以及原因

• 用你的语言阅读历史记录条目：无论应用使用什么语言，它们都是用西班牙语写的，例如“Mover Botón 2”。有意为之

你可以

• 点按 保存版本 并为它命名。命名版本永远不会被清除。
• 恢复 某个版本：会先把当前状态保存为自动检查点，这样你还能回来。删除版本 会移除一个版本。
• 比较版本：选择两个版本，查看哪些组件被新增、删除、移动或样式发生变更，以及新增评论和已解决评论，并可用 并排预览 同时查看两者。
• 自动检查点（带 自动 徽章）会在设计打开期间每 10 分钟生成一次，在应用 AI 方案之前和恢复之前也会生成。系统保留最近的 10 个自动检查点。

你不能，以及原因

• 用你的语言阅读自动检查点的名称：它们是固定的西班牙语名称，例如“Automático”、“Antes de aplicar IA”和“Antes de restaurar”。有意为之

你可以

• 查看九类问题：超出调色板的颜色、超出刻度的间距、未关联文本样式的排版、对比度过低（低于 WCAG AA，4.5:1）、跳过的标题层级、缺少替代文本的图片、导出时不会链接的字体、超出画板的组件，以及在移动端溢出的文本。
• 点按某一行的 前往该组件；对于颜色和间距，还可点按 替换为 … 来修复。
• 导出前会运行同样的检查，并显示 存在未处理的提示，仍要导出吗？（见导出与分享）。

你不能，以及原因

• 用你的语言阅读问题消息：无论应用使用什么语言，它们都是用西班牙语写的。有意为之

你可以

• 打开所选组件的 代码 标签页，实时查看它将导出的 HTML 和 CSS。点按某个属性可复制那一行，或点按 复制全部。
• 在 工具 → 复制 下，用 复制 HTML 和 复制 CSS 复制整个设计，用 查看代码 打开 HTML / CSS 对话框。
• 在 查看代码 中编辑 HTML，可对你的一次预览或导出进行覆盖。

你不能，以及原因

• 保留手动编辑过的 HTML：它会在你下一次更改画布或主题时被清除，所以请把它当作一次性覆盖。有意为之

你可以

• 选择 自动备份（你上一次保存时保留的 .bak 副本），或 或者某个已保存的版本：任何版本或检查点，而不只是最新的一个。

你不能，以及原因

—

你可以

• 选择 375、768、1280 或 Full 宽度，并为 375 和 768 选择 竖屏 或 横屏。
• 点按 截图并分享，可把预览截取为 PNG（在 375 和 768 下带设备边框），并打开分享面板。

你不能，以及原因

• 在预览中浏览其他网站或打开本地文件：它不会跳转，file:// 和 content:// 都被阻止。Google Play
• 在预览中运行外部脚本、调用 fetch 或 WebSocket、使用 iframe 或提交表单。内联脚本、图片、视频和通过 https 加载的 Google Fonts 可以加载。Google Play

你可以

• 描述要改什么。生成器会收到设计组件的精简列表（id、类型、名称、位置、尺寸和父级），可以添加组件，也可以编辑现有组件：删除、重新设置样式、移动、调整大小或重命名。
• 在 Free 上使用它：该按钮本身没有套餐限制，但需要你自己的提供商密钥。

你不能，以及原因

—

你可以

• 打开 AI Office，并预先填好它的大厅：以设计名称作为简报，以设计的 HTML、CSS 和 JS 及主题变量作为上下文。

你不能，以及原因

• 在 Free 上使用它：AI Office 属于 Pro，所以你看到的是付费墙。Pro