# pencil-to-code

> pencil-to-code — jcwen-pencil-to-code. Use this tool when you need to convert visual designs into functional React code with Tailwind styling, saving time and effort in the front-end development process. It takes .pen design files as input and generates corresponding React and Tailwind code as output. Ideal for streamlining the design-to-development workflow, pencil-to-code automates the translation of design elements into code.

Canonical page: https://skillsregistry.net/skills/jcwen-pencil-to-code  
JSON: https://api.skillsregistry.net/v1/skills/jcwen-pencil-to-code

## Description

Export .pen design to React/Tailwind code.

## Trust

- **Trust score (0–1):** 1.00
- **Verification tier:** scanned
- **Last scanned:** 2026-09-19

## Facts

- **Version:** 1.0.0
- **Skill type:** atomic
- **Execution layer:** instructions
- **Runtime environment:** llm
- **Category:** other
- **Updated:** 2026-09-19

## Source

- **Source listing:** [ClawHub](https://clawskills.sh/skills/jcwen-pencil-to-code)

## Use it

Resolve this record through the SkillsRegistry MCP server (no auth, read-only):

```
claude mcp add --transport http --scope user skillsregistry https://api.skillsregistry.net/mcp
```

```json
{
  "jsonrpc": "2.0",
  "id": 1,
  "method": "tools/call",
  "params": {
    "name": "get_skill",
    "arguments": {
      "slug": "jcwen-pencil-to-code"
    }
  }
}
```

REST: `GET https://api.skillsregistry.net/v1/skills/jcwen-pencil-to-code` · pull for local use: `GET https://api.skillsregistry.net/v1/skills/jcwen-pencil-to-code/pull`

---
SkillsRegistry indexes agent skills from public registries and GitHub. Skills we have analysed are scanned with Circle-IR and scored on six dimensions; each listing states its scan coverage. More: https://skillsregistry.net/llms.txt