+ Pencil × your AI agent Turn a sketch into code
If you ask
“Design a pricing card on the canvas, then generate it as a React + Tailwind component”
Then
Sketch a UI component on the canvas and have Claude emit matching React/Tailwind.
Works in Claude, Codex, Cursor & any MCP agent
How this prompt works
-
Turn on the Pencil connector in Claude, ChatGPT or Cursor — once.
-
Paste the prompt above. No code, no menus.
-
Sketch a UI component on the canvas and have Claude emit matching React/Tailwind.
FAQ
How do I turn a sketch into code with Pencil?
Add the Pencil MCP connector once, then paste this prompt into Claude or ChatGPT: "Design a pricing card on the canvas, then generate it as a React + Tailwind component". Your AI runs it in Pencil.
Do I need to code?
No. You install the connector once (a short config or one click), then ask in plain words. The prompt on this page works as-is.
Which AI assistants work?
Claude (Desktop, Code), Cursor, ChatGPT and other MCP clients. The same prompt works across them.
Set up Pencil in Claude
Copy-paste config, setup steps and more ready-to-run prompts on the connector page.
Open Pencil setupMore prompts