运行 · 预览 · 设计
这是把做好的程序**跑起来（运行）、看看内部（调试）、看网页画面（网页预览）、检查设计（设计工作台）**的功能。修改 → 运行 → 确认，在 Blyck 里就能完成。
| 功能 | 免费 / Pro |
|---|---|
| ▶ 运行、输出窗口、错误位置标记 | 免费 |
查看调试窗口（Ctrl+Shift+D） | 免费 |
| 网页预览、书签 | 免费 |
| 把截图·录制发送到 AI 聊天 | Pro |
| AI 运行·观察（Run & Observe）、AI 调试工具·自动调查、AI 操作预览、视觉回归、设计工作台 | Pro |
运行代码（▶ 运行）
Section titled “运行代码（▶ 运行）”
- ▶ 运行 — 一键运行本地保存的文件（运行中显示 ■ 停止） · 旁边的 ▾ 还可以选“调试”(F5)（Python · JavaScript）
- 状态文字 — 结束后显示“退出码 0” · [■ 停止] [清除] [✕]
- 输出窗口 — 顶部是 $ 命令（琥珀色），然后是程序输出，最后是 [退出码 0]（绿色）
在编辑器里一个按钮运行当前文件（或它所在的项目），在编辑器下方的输出窗口里实时查看结果。
- 先保存文件（
Ctrl+S）。▶ 运行执行的是保存在磁盘上的内容。 - 点编辑器标题行上的 [▶ 运行](
Ctrl+F5)。输出窗口会打开。 - 运行期间按钮会变成红色的 [■ 停止]。
- 结束后显示 退出码 {n}，找到错误时还会显示 {n} 个问题。
▶ 运行只在保存在本地的文件上显示（远程文件、未命名文件没有）。
用什么命令运行
Section titled “用什么命令运行”Blyck 会查看文件和项目，自动决定命令。
| 对象 | 运行命令 |
|---|---|
.py · .rb · .php · .lua · .sh 文件 | 直接运行该文件（python 文件 等）—— 优先于项目 |
go.mod | go run . |
Cargo.toml | cargo run |
*.sln · *.csproj | dotnet run |
pubspec.yaml | flutter run |
pom.xml / build.gradle | mvn exec:java / gradle run |
package.json | npm start |
没有标志文件的 .js / .go | node 文件 / go run 文件 |
输出窗口与错误位置
Section titled “输出窗口与错误位置”- 最上方是
$ 命令，然后是普通输出、错误输出（红色），最后是退出码。最多保留最近 5,000 行。 - [清除] 清空输出，[✕] 隐藏窗口（程序不会停止）。
- 能识别输出中的错误格式（Python、Go、Rust、gcc/clang、C#、TypeScript 等），在已打开的文件上加红色（错误）、黄色（警告）下划线。点错误行会跳到那个文件的那一行。
调试运行 — 在红点处暂停并查看值
Section titled “调试运行 — 在红点处暂停并查看值”让本机保存的 Python · JavaScript 文件停在想要的行，查看当时的变量值，一行一行往下走。不用加 print。
- 点击要暂停的行的行号左侧，或按
F9— 出现 红点（断点）。 - 标题行 ▶ 运行 ▾ → 调试（或
F5）。Python 第一次会下载调试器（debugpy，约 33MB）。JavaScript 用 Node.js 自带的调试器。 - 暂停后该行变黄，行末淡淡显示当前值，下方打开 变量 · 调用栈 面板。鼠标悬停在变量上可以看到值。
- 继续(
F5) · 下一行(F10) · 进入函数(F11) · 跳出函数(Shift+F11) · 停止调试(Shift+F5)。
- 在暂停处点 问 AI，会一并发送暂停的行 · 错误 · 当前值 · 调用栈 · 输出 (Pro)。
- AI 聊天直接调试 (Pro):说“帮我找原因”，AI 会设置红点、调试运行并读取值(
dbg_breakpoint·dbg_start·dbg_step·dbg_inspect)。你的编辑器画面会跟着一起动，状态栏显示 AI 聊天正在调试。在 ⚡ 运行 · 🚀 自动模式下可用。 - 远程（SFTP）文件和其他语言暂不支持。
由 AI 运行并修复 — Run & Observe（Pro）
Section titled “由 AI 运行并修复 — Run & Observe（Pro）”在 AI 聊天里说“跑一下测试，失败了就修”，AI 会反复直接运行 → 查看输出·错误 → 修改代码 → 再运行。不需要复制粘贴输出。
- 把 AI 聊天模式设为 ⚡ 执行 或 🚀 自动（💬 对话·📋 计划 模式下不能运行）。
- 像“跑 pytest 把失败的修好”这样提出请求。
- 移动或覆盖文件的命令会弹出审批卡片。非常危险的命令即使在 🚀 自动模式下也会询问。
- 默认等待时间是 30 秒。像服务器这样一直运行的程序，会返回到那时为止的输出。
- 如果 AI 聊天的项目文件夹是远程（SSH），就在服务器上运行。
调试窗口与 AI Debug Bridge
Section titled “调试窗口与 AI Debug Bridge”
- 筛选 — label · loc 输入框，选择 level · source / 🔕 AI 自动调查 · ⏸ 暂停 · 🗑 清除 · ✕ 关闭
- 一行记录 — [阶段] 名称 值 · 来源(terminal / preview)
这是让 AI 直接读取程序运行中内部的值（变量值等）的机制。在代码里放一行 @BLYCK@ … 格式的记录，当这一行打印到 Blyck 终端或网页预览时，Blyck 会把它收集起来，AI 读取后查找原因。通常由 AI 自己加上，用完再自己删掉。
- 用
Ctrl+Shift+D打开实时查看收集记录的 🐞 Debug Bridge 窗口（免费）。可以按名称·位置·级别筛选。 - 打开 🔔 AI 自动调查（Pro，默认关闭）后，一旦出现
error·assert记录，AI 会自动开始调查。因为要用 AI，会产生费用。 - ▶ 运行输出窗口或 Blyck 之外打印的记录不会收集。
详细用法见 AI 调试桥。
网页预览（Live Preview）
Section titled “网页预览（Live Preview）”
- 编辑器 — 生成页面的代码(app.py)
- 网页预览栏 — ← → ↻ ☆ · 地址栏 · − 100% + · 📷 捕获 · 录制
- 在 Blyck 内置小浏览器中显示的开发中页面
一个在 Blyck 窗格里显示你正在做的网站的小浏览器。你可以直接点点看，AI 也能看画面、做操作。预览本身是免费的。
- 先启动开发服务器（例如在终端里运行
npm run dev）。 - 按
Ctrl+Alt+B（或新建标签页菜单 → 网页预览 图标格）。 - 输入地址（默认
http://localhost:3000），点 [打开]。
- 不写
http://会自动补上。电脑上的 HTML 文件用file:///C:/…/index.html这样的地址打开。
| 按钮 | 作用 |
|---|---|
| ← / → / ↻ | 后退 / 前进 / 刷新 |
| ☆ | 书签（从浏览器导入） |
| 地址栏 | 输入地址后按 Enter |
| − / 100% / + | 缩小 / 缩放比例（点击恢复 100%）/ 放大。25%~500% |
| 📷 捕获 | 截取画面、打开截图编辑器后附加到 AI 聊天 |
| 红点 录制 | 每 0.5 秒截一张（最多 60 张，约 30 秒）→ 选出要发送的画面附加到 AI 聊天 |
- 把截图·录制发给 AI 需要 Pro。发送前请先打开 AI 聊天窗格（没有的话画好的图会丢失）。
- ☆ 书签：第一次点时会显示 [从 {浏览器} 导入] 按钮。导入 Chrome·Edge·Brave·Vivaldi（Mac 还有 Safari）默认配置文件里的书签。Firefox 不支持。
- Google、GitHub 这类新窗口登录会以真正的窗口打开，可以正常登录。
- 控制台记录和网络记录各收集最近 200 条（供 AI 读取）。
- 重新打开应用时只恢复地址。
AI 查看并操作预览（Pro）
Section titled “AI 查看并操作预览（Pro）”AI 聊天可以直接查看网页预览、点击、输入、读取控制台错误并修复。
在登录表单里填入测试账号并提交。如果有控制台错误，找出原因并修好。AI 按照 输入 → 等待 → 截图 → 读控制台 的顺序进行。
| 能做的事 | 审批 |
|---|---|
| 截图、读取控制台·网络记录、跳转地址、等待 | 不需要 |
| 点击元素、输入文字、在页面里执行 JS | ⚡ 执行模式下需要 |
- 点击、输入、执行 JS 在 💬 对话·📋 计划 模式下被禁止。
- AI 要截图，预览窗格必须显示在画面上。
视觉回归 — 比较修改前后的画面（Pro）
Section titled “视觉回归 — 比较修改前后的画面（Pro）”把修改代码之前的画面存为基准，再和修改之后的画面比较，找出“画面有没有被意外弄坏”。在网页预览、桌面镜像、设计工作台中都可以用。
这个功能用说的让 AI 去做。 没有需要你点的按钮。
- 提出请求，例如“以现在的画面为基准，改完按钮颜色后比较一下”。
- AI 保存基准画面、修改代码，然后进行比较。
| 判定 | 含义 |
|---|---|
| 通过 | 变化不超过 2% |
| 需要确认 | 超过 2% |
| 回归 | 画面尺寸本身变了（疑似布局坏掉） |
比较图左边是 BEFORE，右边是 AFTER，变化的地方用红框标出。基准画面只存在内存里，关闭窗格或重启应用就会消失。
设计工作台（Pro）
Section titled “设计工作台（Pro）”把 AI 做的设计部件（颜色·间距这类令牌、按钮这类组件、画面、画面流程）汇集成卡片列表，按网页·平板·手机尺寸预览、检查的窗格（名称标签 设计，🎨）。
- 在项目文件夹的
design-system文件夹里放设计清单文件_ds_manifest.json。通常由 AI（Claude·Codex）帮你做好。 - 在 AI 聊天（⚡ 执行 或 🚀 自动 模式）里说“打开设计面板”。不能从新建标签页菜单或快捷键打开。
- 点卡片放大查看（网页的话分为移动端·平板·桌面三栏）。用 ← 列表 返回。
| 按钮 | 作用 |
|---|---|
| [导出 tokens ↓] | 把设计令牌导出为 Flutter（app_tokens.dart）·CSS（tokens.css）文件 |
| [Golden 测试框架 ↓] | 生成 iOS·Android 画面比较测试文件（.dart） |
| 平台 选择 | 全部 / web / desktop / iOS / Android |
- 设计窗格打开时，AI 会同时收到“请复用清单里的令牌·组件”的提示。
- 视觉比较发现问题时，回答下方会出现 [重新生成设计] / [忽略] 按钮。
- 不读取远程（SFTP）项目文件夹里的
design-system。
Q. 看不到 ▶ 运行按钮。 是远程文件，或者是从没保存过的未命名文件。只在保存到本地的文件上显示。
Q. 出现“未找到运行命令”。 是不支持的类型，或是 CMake·Make 项目。请在终端里直接运行。
Q. 修改的内容没有反映到运行结果上。
没有保存。按 Ctrl+S 后再运行。
Q. 网页预览一片空白，或出现“页面加载失败”。 确认开发服务器已启动、地址·端口正确，然后点 ↻。如果是远程项目，服务器在远程运行，请用服务器的地址打开。
Q. AI 截不了图。 预览窗格被挡住了。把那个标签页切到前面，让它显示出来。
Q. 调试窗口里什么都没有。 你是在 ▶ 运行输出窗口或 Blyck 之外运行的。请在 Blyck 终端或网页预览里运行。
Q. 视觉比较提示“没有基线”。 因为重启应用或关闭窗格，基准已经消失。让 AI 先重新建立基准。
Q. 设计面板打不开。 当前是 💬 对话·📋 计划 模式。换成 ⚡ 执行模式后再请求一次。
Q.（Mac）书签里没有 Safari。 在 系统设置 → 隐私与安全性 → 完全磁盘访问权限 里允许 Blyck。