design-pen

Name: design-pen
Availability: InStock
Author: mikanfactory

Design and implement UI elements in .pen files using Pencil MCP.

Updated Jan 6, 2026

Search Tags:#design #ui #layout #component #pencil mcp #pen files

Ready to run

npx skills add https://github.com/mikanfactory/dotfiles --skill design-pen

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: design-pen
Source: https://github.com/mikanfactory/dotfiles/tree/main/home/dot_claude/skills/design-pen
Command: npx skills add https://github.com/mikanfactory/dotfiles --skill design-pen

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill automates the creation and editing of UI designs within .pen files, leveraging the Pencil MCP tool to act as a professional designer.

Core Features & Use Cases

AI-Powered Design: Generates and refines UI designs based on user requests and design principles.
Iterative Design Process: Follows a structured workflow including state checking, guideline retrieval, proposal, implementation, and validation.
Use Case: Request a new landing page design, and the skill will propose a layout, components, and styles, then implement it after your approval.

Quick Start

Use the design-pen skill to create a new mobile app design.

Frequently Asked Questions about design-pen

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I design UI elements within .pen files?▼

The skill follows an iterative design process: it checks the editor state, retrieves style guidelines, proposes a layout with components, and implements the design after you approve the proposal.

What types of UI layouts can I create with the Pencil MCP tool?▼

It handles requests for UI design by analyzing the document structure and generating layouts for landing pages, mobile apps, and dashboards based on your design principles.

How does the iterative design process work for .pen file layouts?▼

After retrieving style guidelines, it proposes a UI design and layout, then uses batch_design operations to implement the changes directly within the .pen file for validation.

Can I automate component assembly for mobile app designs in .pen files?▼

It automates mobile app UI design by analyzing document structure, proposing components based on style guidelines, and executing batch_design operations to assemble the layout.

Do I need to manually apply style guidelines when creating dashboards in .pen files?▼

The tool automatically retrieves style guidelines and analyzes the document structure to propose and implement dashboard designs without requiring manual style application.

What is the best way to implement batch design changes across UI components?▼

Using batch_design operations ensures that proposed UI elements, layouts, and component assemblies are applied and validated efficiently within the .pen file structure.