I built a CLI wrapper for the Pencil design MCP because the raw JSON output was making my AI agents useless

Been using Pencil (a design tool with MCP support) to let Claude do UI work for my side project. The MCP itself works, but asking an agent to reason about raw JSON scene graphs is a mess — it hallucinates node IDs, uses hardcoded hex colors instead of design tokens, and the output is completely unreadable for review.

So I built a small CLI wrapper: pencil-cli

The two things that actually made a difference:

1. pencil get outputs pseudo-JSX instead of JSON

It walks the node tree and automatically deduplicates repeated subtrees into named components. Makes it obvious at a glance what's shared vs unique, and agents can reason about structure way more reliably.

UsageRow = (
  <Frame gap={4} layout="vertical" width="fill_container">
    <UsageLabel id="PY42K" />
    <ProgressBar id="NIvlq" />
  </Frame>
)

<Frame id="eNsZZ" fill="--muted" cornerRadius={10} ...>
  <PlanTitle id="MtHmF" />
  <UsageRow id="qj29g" />
</Frame>

2. Design tokens as a readable table

pencil vars renders the token table instead of a blob of nested JSON. Agents check this first before designing anything, so they use --primary instead of #FF8400.

TOKEN              TYPE    LIGHT    DARK
───────────────────────────────────────
--background       color   #FFFFFF  #09090B
--card             color   #FFFFFF  #18181B
--primary          color   #18181B  #E4E4E7
--muted            color   #F4F4F5  #27272A

Also hid the $--var sigil that Pencil uses internally — agents write --primary, the CLI injects $ before hitting the MCP server. Small thing but it caused corrupted files twice before I fixed it at the abstraction layer.

Not a massive project, maybe 500 lines total. But it's made a real difference in how reliably Claude can actually do design work without me babysitting every call.

Repo: https://github.com/ethan-huo/pencil-cli

Happy to answer questions if anyone else is trying to use design tools with MCP agents.