stitch-design-bridge

Stitch 设计桥接

在 UI/UX 技能系统中，将此技能用作 Stitch 层。Stitch 是加速探索的工具，不是核心架构师、最终设计权威，也不是事实来源。

在系统中的角色

大型 UI 项目的默认流程：

task-plan-v2-orchestrator
-> ui-ux-llm-product-architect
-> seo-llm-site-architect when public discoverability matters
-> ui-ux-pro-max
-> stitch-design-bridge
-> senior-figma-orchestrator when Figma is involved
-> implementation specialist
-> validation
-> obsidian/wiki context capture for large projects

Stitch 位于 ui-ux-pro-max 之后，因为 Pro Max 应定义设计智能所需的输入：产品类型、风格候选方案、色彩/字体方向、UX 风险、无障碍优先事项和技术栈指导。然后，Stitch 在这些约束下探索视觉/屏幕变体。

运行模式

• brief：根据项目约束创建适用于 Stitch 的提示词。
• variant-plan：定义多个 Stitch 探索方向和成功标准。
• review-output：根据 UX、SEO/LLM、无障碍、品牌和实现约束评审 Stitch 输出。
• figma-handoff：为 senior-figma-orchestrator 准备 Stitch 输出。
• code-handoff：为本地实现准备 Stitch 输出。
• config-check：检查本地 Stitch API/MCP 是否就绪，不打印机密信息。
• council：当建议相互冲突时，运行或准备高级 UI/UX/SEO/LLM 委员会决策。

必需工作流

1. 在更广泛的系统中路由 Stitch 前，先阅读 references/orchestration-contract.md。
2. 生成提示词或评审输出时，阅读 references/prompt-quality-rubric.md。
3. 对 API、MCP、凭据或外部上传的决策，阅读 references/safety-and-api.md。
4. 确认可用输入：
   • 产品/UX 简介；
   • 涉及公开页面时的 SEO/LLM 约束；
   • ui-ux-pro-max 建议；
   • 品牌约束和禁止方向；
   • 目标输出：Stitch 提示词、变体、Figma 交接、代码交接或评审。
5. 如果使用外部 Stitch 服务，记录将发送哪些数据，并要求对私有项目数据进行明确授权。
6. 切勿在提示词、报告、wiki 页面或任务计划中包含 API 密钥、令牌、Cookie、私有 URL、私有截图或 .env 内容。
7. 将 Stitch 输出视为候选产物。在用于 Figma、代码或生产环境之前，必须先进行评审。

API 和 MCP 凭据

使用环境变量。不要在此技能中存储凭据。

预期变量：

STITCH_API_KEY

需要时运行配置检查器：

python3 $CODEX_SKILLS_DIR/stitch-design-bridge/scripts/check_stitch_config.py

检查器只报告是否存在、大致格式和脱敏后的元数据。不得打印完整密钥。

决策规则

Stitch 可以提出：

• 视觉方向；
• 布局变体；
• 组件排列方案；
• 屏幕级概念；
• 可用时的初步代码或画布构想。

Stitch 不得覆盖：

• 可见事实和业务约束；
• SEO/LLM 内容架构；
• 无障碍要求；
• 语义化 HTML 和确定性的操作标签；
• 安全/隐私边界；
• 未经评审的 Figma 设计系统令牌；
• 最终实现验证。

高级委员会触发条件

出现以下任一情况时，使用 council 模式：

• UX 希望简化内容，但 SEO/LLM 需要可见的语义内容。
• SEO/LLM 希望提高内容密度，但这会损害理解或转化。
• Stitch 输出在视觉上很出色，但在无障碍性、事实准确性或实现可行性方面较弱。
• Figma 设计系统约束与 Stitch 输出冲突。
• 一个大型项目要在同一工作流中更改公开页面、Figma、代码和 SEO/LLM 产物。

委员会角色：

• UI/UX lead：用户旅程、信息架构、层级、无障碍性、交互质量。
• SEO/LLM lead：可抓取性、结构化数据、元数据、llms.txt、可见的事实内容。
• Figma lead：设计系统适配、变量、组件、资源工作流。
• Implementation lead：框架可行性、响应式行为、验证证据。
• Planning lead：任务计划关卡、阻碍项、警报、证据、回滚。

决策顺序：

1. 安全、隐私、法律准确性和用户安全。
2. 无障碍性和主要任务完成情况。
3. 真实的可见内容和产品事实。
4. 语义化 HTML、可抓取性和便于大模型读取的结构。
5. 转化体验和用户理解。
6. 设计系统一致性和实现可维护性。
7. 视觉新颖性、趋势契合度和 Stitch 美学。

输出格式

简报模式

使用 assets/stitch-brief.template.md。

返回：

• Stitch 提示词；
• 使用的输入约束；
• 排除的私有数据；
• 要求提供的变体；
• 验收标准；
• 必须参与审核的负责人。

审核模式

返回：

• 已审核的输出；
• 对照提示词的通过/未通过结果；
• UX 发现；
• SEO/LLM 发现；
• 无障碍性发现；
• 设计系统/Figma 发现；
• 实现风险；
• 建议：接受、迭代、交由 Figma 处理、本地实现或拒绝。

交接模式

返回：

• 选定的 Stitch 变体；
• 选择理由；
• 下一步由哪位 Figma/代码负责人接手；
• 所需资源或截图；
• 必须保留的令牌/组件；
• 标记为完成前需要执行的检查。

验证

编辑此技能时，运行：

python3 $CODEX_SKILLS_DIR/.system/skill-creator/scripts/quick_validate.py $CODEX_SKILLS_DIR/stitch-design-bridge
python3 $CODEX_SKILLS_DIR/senior-skill-architect/scripts/lint_production_skill.py $CODEX_SKILLS_DIR/stitch-design-bridge
python3 $CODEX_SKILLS_DIR/stitch-design-bridge/scripts/check_stitch_config.py
python3 -m json.tool $CODEX_SKILLS_DIR/stitch-design-bridge/evals/evals.json >/dev/null