pencil▌

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

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

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

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