pencil-ui-design

The Pencil UI Design skill provides a comprehensive framework for creating consistent, high-quality user interfaces within the Pencil MCP ecosystem. It is designed for engineers and designers who need to bridge the gap between abstract design requirements and concrete, programmable UI implementations. By leveraging a centralized set of design tokens and a modular component library, users can achieve rapid, repeatable, and scalable design outcomes that adhere to industry best practices.

• Standardized design system tokens covering global colors, typography scales, 4px grid spacing systems, and elevation-based shadow definitions.

• A library of ready-to-use, reusable UI components including Primary/Secondary buttons, Cards, Inputs, Avatars, and Badges defined with exact layout, padding, and corner radius properties.

• Integrated support for Material Symbols Rounded icon sets to ensure visual consistency across all design deliverables.

• Advanced workflow automation capabilities allowing for batch updates, component referencing (ref), and property overrides to maintain visual harmony in complex documents.

• Built-in verification tools for layout sanity checks, screenshot generation, and design property validation to ensure final outputs match the design specification.

• The skill requires a functioning Pencil MCP service environment to execute design operations via the .pen file format.

• Users should initialize design system variables using mcp_pencil_set_variables before beginning layout construction to ensure token propagation.

• Input is handled via structured JSON objects defining component frame properties; outputs include rendered design nodes within the Pencil document model.

• Focus on modularity by using the reusable: true flag for components to enable efficient updates across multiple instances using the batch design API.

• Ensure strict adherence to the 4px grid and recommended Inter/Noto Sans SC font stacks to maintain the integrity of the industrial-grade UI standards provided.