mcpField
P
pencil-design-bridge

pencil-design-bridge

github.com/sergekostenchukDesign & UI3250 installsUpdated 18w ago
Repository

About pencil-design-bridge

Pencil Design Bridge connects approved briefs with the Pencil workspace for design and product handoffs. It prepares canvas instructions, reviews design output, and packages Figma or code handoffs; .pen files must be accessed through Pencil MCP/tools.

Key features

  1. 01Turn approved direction into design briefs
  2. 02Prepare Pencil canvas handoff instructions
  3. 03Review output against UX and implementation constraints
  4. 04Prepare Figma or code handoffs
  5. 05Check Pencil tool availability

Use cases

  1. 01Convert an approved direction into a Pencil brief
  2. 02Prepare canvas instructions for Pencil MCP or an agent
  3. 03Check designs for accessibility and implementation constraints
  4. 04Hand Pencil results off to Figma or code

MCP support

It accesses .pen documents through Pencil MCP/tools and can prepare instructions for Pencil MCP or a Pencil-capable agent. Its configuration-check mode checks whether Pencil tools are available in the current runtime.

Install

Copy the command and run it in a terminal.

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

After installing, type/pencil-design-bridgein Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

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

Details

From the project README

Pencil Design Bridge

This skill is the Pencil layer in the UI/UX Agent Skill System. Pencil is a design-tool bridge and editable design workspace, not the central architect and not a plain-file parser.

Operating Modes

  • brief: turn an approved direction brief into a Pencil-ready design brief.
  • canvas-handoff: prepare instructions for Pencil MCP/tools or a Pencil-capable agent.
  • review-output: review Pencil output against UX, SEO/LLM, accessibility, brand, and implementation constraints.
  • figma-code-handoff: prepare Pencil results for Figma or code implementation.
  • config-check: check whether Pencil tools are available in the current runtime without reading .pen files directly.

Required Workflow

  1. Read references/pencil-bridge-contract.md.
  2. Confirm the source brief was approved by senior-ui-ux-orchestrator or came from an explicit user decision.
  3. Confirm inputs:
    • product/UX journey;
    • SEO/LLM constraints for public pages;
    • ui-ux-pro-max design intelligence;
    • optional Stitch output or Figma constraints;
    • required assets and forbidden claims.
  4. Use assets/pencil-handoff.template.md for handoff packets.
  5. Access .pen documents only through Pencil MCP/tools. Do not use shell reads, grep, cat, or ad hoc JSON parsing on .pen files.
  6. Treat Pencil output as a candidate design artifact. It still needs review before Figma, code, or production use.

Safety Rules

  • Do not store API keys, tokens, cookies, private URLs, private screenshots, or .env values in Pencil handoffs.
  • Do not claim a Pencil tool ran unless a callable Pencil tool was used and an artifact path or tool response exists.
  • If Pencil tooling is unavailable, produce a manual handoff and mark execution as Skipped or Planned.
  • If Pencil output conflicts with accessibility, visible facts, SEO/LLM structure, or implementation feasibility, route to council.

Handoff Shape

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

Validation

When editing this skill, run:

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

Comments

Markdown supported