skills.rest
mikanfactory
mikanfactoryCOMMUNITY
Explore all skills by this author →
GitHub

design-pen

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
One-click install
npx skills add https://github.com/mikanfactory/dotfiles --skill design-pen
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
julilaoshijulilaoshi
117

julilaoshi-design

Edit .pen files with Pencil MCP or tweak HTML in a browser editor.

Community
Intermediate
zts212653zts212653
2.6k

pencil-design

Convert .pen design files into React/Tailwind components.

Community
Intermediate
taewook486taewook486

moai-design-tools

Fetch Figma design context and export Pencil designs into React and Tailwind CSS code.

Community
Advanced
snake-dev-teamsnake-dev-team

ck:ui-ux-pro-max

Generate design systems and UI/UX best practice guidelines for web and mobile applications.

Official
Advanced