AcademySkillsDesign and media

PencilPlaybook: Design Rules for Pencil.dev

Designers and front-end developers who build interface mockups in Pencil.dev with Claude Code.

Use it nowWant it running at your company?
  • Recommendedour rating
  • 50gitHub stars
  • MITlicence
  • 7 months agolast update

Use it now

Open inClaudeChatGPTGeminiPerplexity
git clone https://github.com/stevembarclay/pencilplaybook.git
Download ZIPOpen the original ↗

Third party software. By copying, downloading or installing it you accept the Academy legal notice: you are responsible for reviewing its code and permissions before use.

README.md

Loading the file...

What it does

PencilPlaybook is a Claude Agent Skill that gives Claude design rules for Pencil.dev and Claude Code. It covers values for states, typography and touch targets, along with nine scaffold archetypes, seven preset design systems and structured workflows for common Pencil.dev operations. The aim is to help Claude make more specific interface decisions.

Use cases

  1. 01Set states and contrast values for buttons
  2. 02Start a page from a preset design system
  3. 03Check touch target sizes on mobile layouts

Questions about
PencilPlaybook: Design Rules for Pencil.dev.

What is PencilPlaybook: Design Rules for Pencil.dev used for?

Designers and front-end developers who build interface mockups in Pencil.dev with Claude Code. PencilPlaybook is a Claude Agent Skill that gives Claude design rules for Pencil.dev and Claude Code. It covers values for states, typography and touch targets, along with nine scaffold archetypes, seven preset design systems and structured workflows for common Pencil.dev operations. The aim is to help Claude make more specific interface decisions.

How do I install PencilPlaybook: Design Rules for Pencil.dev?

Run this in your terminal: git clone https://github.com/stevembarclay/pencilplaybook.git

Is PencilPlaybook: Design Rules for Pencil.dev open source?

Yes. The code is on GitHub (stevembarclay/pencilplaybook) under the MIT licence.

Is PencilPlaybook: Design Rules for Pencil.dev safe to use?

It passed our automatic scan for credential theft, hidden instructions and risky install commands. Third party open source software. Sabemos AI does not maintain it. Check the code and permissions before you connect it to company data.

Related resources

Read the guide: AI marketing content systems ↗

  1. 001Archify for Claude CodeEngineering and operations teams that need clear diagrams of systems and workflows to document, review or hand over.RecommendedResource
  2. 002Diagram Design for Claude CodeProduct, design and engineering teams use it to get presentable diagrams straight from Claude Code.RecommendedResource
  3. 003Blender Python add-on rules for CursorDesign and 3D production teams that build internal Blender tools and want consistent add-on code from Cursor.RecommendedRules file
  4. 004Algorithmic ArtDesign and marketing teams who want original generative visuals for campaigns, events or web pages.OfficialSkill
  5. 005Canvas DesignDesign and marketing teams who need original posters or visual pieces with a clear aesthetic direction.OfficialSkill
  6. 006Frontend DesignDesign and web teams building landing pages or interfaces that need a distinct visual identity.OfficialSkill