pencil-to-openspec

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

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

It converts a visual Pencil (.pen) UI prototype into structured OpenSpec artifacts so you can move from design to requirements and implementation tasks without manual rewriting.

Core Features & Use Cases

  • UI-to-requirements conversion: Parses frames, tokens, components, text, icons, layout patterns, and interactive elements from a .pen file into capability-aligned OpenSpec specs.
  • Scenario-driven acceptance coverage: Generates requirements that include WHEN/THEN scenarios that capture stateful behavior shown across different frames.
  • Implementation task scaffolding: Produces a tasks plan (routes, components, shared components, styling, integration) that you can hand off to engineering or follow with openspec-to-code.

Quick Start

Run the pencil-to-openspec skill after placing your .pen prototype file under docs/design/ so it generates openspec/changes with proposal.md, spec.md files, and tasks.md for implementation.

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 UI prototype into OpenSpec requirements?▼

To convert a Pencil prototype into OpenSpec requirements, you parse the .pen JSON file to generate proposal.md, capability-based spec.md files, and tasks.md using SHALL/MUST language and WHEN/THEN scenarios. This automates design-to-dev handoff without manual rewriting.

What is the best way to generate acceptance scenarios from UI frames?▼

Generating acceptance scenarios from UI frames involves mapping multiple page states and reusable components from a .pen prototype into an OpenSpec change proposal. It captures stateful behavior across frames using a WHEN/THEN scenario structure to ensure comprehensive coverage.

Can I generate implementation tasks directly from a .pen file?▼

Yes, you can generate implementation tasks directly from a .pen file by placing it under docs/design/ and running the conversion. It produces a tasks plan covering routes, components, styling, and integration ready for engineering handoff or openspec-to-code.

Does the design to dev handoff process require an existing openspec workspace?▼

The design to dev handoff process can create or use an existing openspec workspace. It writes the generated proposal.md, per-capability specs, and tasks.md directly under openspec/changes/{change-id} to maintain organized change tracking.

What layout patterns and tokens are extracted from a Pencil prototype?▼

Extracted elements from a Pencil prototype include frames, tokens, components, text, icons, layout patterns, and interactive elements. These visual components are mapped into coherent capabilities to align UI design with structured OpenSpec specifications.