paper-design
Read and write designs in Paper via MCP. Paper is a DOM-based design tool — designs are HTML/CSS structures that Claude reads and writes natively.
Prerequisites
Paper Desktop must be running before starting Claude Code. The app auto-starts an MCP server at http://127.0.0.1:29979/mcp. Run python3 ~/.claude/skills/paper-design/scripts/health-check.py to verify connection. If the MCP server is not registered, run bash ~/.claude/skills/paper-design/scripts/setup.sh.
Paper vs Pencil
Use Paper for design-to-code, code-to-design, and rapid prototyping (native DOM). Use Pencil for reusable design systems, existing .pen files, and presentations. Full comparison: references/paper-vs-pencil.md
Paper Shaders
Paper also ships a standalone React shader library — @paper-design/shaders-react — used independently of the MCP workflow. Install with npm i @paper-design/shaders-react and import named components like MeshGradient, FlutedGlass, LiquidMetal, HalftoneCMYK, GodRays. 30+ shaders across three categories (Image Filters, Logo Animations, Effects). Zero dependencies beyond React.
Reach for Paper Shaders when the goal is to use a designer-tuned effect as a React component with named props. Reach for threejs-particle-canvas, grainient, or rocaille-shader when the goal is custom particle systems, grainient.supply-style page aesthetics, or pointer-reactive DOM distortion — those skills have different strengths. Shaders authored in Paper-the-tool export as the matching React component via get_jsx; prop names map 1:1 onto the sliders in each shader panel.
Full catalog, per-category tables, and integration notes: references/shaders.md.