前端开发工具【免费下载链接】dillingerThe last Markdown editor, ever.项目地址https://gitcode.com/gh_mirrors/di/dillinger点击查看免费下载本文围绕 Antigravity Kit本仓库.agent/目录内置的 AI Agent 能力工具包中的/preview斜杠命令工作流系统讲解如何对本地预览服务器执行启动、停止、重启、状态查看与健康检查。读者读完可以掌握该工作流的全部子命令、典型交互输出与底层auto_preview.py脚本的调用方式并能在以 Next.js 为核心的仓库如本 Dillinger 仓库中把预览服务器管理从手动命令行操作升级为一句斜杠命令即可完成的自动化流程。一、/preview在 Antigravity Kit 中的定位Antigravity Kit 是.agent/目录下的一套模块化 AI 能力扩展系统包含 16 个专家 Agent、40 个领域 Skill 模块以及 11 个以斜杠命令Slash Command形式提供的工作流。/preview正是这 11 个工作流之一负责预览服务器的启动、停止与状态检查是本地开发循环中改代码 → 看效果这一环节的自动化入口。从 .agent/ARCHITECTURE.md 的工作流清单可以看到它的职责定位命令描述/brainstormSocratic 式需求挖掘/create创建新应用/功能/debug调试问题/deploy部署应用含preview子命令/enhance改进现有代码/orchestrate多 Agent 协作编排/plan任务拆解/preview预览变更结果/status查看项目与 Agent 状态/test运行/生成测试/ui-ux-pro-max按 50 种风格做 UI 设计其中/preview与/status、/create、/deploy之间存在天然的协作关系创建完应用后需要起服务看效果/create流程末尾会调用预览脚本查看整体状态时需要探测预览服务器是否存活/status的状态面板包含Preview Status区块。/preview工作流的完整定义位于 .agent/workflows/preview.md。二、命令速查五个子命令/preview工作流的核心是无参查看、带参管理的扁平命令设计/preview - 显示当前状态 /preview start - 启动服务器 /preview stop - 停止服务器 /preview restart - 重启服务器 /preview check - 健康检查直接输入/preview不带参数时等价于一次状态查询返回服务器 URL、项目路径、项目类型与健康状态start负责拉起本地开发服务器并在端口被占用时进入交互式协商流程restart是stopstart的组合语义适合配置或依赖变更后快速重建运行环境check执行健康检查通常通过 HTTP 探测确认服务真正可访问而不只是进程存在。三、实战一启动预览服务器工作流文档中给出的标准启动交互如下/preview start Response: Starting preview... Port: 3000 Type: Next.js ✅ Preview ready! URL: http://localhost:3000几点值得注意的细节端口 3000 是默认约定。对 Next.js 项目而言next dev的默认监听端口就是 3000/preview直接继承了这一惯例省去手动记忆项目类型自动探测。响应中的Type: Next.js由脚本根据项目特征推断存在next.config.*、package.json中声明next依赖等因此同一套命令可以适配 Next.js、Express、纯静态站等多种项目形态启动成功后直接给出 URL。Agent 拿到 URL 后即可向用户呈现访问入口这也是 .agent/workflows/create.md 第 4 步Preview 完成后展示 URL 给用户的落地方式。在 Dillinger 仓库中的等价手动操作如果不在 Agent 工作流环境中Dillinger 仓库本身也提供了与/preview start完全对应的 npm 脚本见 package.jsonnpm run dev # 启动开发服务器默认监听 http://localhost:3000其中next dev默认端口即为 3000与/preview的默认行为一致。仓库根目录的 CLAUDE.md 快速参考区也记录了同样约定npm run dev # Start dev server (http://localhost:3000)。四、实战二状态查看与健康检查不带参数的/preview直接返回当前预览状态文档中的标准输出为/preview Response: Preview Status URL: http://localhost:3000 Project: C:/projects/my-app ️ Type: nextjs Health: OK该输出包含四个关键字段字段含义判断依据URL服务访问地址由启动时分配的端口决定Project当前项目绝对路径记录启动时传入的[path]参数Type检测到的项目类型nextjs等来自框架探测Health服务健康状态OK表示 HTTP 探测通过/preview check与状态查看的区别在于状态查看侧重读取已记录的运行信息而健康检查会主动发起请求探测能发现进程在但端口不可达这类假活场景。与/status工作流的联动/status工作流.agent/workflows/status.md的状态面板同样包含Preview Status区块展示服务器是否运行、URL 与健康检查结果其底层同样依赖预览脚本文档Technical一节明确列出session_manager.py status与auto_preview.py status两个调用。也就是说/preview与/status共享同一套状态采集脚本保证了两个命令看到的数据一致。在 Dillinger 仓库中的健康检查验证方式Dillinger 仓库的端到端测试恰好提供了预览可用性的自动化验证样例。tests/e2e/smoke.spec.ts 中通过page.goto(/)后断言#preview预览面板可见即验证了页面核心区域Markdown 预览能正常渲染await expect(page.locator(#preview)).toBeVisible();而 playwright.config.ts 则配置了独立于默认 3000 端口的预览端口 3005并允许复用已运行的服务器reuseExistingServer: !process.env.CI——这正是健康检查 → 复用已有服务 → 跳过重复启动思路的仓库内实现与/preview check的探测语义一脉相承webServer: { command: npx next dev -H 127.0.0.1 -p ${port}, // port 3005 url: baseURL, // http://127.0.0.1:3005 reuseExistingServer: !process.env.CI, timeout: 180_000, }五、实战三端口冲突的交互式处理本地开发最常见的故障就是端口被占用。/preview start在检测到冲突时会进入交互式协商而不是直接失败/preview start Response: ⚠️ Port 3000 is in use. Options: 1. Start on port 3001 2. Close app on 3000 3. Specify different port Which one? (default: 1)三个选项对应三种典型处置策略顺延端口默认在冲突端口基础上 1 重新启动3000 → 3001无侵入、零副作用是日常开发中最安全的默认项关闭占用进程主动终止占用 3000 端口的旧进程后重启适合确认旧服务已无用的场景如残留的僵尸开发服务器手动指定端口由用户显式给出新端口适合端口有约束的调试场景例如与后端代理、OAuth 回调白名单对齐。这个先探测、再协商、后行动的流程设计避免了启动命令盲目失败或误杀其他应用值得在自定义开发工具链中复用。六、技术实现底层的auto_preview.py脚本/preview工作流本身是薄薄的指挥层真正的执行逻辑由独立脚本承担。文档Technical一节给出了完整调用方式python ~/.claude/scripts/auto_preview.py start [path] [port] python ~/.claude/scripts/auto_preview.py stop python ~/.claude/scripts/auto_preview.py status要点说明脚本位置在用户主目录~/.claude/scripts/位于仓库之外、属于 Claude 本地的通用工具脚本因此可以被任意项目的工作流复用不随仓库分发参数设计start接受可选的[path]项目路径与[port]端口号两个位置参数不传时默认使用当前工作目录与 3000 端口这与文档示例中Project: C:/projects/my-app、Port: 3000的输出吻合子命令与工作流一一对应start/stop/status三个脚本子命令支撑起/preview的 start / stop / 状态查看restart与check则由工作流层组合或调用脚本能力派生如先stop再start、对status结果发起 HTTP 探测跨平台示例输出中出现C:/projects/my-app这类 Windows 路径说明脚本需同时兼容 Windows 与 Unix 系路径与进程管理方式。从 .agent/workflows/status.md 还可以看到脚本的另一种消费方式/status直接执行auto_preview.py status来填充其Preview区块证明该脚本是被多个工作流共享的预览服务状态源。七、/preview与完整开发闭环的衔接在 Antigravity Kit 的典型工作流中/preview处于开发产出 → 可视化验证的咽喉位置/create 构建应用 └─ 步骤 4: 用 auto_preview.py 启动预览并展示 URL 见 .agent/workflows/create.md /status 查看状态板 └─ 预览区块: 调用 auto_preview.py status 见 .agent/workflows/status.md /preview 手动管理 └─ start / stop / restart / check 本文主题 /deploy preview 发布预览环境 见 .agent/workflows/deploy.md以本仓库DillingerNext.js 14 构建的 Markdown 编辑器为例一个完整的闭环可以是npm run dev或/preview start在 3000 端口拉起开发服务器若 3000 被占接受默认选项顺延到 3001或在 playwright.config.ts 约定的 3005 测试端口上验证/preview查看状态确认Health: OK修改代码后/preview restart快速重建借助 tests/e2e/smoke.spec.ts 这类断言#preview面板的端到端测试确认功能未回归开发结束/preview stop释放端口。八、小结与最佳实践/preview工作流的设计可以提炼为四条可复用的经验薄命令层 厚脚本层斜杠命令只负责参数解析与交互呈现具体逻辑收敛在auto_preview.py便于跨工作流复用与独立测试默认值优先start不传参数时使用当前目录 3000 端口降低心智负担冲突不硬来端口冲突时提供顺延 / 关闭 / 指定三选一把选择权交还用户而非粗暴报错状态可观测URL、项目、类型、健康四个字段一次输出且与/status共享同一状态源保证多个入口看到的数据一致。在 Dillinger 仓库中这套机制的对应物就是 package.json 的dev脚本、playwright.config.ts 的webServer健康探测URL reuseExistingServer以及 tests/e2e/smoke.spec.ts 对#preview面板的端到端断言。理解了/preview工作流的命令语义与脚本分层你既可以在 Agent 环境中一键管理预览服务也可以回到纯命令行环境用等价的 npm 脚本与健康探测完成同样的工作。赞分享前端开发工具【免费下载链接】dillingerThe last Markdown editor, ever.项目地址https://gitcode.com/gh_mirrors/di/dillinger点击查看免费下载相关推荐AG Kit /preview 工作流实战基于 auto_preview.py 的本地预览服务器生命周期管理AG Kit /preview 工作流实战基于 auto_preview.py 的本地预览服务器生命周期管理 /preview 是 AG KitAntigr人工智能AI 技能agent-orchestrator 的 ao preview 命令工作区文件浏览器预览与托管开发服务器实战指南agent orchestrator 的 ao preview 命令工作区文件浏览器预览与托管开发服务器实战指南 ao preview 是 AOAgentPostHog Endpoint 版本管理实战指南预览、回滚与按版本停用的完整工作流PostHog Endpoint 版本管理实战指南预览、回滚与按版本停用的完整工作流 本指南基于 PostHog 仓库 products/endpoints/数据分析后端前端数据可视化大数据上一篇IntelliJ IDEA CodeMaker插件如何通过自定义模板实现高效Java/Scala代码生成下一篇NoFences完整指南免费开源工具彻底解决Windows桌面杂乱问题创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
