Translate a Pencil (.pen) design into source code for any target stack. Auto-detects Tailwind CSS in the target project; if present, maps design pixel values to Tailwind class names; if absent, emits raw pixel values against the same 4px-grid scale without adding Tailwind as a dependency.
How to install pencil-to-code?
jesusjimenezc/pencil-atelier/pencil-to-code
$npx -y skills add jesusjimenezc/pencil-atelier --skill pencil-to-codeInstalls into the current project.
›Prefer a prompt? Paste this to your agent
Run `npx skills use "https://github.com/jesusjimenezc/pencil-atelier" --skill "jesusjimenezc/pencil-atelier/pencil-to-code"` and follow the generated skill instructions now. Read its complete output, redirecting it to a temporary file first if necessary. Resolve relative paths from the supporting-files directory it provides.
Use the skills in "https://github.com/jesusjimenezc/pencil-atelier" that are relevant to the current task. Run `npx skills add "https://github.com/jesusjimenezc/pencil-atelier"` and select the relevant skills, then follow their instructions.
Related
6 picksType
- entra-app-registrationGuides Microsoft Entra ID app registration, OAuth 2.0 authentication, and MSAL integration.Jul 2026
- azure-complianceRun Azure compliance and security audits with azqr plus Key Vault expiration checks.Jul 2026
- entra-agent-idProvision Microsoft Entra Agent Identity Blueprints, BlueprintPrincipals, and per-instance Agent Identities via Microsoft Graph, and configure OAuth 2.0 token…Jul 2026
- firebase-security-rules-auditorAudits Firebase (Firestore, Cloud Storage) security rules for vulnerabilities, privilege escalation, role bypasses, create vs update inconsistencies, resource…Jul 2026
- golang-securitySecurity best practices and vulnerability prevention for Golang.Jul 2026
- gws-modelarmorGoogle Model Armor: Filter user-generated content for safety.Jul 2026
