DEDUPED Hot AI repos. Real use cases. What people build. Get the Monday 5

How to create and edit designs from Claude Code through OpenPencil's MCP server with Openpencil

Install the MCP server into your coding agent so it can read, create and modify .op design files.

Short answer: Install OpenPencil, then use the one-click MCP install for Claude Code, Codex, OpenCode, Kiro or Copilot CLIs; then install the op CLI with brew install zseven-w/openpencil/op; ask the agent to create an .op file for a page or modify an existing one. All steps.

  • Content
  • Intermediate
  • 30 minutes
  • From the README
  • Claude Code
  • Codex

Who it is forA developer who lives in the terminal and wants the agent to update designs next to the code.

The problemDesigns live in a separate tool the coding agent cannot see or change.

The outcomeAn agent that reads and edits .op files, applies style guides and keeps design and code in one repo.

What you need first

  • macOS, Windows or Linux (desktop) or the web app
  • An AI model provider key, or Claude Code, Codex or OpenCode via MCP
  • Homebrew, Scoop or a GitHub Release download

Steps

  1. Install OpenPencil, then use the one-click MCP install for Claude Code, Codex, OpenCode, Kiro or Copilot CLIs
  2. Install the op CLI with brew install zseven-w/openpencil/op
  3. Ask the agent to create an .op file for a page or modify an existing one
  4. Commit the .op JSON to Git and review the diff like code
  5. Export to your framework when the design is approved

Prompt for your agent

Using the ZSeven-W/openpencil MCP server, create a <page> design as an .op file in this repo, apply our style guide, and export it to <framework>. Commit the .op file separately so I can review the diff.

Caveat.

Use this in your AI agent

Ask your agent

Using the Deduped MCP, get the setup steps for ZSeven-W/openpencil and "Create and edit designs from Claude Code through OpenPencil's MCP server"

Add Deduped to Claude Code once

claude mcp add --transport http deduped https://dedupedai.com/mcp

Cursor, ChatGPT, others

Share: X LinkedIn Hacker News Email Copy link

Third-party repos we don't own. AI-written use cases can be wrong. Disclaimer