mcpField
P
pencil-design-bridge

pencil-design-bridge

github.com/sergekostenchuk设计与 UI3250 次安装18 周前更新
代码仓库

关于 pencil-design-bridge

Pencil Design Bridge 是 UI/UX Agent Skill System 中连接设计简报与 Pencil 工作区的技能，面向设计与产品交接。它可整理画布指引、评审设计输出并准备 Figma 或代码交接；.pen 文件须通过 Pencil MCP/工具访问。

主要功能

  1. 01将已批准方向整理为设计简报
  2. 02准备 Pencil 画布交接指引
  3. 03按体验与实现约束评审输出
  4. 04准备 Figma 或代码交接
  5. 05检查当前运行环境的 Pencil 工具

适用场景

  1. 01把已批准的设计方向转为 Pencil 简报
  2. 02为 Pencil MCP 或 Agent 准备画布指引
  3. 03检查设计稿的无障碍与实现约束
  4. 04将 Pencil 结果交给 Figma 或代码实现

MCP 相关

通过 Pencil MCP/工具访问 .pen 文档，并可为 Pencil MCP 或支持 Pencil 的 Agent 准备操作指引。配置检查模式用于确认当前运行环境是否有 Pencil 工具。

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/sergekostenchuk/ui-ux-agent-skill-system --skill pencil-design-bridge

安装后在 Claude Code 中输入/pencil-design-bridge确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

agents/
openai.yaml
assets/
pencil-handoff.template.md
evals/
evals.json
references/
pencil-bridge-contract.md

详细介绍

Pencil Design Bridge

此技能是 UI/UX Agent Skill System 中的 Pencil 层。Pencil 是设计工具桥接层和可编辑的设计工作区，而非中央架构师，也不是纯文件解析器。

运行模式

  • brief：将已批准的方向简报转化为适用于 Pencil 的设计简报。
  • canvas-handoff：为 Pencil MCP/工具或支持 Pencil 的 Agent 准备说明。
  • review-output：根据 UX、SEO/LLM、无障碍、品牌和实现限制审查 Pencil 输出。
  • figma-code-handoff：为 Figma 或代码实现准备 Pencil 结果。
  • config-check：检查当前运行环境中是否有可用的 Pencil 工具，而不直接读取 .pen 文件。

必需工作流

  1. 阅读 references/pencil-bridge-contract.md。
  2. 确认源简报已由 senior-ui-ux-orchestrator 批准，或来自用户的明确决定。
  3. 确认输入包括：
    • 产品/UX 旅程；
    • 面向公开页面的 SEO/LLM 限制；
    • ui-ux-pro-max 设计智能；
    • 可选的 Stitch 输出或 Figma 限制；
    • 必需素材和禁止的声明。
  4. 使用 assets/pencil-handoff.template.md 制作交接包。
  5. 只能通过 Pencil MCP/工具访问 .pen 文档。不得使用 shell 读取、grep、cat 或临时 JSON 解析来处理 .pen 文件。
  6. 将 Pencil 输出视为候选设计产物。在用于 Figma、代码或生产环境之前，仍需经过审查。

安全规则

  • 不要在 Pencil 交接材料中存储 API 密钥、令牌、Cookie、私有 URL、私有截图或 .env 值。
  • 只有在调用了可用的 Pencil 工具，且存在产物路径或工具响应时，才能声称 Pencil 工具已运行。
  • 如果无法使用 Pencil 工具，则生成手动交接材料，并将执行状态标记为 Skipped 或 Planned。
  • 如果 Pencil 输出与无障碍、可见事实、SEO/LLM 结构或实现可行性冲突，则提交给 council 处理。

交接格式

Mode:
Approved direction:
Pencil tool availability:
Input artifacts:
Data excluded:
Prompt or canvas instructions:
Design-system constraints:
Review criteria:
Next owner:
Checks:

验证

编辑此技能时，运行：

python3 $CODEX_HOME/skills/.system/skill-creator/scripts/quick_validate.py $CODEX_HOME/skills/pencil-design-bridge
python3 $CODEX_HOME/skills/senior-skill-architect/scripts/lint_production_skill.py $CODEX_HOME/skills/pencil-design-bridge
python3 -m json.tool $CODEX_HOME/skills/pencil-design-bridge/evals/evals.json >/dev/null

评论

支持 Markdown