Export .pen design to React/Tailwind code. Does ONE thing well. Input: .pen frame ID or file path Output: React component code + Tailwind config Use when: design-exploration or user needs implementation code from a finalized Pencil design.
Quickly install pencil-to-code AI skill to your development environment via command line
Source: elementsai-dev/cognia.
| frame with layout | | | frame with children | Component with children | | text | , , or | | ref (instance) | Reusable component | | rectangle | with fill | | ellipse | | | image | or fill: url() |
Export .pen design to React/Tailwind code. Does ONE thing well. Input: .pen frame ID or file path Output: React component code + Tailwind config Use when: design-exploration or user needs implementation code from a finalized Pencil design. Source: elementsai-dev/cognia.
Open your terminal or command line tool (Terminal, iTerm, Windows Terminal, etc.) Copy and run this command: npx skills add https://github.com/elementsai-dev/cognia --skill pencil-to-code Once installed, the skill will be automatically configured in your AI coding environment and ready to use in Claude Code, Cursor, or OpenClaw
Stable fields and commands for AI/search citations.
npx skills add https://github.com/elementsai-dev/cognia --skill pencil-to-codeExport .pen design to React/Tailwind code. Does ONE thing well. Input: .pen frame ID or file path Output: React component code + Tailwind config Use when: design-exploration or user needs implementation code from a finalized Pencil design. Source: elementsai-dev/cognia.
Open your terminal or command line tool (Terminal, iTerm, Windows Terminal, etc.) Copy and run this command: npx skills add https://github.com/elementsai-dev/cognia --skill pencil-to-code Once installed, the skill will be automatically configured in your AI coding environment and ready to use in Claude Code, Cursor, or OpenClaw
https://github.com/elementsai-dev/cognia