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 ...