skills.rest
VanLengs
VanLengsCOMMUNITY
Explore all skills by this author →
GitHub

pencil-to-openspec

Parse Pencil .pen files and generate OpenSpec change proposals with tasks and delta files.

1|Updated Mar 27, 2026
Search Tags:#prototyping#ui-design#openspec#design-workflow#pencil
One-click install
npx skills add https://github.com/VanLengs/astra-studio-plugins --skill pencil-to-openspec
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: pencil-to-openspec
Source: https://github.com/VanLengs/astra-studio-plugins/tree/main/studio-design/skills/pencil-to-openspec
Command: npx skills add https://github.com/VanLengs/astra-studio-plugins --skill pencil-to-openspec

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Pencil prototypes describe UI intent, but teams struggle to translate them into structured OpenSpec changes without losing details.

Core Features & Use Cases

  • Parse a Pencil (.pen) prototype file and extract frames, components, and tokens.
  • Map frames to OpenSpec capabilities and generate a coherent change proposal with scenarios and tasks.
  • Output proposal.md, tasks.md, and spec delta files under openspec/changes/{change-id}/ with guidance for implementation.

Quick Start

Provide a .pen prototype file and run Pencil to OpenSpec to generate proposal.md, tasks.md, and delta files.

Frequently Asked Questions about pencil-to-openspec

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

FAQPage Schema
How do I convert a Pencil prototype file into an OpenSpec change proposal?▼

To generate OpenSpec changes from a Pencil prototype, the tool parses your .pen file to extract UI frames and components, then outputs proposal.md, tasks.md, and delta files under openspec/changes/{change-id}/ with implementation guidance.

Can I use Pencil diagrams to generate structured UI requirements and tasks?▼

Yes, you can map Pencil diagram frames to OpenSpec capabilities to generate structured UI requirements. The tool reads .pen files and outputs proposal.md and tasks.md describing scenarios and implementation tasks.

Do I need an existing OpenSpec workspace to parse Pencil .pen files?▼

No, you do not need an existing OpenSpec workspace to parse Pencil .pen files. The tool automatically creates an OpenSpec workspace if one is missing before outputting the proposal and delta files.

What files are generated when turning a Pencil prototype into an OpenSpec change?▼

Turning a Pencil prototype into an OpenSpec change generates proposal.md, tasks.md, and spec delta files. These files are output under openspec/changes/{change-id}/ and include implementation guidance from references/.

Does the tool support processing multiple frames across a Pencil prototype?▼

Yes, the tool supports processing multiple frames across a Pencil prototype. It applies to UI design workflows where Pencil diagrams must be transformed into formal OpenSpec changes, mapping all frames into a coherent change proposal.

What is the best way to translate UI design intent from Pencil into formal OpenSpec changes without losing details?▼

The best way to translate UI design intent into formal OpenSpec changes is parsing the .pen prototype file to extract tokens and components, then mapping them to OpenSpec capabilities to generate a structured proposal with scenarios and tasks.

Related Skills

Explore More Design & Creative Skills→
Ameng2001Ameng2001
1

pencil-to-openspec

Convert Pencil .pen UI prototypes into OpenSpec change proposals with capability specs and tasks.

Community
Intermediate
xiayu519xiayu519
63

openspec-propose

Create OpenSpec change proposals with proposal.md, design.md, and tasks.md artifacts.

Community
Advanced
nesihaver-ILnesihaver-IL

figma

Transform Figma designs into React components and design tokens.

Community
Intermediate
tungnguyen10tungnguyen10

openspec-apply-change

Automate implementation of OpenSpec change tasks with progress tracking.

Community
Advanced