AI导哈

设计与多媒体

pencil-design

chiroro-jr/penc…gn-skill

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.

  • 1840 次安装
  • 20 星标
  • 收录于

安装命令

npx skills add https://github.com/chiroro-jr/pencil-design-skill --skill pencil-design

SKILL.md

Pencil Design Skill

Design production-quality UIs in Pencil and generate clean, maintainable code from them. This skill enforces best practices for design system reuse, variable usage, layout correctness, visual verification, and design-to-code workflows.

When to Use This Skill

  • Designing screens, pages, or components in a .pen file
  • Generating code (React, Next.js, Vue, Svelte, HTML/CSS) from Pencil designs
  • Building or extending a design system in Pencil
  • Syncing design tokens between Pencil and code (Tailwind v4 @theme, shadcn/ui tokens)
  • Importing existing code into Pencil designs
  • Working with any Pencil MCP tools (pencil_batch_design, pencil_batch_get, etc.)

Critical Rules

These rules address the most common agent mistakes. Violating them produces designs that are inconsistent, hard to maintain, and generate poor code.

Rule 1: Always Reuse Design System Components