From magic-powers
Use when creating UI designs with Pencil — the MCP-native canvas that lives in your repo. Requires Pencil extension installed in your IDE.
npx claudepluginhub kienbui1995/magic-powers --plugin magic-powersThis skill uses the workspace's default tool permissions.
Pencil is an agent-driven MCP canvas that lets you design on an infinite canvas and generate pixel-perfect code — directly inside your IDE, with `.pen` files stored in your repo.
Generates design tokens/docs from CSS/Tailwind/styled-components codebases, audits visual consistency across 10 dimensions, detects AI slop in UI.
Records polished WebM UI demo videos of web apps using Playwright with cursor overlay, natural pacing, and three-phase scripting. Activates for demo, walkthrough, screen recording, or tutorial requests.
Delivers idiomatic Kotlin patterns for null safety, immutability, sealed classes, coroutines, Flows, extensions, DSL builders, and Gradle DSL. Use when writing, reviewing, refactoring, or designing Kotlin code.
Pencil is an agent-driven MCP canvas that lets you design on an infinite canvas and generate pixel-perfect code — directly inside your IDE, with .pen files stored in your repo.
Install Pencil extension in your IDE:
highagency.pencildev)Ensure Claude Code is logged in — Pencil's AI features require it
Verify MCP connection:
/mcp to see Pencil in the list# Create a .pen file in your project
touch designs/my-component.pen
# Open it — Pencil canvas opens automatically
Describe what you want in the Pencil prompt box:
Or import from Figma: copy elements → paste directly into Pencil canvas.
From the Pencil canvas, prompt changes directly:
Ask Claude Code to read the canvas and generate code:
Read my Pencil canvas in designs/my-component.pen and generate
a React component matching the design pixel-perfectly.
Use Tailwind CSS and shadcn/ui components.
Claude Code reads the .pen file via MCP and generates production-ready code.
Pencil is bi-directional — when code changes, ask Claude Code to update the canvas:
Update the canvas in designs/my-component.pen to reflect
the changes I made to components/Dashboard.tsx
New screen from scratch:
Design a web app for [purpose]. Use [style] style.
Iterate on existing:
Look at the selected design. [Change]. Create a new design for it.
Explore directions:
Look at the selected design. Explore a totally different design direction.
Brand consistency:
Look at the selected design. Apply our design system from /design-tokens.
| Pencil | Stitch | |
|---|---|---|
| Interface | Canvas in IDE | API call |
| Files | .pen in repo | Generated HTML |
| Direction | Canvas ↔ Code (bi-directional) | Text → HTML |
| Best for | Full product design, living in repo | Quick UI generation via API |
| Setup | Extension install required | STITCH_API_KEY required |
Use Pencil when you want designs to live in the repo with Git versioning. Use Stitch when you want quick API-generated HTML without IDE setup.