Skip to content
TrustedSkillsbeta
Back to all skills

Pencil To Code

Listed
phrazzld·vlatest·frontend

PencilToCode translates hand-drawn sketches and diagrams into basic code snippets, streamlining prototyping and visual development workflows.

Repository

Install on your platform

This skill no longer installs under the name pencil-to-code. phrazzld/claude-config is deleted or private, so it cannot be installed from.

We check each listing against its upstream repository with the rules the skills CLI uses, last on 2026-10-22. We don't show a command we know will fail.

Repository install instructions

What we know about this skill

Publisher

phrazzld

Taken from the source listing. We haven't verified who controls this account.

Install target

Live repository

Not pinned. Installing fetches whatever the repository holds at the time you run the command.

Nobody has reviewed this code. TrustedSkills indexes and links skills; it does not audit, run or scan them. A skill runs with whatever access you give your agent — read the source before you install it.

Automated safety checks

scanned

We could not read this skill's source, so none of the checks below were run.

Not scanned. repository not found or private Source recorded as phrazzld/claude-config.
This is a static scan, not a review. It reads the skill's files; it does not run them, and it cannot tell you whether the skill is any good or whether the code does what its description says. A skill runs with whatever access you give your agent.
What each check looks for →

About this skill

What it does

This skill, Pencil To Code, translates designs created in Pencil (.pen files) into production-ready React or Vue code snippets. It extracts design elements and variables from your Pencil file and generates corresponding React components with Tailwind CSS classes, along with a Tailwind theme configuration based on the .pen file's defined variables. This streamlines prototyping and visual development workflows by automating the conversion of hand-drawn designs into functional code.

When to use it

  • You have designs created in Pencil (.pen files) that you want to quickly convert into React or Vue components.
  • You are prototyping a user interface and need to rapidly generate initial code structures from visual mockups.
  • You want to leverage existing .pen design files as the basis for building out front-end applications using React/Tailwind or Vue.
  • You're looking for a way to automate the translation of visual designs into reusable UI components.

Key capabilities

  • Exports Pencil (.pen) designs to React or Vue code.
  • Generates Tailwind CSS classes based on .pen design properties.
  • Creates a Tailwind theme configuration file from .pen variables.
  • Supports exporting specific frames (by ID) or the entire document.
  • Optional screenshot comparison for visual validation of the generated code.

Example prompts

  • "Export this Pencil file (my_design.pen) to React with component name 'MyComponent'."
  • "Generate Vue code from layout_screen.pen and output it to the /components directory."
  • “Convert frame ID ‘loginForm’ in user_interface.pen to a React component.”

Tips & gotchas

  • Requires access to the Pencil file path via MCP (Model Context Protocol).
  • The skill currently supports exporting to React and Vue; other frameworks are not supported.
  • Screenshot comparison for validation is an optional, manual step requiring additional tools or browser automation.