design

Guide Pencil-based design sessions from ticket interpretation to .pen file generation.

1|Updated Mar 24, 2026

Search Tags:#workflow #design #prototyping #ui-design #design-system #pencil

Ready to run

npx skills add https://github.com/matteobortolazzo/claude-tools --skill design-matteobortolazzo

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: design
Source: https://github.com/matteobortolazzo/claude-tools/tree/main/ccflow/skills/design
Command: npx skills add https://github.com/matteobortolazzo/claude-tools --skill design-matteobortolazzo

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides structured, interactive design reasoning and workflow orchestration for Pencil-based design within Claude Code, enabling users to generate and refine .pen design files without manual, ad-hoc steps.

Core Features & Use Cases

Orchestrates Pencil-driven design sessions, including state checks, guidelines, and design proposals.
Manages design artifacts on the user's current branch, including opening/creating .pen files, running batch design tasks, and generating a DESIGN.md specification.
Supports ticket-based design flows (with attachments and design references) or ticketless design driven by free-form descriptions.

Quick Start

Describe your design goal and desired UI action, and I will guide you through creating a Pencil design.

Frequently Asked Questions about design

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

FAQPage Schema

How do I generate Pencil design files from a development ticket?▼

To generate Pencil design files, you provide a ticket with attachments or free-form descriptions. The system interprets the ticket, proposes a design, and orchestrates creating and refining the .pen design files step by step.

What is the process for creating a UI design with Pencil?▼

Creating a UI design with Pencil involves an interactive workflow that checks your environment, applies design-system guidelines, and uses stepwise questions to guide you from initial proposal to validated design artifacts and a generated DESIGN.md specification.

Can I design responsive variants and integrate them into a design system?▼

Yes, you can design responsive variants and integrate them into a design system. The workflow explicitly supports styling, responsive variants, and design-system integration across product interfaces, components, and pages.

Do I need to manually manage state during a Pencil design workflow?▼

No, you do not need to manually manage state during a Pencil design workflow. The system implements robust state management, handling environment checks, file operations, and branch tracking automatically.

What's the best way to document a Pencil design session end-to-end?▼

The best way to document a Pencil design session is through its automatic DESIGN.md generation. As you complete the interactive design tasks, the system generates a DESIGN.md specification capturing the final design artifacts and workflow logic.