Communitygithub.com

chiroro-jr/pencil-design

Design UIs in Pencil (.pen files) and generate production code from them. Use when working with .pen files, designing screens or components in Pencil, or generating code from Pencil designs. Triggers on tasks involving Pencil, .pen files, design-to-code workflows, or UI design with the Pencil MCP tools.

What is pencil-design?

pencil-design is a Claude Code agent skill that design UIs in Pencil (.pen files) and generate production code from them. Use when working with .pen files, designing screens or components in Pencil, or generating code from Pencil designs. Triggers on tasks involving Pencil, .pen files, design-to-code workflows, or UI design with the Pencil MCP tools.

Works with~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/chiroro-jr/pencil-design-skill/tree/main/skills/pencil-design

Ask in your favorite AI

Open a new chat with this agent skill pre-loaded.

Documentation

What does pencil-design do?

Design UIs in Pencil (.pen files) and generate production code from them. Use when working with .pen files, designing screens or components in Pencil, or generating code from Pencil designs. Triggers on tasks involving Pencil, .pen files, design-to-code workflows, or UI design with the Pencil MCP tools.

Related Skills