pencil▌

CLI and MCP server for .fig design files. Two modes of operation:

Design production UIs in Pencil and generate clean code from design files. \n \n Enforces design system reuse, variable-driven styling, and layout correctness to prevent inconsistent, unmaintainable designs \n Supports design-to-code workflows for React, Next.js, Vue, Svelte, and HTML/CSS with Tailwind v4 semantic classes and shadcn/ui component mapping \n Requires visual verification after each section via screenshots and layout snapshots to catch overflow, alignment, and spacing issues before

本 Skills 提供了一套工业级标准的 UI 设计规范，用于 Pencil MCP 设计工作。

Export Pencil .pen designs to production React/Tailwind code.