skills.rest
phrazzld
phrazzldCOMMUNITY
Explore all skills by this author →
GitHub

pencil-to-code

Convert .pen design files into React and Tailwind CSS code.

13|3|Updated Mar 2, 2026
Search Tags:#design#ui#react#code generation#tailwind#pencil
One-click install
npx skills add https://github.com/phrazzld/agent-skills --skill pencil-to-code
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: pencil-to-code
Source: https://github.com/phrazzld/agent-skills/tree/main/core/pencil-to-code
Command: npx skills add https://github.com/phrazzld/agent-skills --skill pencil-to-code

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill bridges the gap between visual design mockups in Pencil and functional React/Tailwind code, accelerating the implementation phase of development.

Core Features & Use Cases

  • Design Export: Converts .pen frame designs into production-ready React components.
  • Tailwind Integration: Generates corresponding Tailwind CSS configurations from design tokens.
  • Use Case: A designer creates a UI element in Pencil. This Skill takes the design and outputs the React component code and necessary Tailwind classes, ready for a developer to integrate.

Quick Start

Export the Pencil design frame with ID 'hero-banner' from the file 'marketing-page.pen' into a React component.

Frequently Asked Questions about pencil-to-code

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

FAQPage Schema
How do I convert Pencil design files into React components?▼

To convert Pencil designs into React components, this Skill parses .pen file structures, extracts design tokens, and maps visual nodes directly into functional React code ready for integration.

Does converting .pen files also generate Tailwind CSS configurations?▼

Yes, converting .pen files generates Tailwind CSS configurations. The process extracts design tokens from the Pencil file and outputs them directly as Tailwind classes and theme configurations.

How do I export a specific Pencil frame ID into React code?▼

You export a specific Pencil frame by referencing its ID, such as 'hero-banner', alongside the source file name. The tool targets that exact frame to generate the matching React component.

When should I use a .pen file to React workflow?▼

You should use a .pen file to React workflow when implementing finalized Pencil designs. It bridges visual design mockups and functional code, accelerating the development phase of production-ready components.

Can I use this design-to-code workflow without manual Tailwind styling?▼

Yes, you can generate code without manual Tailwind styling. The conversion automatically maps design elements from the .pen file into appropriate Tailwind classes, outputting production-ready React components.

What is the best way to implement finalized Pencil UI designs for developers?▼

The best way to implement finalized Pencil UI designs is using a design-to-code workflow that parses the .pen structures. This automatically outputs React components and Tailwind configurations for developers to integrate.

Related Skills

Explore More Design & Creative Skills→
zts212653zts212653
2.6k

pencil-design

Convert .pen design files into React/Tailwind components.

Community
Intermediate
ak8458ak8458

preview-import

Preview and validate imported HTML rendering in a local AEM Edge Delivery Services dev server.

Community
Intermediate
juliochwdjuliochwd
1

artifacts-builder

Develops interactive HTML artifacts with React, Tailwind CSS, and shadcn/ui components for claude.ai.

Community
Intermediate
jinwoonghongjinwoonghong

moai-design-tools

Convert Pencil design files into React and Tailwind CSS code.

Community
Advanced