# Pencil Design Bridge

> Bridge approved UI/UX direction briefs into Pencil design workflows without treating `.pen` files as plain text. Use when a project needs Pencil MCP/tool handoff, editable design exploration, design-system-aware canvas work, or review of Pencil outputs after senior-ui-ux-orchestrator, ui-ux-pro-max, Stitch, or Figma constraints are known.

- **Type:** Skill
- **Install:** `agentstack add skill-sergekostenchuk-ui-ux-agent-skill-system-pencil-design-bridge`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [sergekostenchuk](https://agentstack.voostack.com/s/sergekostenchuk)
- **Installs:** 0
- **Category:** [Content & Media](https://agentstack.voostack.com/c/content-and-media)
- **Latest version:** 0.1.0
- **License:** Apache-2.0
- **Upstream author:** [sergekostenchuk](https://github.com/sergekostenchuk)
- **Source:** https://github.com/sergekostenchuk/ui-ux-agent-skill-system/tree/main/core/skills/pencil-design-bridge

## Install

```sh
agentstack add skill-sergekostenchuk-ui-ux-agent-skill-system-pencil-design-bridge
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# 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](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](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

```text
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:

```bash
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
```

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [sergekostenchuk](https://github.com/sergekostenchuk)
- **Source:** [sergekostenchuk/ui-ux-agent-skill-system](https://github.com/sergekostenchuk/ui-ux-agent-skill-system)
- **License:** Apache-2.0

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** yes
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-sergekostenchuk-ui-ux-agent-skill-system-pencil-design-bridge
- Seller: https://agentstack.voostack.com/s/sergekostenchuk
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.