▎ Animation-First Design SKILL using Claude Code + Pencil MCP
-
Updated
Apr 28, 2026 - JavaScript
▎ Animation-First Design SKILL using Claude Code + Pencil MCP
Claude Skill: Turn Figma/Sketch/XD designs into high-fidelity UI code via Pencil MCP. 6-phase parallel agent workflow. Auto-adapts to Claude Code / other AI agents / plain LLMs.
Claude Code skill: Convert Excalidraw wireframes to HiFi UI mockups using Pencil MCP. Battle-tested on 94 screens.
Design-to-code pipeline for iOS: Pencil MCP → Design Philosophy → XcodeBuildMCP → Ralph Loop. Orchestrator, not a collection.
Add a description, image, and links to the pencil-mcp topic page so that developers can more easily learn about it.
To associate your repository with the pencil-mcp topic, visit your repo's landing page and select "manage topics."