Export Pencil .pen designs to production React/Tailwind code.
Works with
AI-first code editor with Composer
Before installing skills in Cursor, ensure your development environment meets these requirements:
node --versionpencil-to-codeExecute the skills CLI command in your project's root directory to begin installation:
Fetches pencil-to-code from phrazzld/claude-config and configures it for Cursor.
The CLI shows a list of agents. Use arrow keys and space to select Cursor:
Confirm successful installation by checking the skill directory location:
Restart Cursor to activate pencil-to-code. Access via /pencil-to-code in your agent's command palette.
We perform automated surface-level scans (Gen AI Scanner, Socket, Snyk) during installation. These checks detect common vulnerabilities but do not guarantee complete security. Always review skill source code and verify the publisher's reputation before production use.
Skills execute code in your environment. Always review source, verify the publisher, and test in isolation before production.
Submit your Claude Code skill and start earning
Create detailed user stories, acceptance criteria, and feature specs
Example
Generate user stories for 'password reset feature' with acceptance criteria, edge cases, and test scenarios
Reduce spec writing time by 50%, ensure comprehensive coverage
Research competitors, compare features, identify gaps
Example
Analyze 5 competitor products, create feature comparison matrix, suggest differentiation opportunities
Complete competitive research in 2 hours instead of 2 days
Evaluate features using frameworks (RICE, ICE, Kano) and create prioritized backlogs
Example
Score 20 feature ideas using RICE framework, generate prioritized roadmap with rationale
0
total installs
0
this week
8
GitHub stars
0
upvotes
Run in your terminal
0
installs
0
this week
8
stars
Export Pencil .pen designs to production React/Tailwind code.
Input:
Output:
// Get full frame tree
mcp__pencil__batch_get({
filePath: "<path>.pen",
nodeIds: ["frameId"],
readDepth: 10,
resolveInstances: true,
resolveVariables: true
})
// Get design variables/theme
mcp__pencil__get_variables({ filePath: "<path>.pen" })
Transform .pen variables → Tailwind theme:
/* From .pen variables */
@theme {
--color-primary: [from variables.colors.primary];
--color-background: [from variables.colors.background];
--font-sans: [from variables.fonts.body];
/* ... */
}
Reference: references/token-extraction.md
| .pen Node Type | React Output |
|---|---|
frame with layout |
<div className="flex ..."> |
frame with children |
Component with children |
text |
<p>, <h1-6>, or <span> |
ref (instance) |
Reusable component |
rectangle |
<div> with fill |
ellipse |
<div className="rounded-full"> |
image |
<img> or fill: url() |
Reference: references/node-mapping.md
Component structure:
// components/[ComponentName].tsx
import { cn } from "@/lib/utils"
interface [ComponentName]Props {
className?: string
// Extracted props from design
}
export function [ComponentName]({ className, ...props }: [ComponentName]Props) {
return (
<div className={cn("[tailwind classes]", className)}>
{/* Nested structure */}
</div>
)
}
Tailwind mapping:
.pen property → Tailwind class
--------------------------------
fill: #000 → bg-black
layout: horizontal → flex flex-row
gap: 16 → gap-4
padding: [16,24,16,24] → py-4 px-6
fontSize: 24 → text-2xl
fontWeight: 700 → font-bold
cornerRadius: [8,8,8,8] → rounded-lg
// Screenshot the .pen frame
mcp__pencil__get_screenshot({ nodeId: "frameId" })
// Compare visually with rendered React
// (Manual step or browser automation)
## Generated Components
### [ComponentName]
- File: `components/[ComponentName].tsx`
- Props: [list extracted props]
### Theme Configuration
- File: `app/globals.css` (additions)
## Verification
Screenshot comparison: [attached]
.pen Tailwind
--------------------------------------
layout: "vertical" → flex flex-col
layout: "horizontal" → flex flex-row
layout: "grid" → grid
alignItems: "center" → items-center
justifyContent: "center" → justify-center
gap: 8 → gap-2
gap: 16 → gap-4
gap: 24 → gap-6
width: "fill_container" → w-full
height: "fill_container" → h-full
.pen padding Tailwind
----------------------------------------
[8,8,8,8] → p-2
[16,16,16,16] → p-4
[16,24,16,24] → py-4 px-6
[24,32,24,32] → py-6 px-8
.pen Tailwind
----------------------------------------
fontSize: 12 → text-xs
fontSize: 14 → text-sm
fontSize: 16 → text-base
fontSize: 20 → text-xl
fontSize: 24 → text-2xl
fontSize: 32 → text-3xl
fontSize: 48 → text-5xl
fontWeight: 400 → font-normal
fontWeight: 500 → font-medium
fontWeight: 600 → font-semibold
fontWeight: 700 → font-bold
.pen Tailwind
----------------------------------------
fill: "#FFFFFF" → bg-white
fill: "#000000" → bg-black
fill: variable → bg-[var(--color-name)]
textColor: "#6B7280" → text-gray-500
stroke: "#E5E5E5" → border-gray-200
.pen cornerRadius Tailwind
----------------------------------------
[0,0,0,0] → rounded-none
[4,4,4,4] → rounded
[8,8,8,8] → rounded-lg
[16,16,16,16] → rounded-2xl
[9999,9999,9999,9999] → rounded-full
references/node-mapping.md — Complete node → component mappingreferences/token-extraction.md — Variable → theme extractiondesign-tokens/ — Token system conventionsCalled by:
design-exploration orchestrator (after direction selection)Composes:
design-tokens (for theme structure)Make data-driven prioritization decisions faster
Draft PRDs, status updates, and stakeholder presentations
Example
Create executive summary of Q3 roadmap, monthly progress report, feature launch announcement
Save 3-5 hours/week on communication overhead
Prerequisites
Time Estimate
30-60 minutes to see productivity improvements
Steps
Common Pitfalls
✓ Do
✗ Don't
💡 Pro Tips
✓ Use when
Use for user story writing, competitive research, roadmap prioritization, stakeholder communication, and PRD drafting. Best for reducing repetitive documentation and research work.
✗ Avoid when
Avoid for strategic product vision (requires deep customer empathy), pricing decisions (needs market and financial expertise), or when face-to-face customer discovery is more valuable than speed.
asyrafhussin/agent-skills
shadcn/improve
mattpocock/skills
parcadei/continuous-claude-v3
cursor/plugins
ailabs-393/ai-labs-claude-skills
pencil-to-code has been reliable in day-to-day use. Documentation quality is above average for community skills.
We added pencil-to-code from the explainx registry; install was straightforward and the SKILL.md answered most questions upfront.
pencil-to-code fits our agent workflows well — practical, well scoped, and easy to wire into existing repos.
Useful defaults in pencil-to-code — fewer surprises than typical one-off scripts, and it plays nicely with `npx skills` flows.
Useful defaults in pencil-to-code — fewer surprises than typical one-off scripts, and it plays nicely with `npx skills` flows.
We added pencil-to-code from the explainx registry; install was straightforward and the SKILL.md answered most questions upfront.
pencil-to-code reduced setup friction for our internal harness; good balance of opinion and flexibility.
Registry listing for pencil-to-code matched our evaluation — installs cleanly and behaves as described in the markdown.
Solid pick for teams standardizing on skills: pencil-to-code is focused, and the summary matches what you get after install.
I recommend pencil-to-code for anyone iterating fast on agent tooling; clear intent and a small, reviewable surface area.
showing 1-10 of 38