skills.rest
matteobortolazzo
matteobortolazzoCOMMUNITY
Explore all skills by this author →
GitHub

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

Related Skills

Explore More Design & Creative Skills→
NagasakaHNagasakaH

init-work-branch

Create a feature branch, wire submodules, and generate a design document from setup.yaml.

Community
Advanced
mymx2mymx2
4

design-cli

Lint DESIGN.md files and export design tokens to Tailwind or DTCG JSON.

Community
Advanced
tametotameto

pencil-design

Manage Pencil design files as version-controlled JSON .pen assets.

Community
Advanced
fixpoint-labsfixpoint-labs
2

fsd:prototype

Prototype FSD blocks, patterns, capabilities, and UI variants for testing.

Official
Advanced