用途：该流程用于在现有前端仓库中协调 Stitch 与 pen.dev 等设计工具，完成基于源码的设计系统提取、UI 探索、视觉细化与实现，最终在既有前端源码中落地。仓库契约本身拥有视觉系统、实现栈与验收标准的决定权。
主要能力与前提：先解析 checkout/ref，阅读 AGENTS.md 与仓库设计说明，检查现有组件、token 来源、生成资产与视觉测试。提取精确源码数值与语义角色（含主题变体与来源 SHA）。生成的 DESIGN.md 或 .pen 库属于派生产物，不能替代 token 权威来源；共享基础与产品布局需分开，避免仓库间反向依赖。
使用方式：需逐一检查各 harness 的工具目录与认证。Stitch 为远程服务；pen.dev 桌面 MCP 要求同主机 app/socket，云端无 app 时用受支持的 headless CLI。Stitch 侧从单一用户级规范安装加载相关 Google Labs 技能（如 extract-design-md、design-md、enhance-prompt、manage-design-system、generate-design、extract-static-html、upload-to-stitch、code-to-design）。pen.dev 桌面 MCP 先加载 read_skill 并核对 get_app_state 与目标文档；headless 用 ~/.local/bin/ui-design pen interactive --out <explicit-artifact-path>。先在隔离 .pen 文件操作，保存并查看导出截图，并发 harness 用独立输出路径。
适用场景：既有前端仓库中的小范围已批准界面或组件打磨，再与源码 token、批准设计与现有实现比对，在既有组件/控制器中实现，保留服务端表单、可访问性、安全、焦点、触控与生命周期归属。用所属构建工具重新生成 bundle，不要以 vendor 导出覆盖生产文件，并运行仓库适用的设计、行为与像素检查。
限制：工具安装不授权生产 UI 变更、新美学、凭据迁移或付费生成。凭据仅存于继承的安全变量或私有用户凭据库，绝不可从 MCP 配置提取、打印、放入提示、在命令行传递或提交。账户权限不授权上传私有源码/数据。不得虚构远程 pen.dev MCP 端点，也不得把已配置服务器报告为可用。部分上游上传示例以参数传 API key，应改用带内存认证的 MCP/SDK 上传。框架特定示例输出不授权栈迁移；同一厂商技能不得同时以插件和散装技能安装。完成时报告来源/ref、产物路径、各 harness 实际发现/工具调用证据、认证缺口与桌面/云端限制，并区分静态配置、MCP 传输、成功工具调用与视觉验收。