pencil-design

pencil-design is a skill for Claude Code from JesusJimenezC/pencil-atelier. It costs 72 tokens per session (8,323 once invoked), scanned A, original, GPL-3.0.

A guide for creating Pencil (.pen) designs that follow a defined set of design rules. It records the design brief before composing the design.

In plain words
What is it for?
Use it to create on-scale Pencil layouts with shared variables, reusable components, and clearly named viewport frames.
Why use it?
It reduces inconsistent spacing, hard-coded design values, and unnecessary repeated elements during design work.

Skill for Claude Code

Written for Claude Code: allowed-tools in frontmatter. Also seen: model in frontmatter.

Part of the pencil-atelier plugin — 4 skills, 3 agents shipped together

Good fit Use it to create on-scale Pencil layouts with shared variables, reusable components, and clearly named viewport frames.

Compare 6 skills from other repositories ↓
Install with agentmods
npx agentmods add skills/jesusjimenezc/pencil-atelier/pencil-design
Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

Any agent
npx skills add JesusJimenezC/pencil-atelier --skill pencil-design
Clone the repo
git clone --depth 1 https://github.com/JesusJimenezC/pencil-atelier

Made for: Claude Code.

Or install pencil-atelier, the plugin that ships this one along with the rest of its 4 skills, 3 agents.

Wrote this? Show the measurements

A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.

agentmods badge for pencil-design

README.md
[![agentmods](https://agentmods.dev/badge/skills/jesusjimenezc/pencil-atelier/pencil-design/github.svg)](https://agentmods.dev/skills/jesusjimenezc/pencil-atelier/pencil-design)
Your own site
<a href="https://agentmods.dev/skills/jesusjimenezc/pencil-atelier/pencil-design"><img src="https://agentmods.dev/badge/skills/jesusjimenezc/pencil-atelier/pencil-design/github.svg" alt="Measured on agentmods" height="20"></a>

Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.

agentmods 80×15 button for pencil-design

Your own site · 80×15
<a href="https://agentmods.dev/skills/jesusjimenezc/pencil-atelier/pencil-design"><img src="https://agentmods.dev/badge/skills/jesusjimenezc/pencil-atelier/pencil-design.svg" alt="Reviewed on agentmods" width="80" height="20"></a>
Per session 72 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 8,323 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. A grade says what 26 rules found in the file — not that it is safe.
Origin unknown No closer match found in the catalogue.
Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

ModelPer sessionOnce invoked
Fable 5.1 $0.00072 $0.08323
Opus 5 $0.00036 $0.04161
Sonnet 5 $0.00014 $0.01665
Haiku 4.5 $0.00007 $0.00832

Measured 11d ago against content hash 2c2cef8bb88d, method: parsed. Prices are Anthropic first-party input rates as of 2026-09-11, from the pricing page.

Security

Grade A, and why

pencil-design scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 11d ago.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

skills/pencil-design/SKILL.md · 378 lines

The source is not reproduced here

Licensed GPL-3.0

The repository is licensed GPL-3.0, which this catalogue does not treat as permission to reproduce the file. Read it at the source.

Read it on GitHub

Files

What ships with it

2 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

  1. 11d ago First seen · 378 lines · 72 tokens per session scan A 2c2cef8bb88d

Subscribe to this mod's changes

pencil-design is a skill published in the GitHub repository JesusJimenezC/pencil-atelier (7 stars, last pushed 4mo ago), licensed GPL-3.0. It adds 72 tokens to every session and 8,323 once invoked, about $0.0004 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-31.

Related

Other skills, from other repositories

interface-craft

Raises the visual and interaction quality of an interface — layout, hierarchy, type, spacing, density, and the details that separate a considered product from a generic one. Use this when a screen works but looks unfinished or default, when a layout feels crowded or arbitrary, when a page has no clear focal point, or…

cbrock84/headcount · 79 tokens

design-system

Builds and maintains the design system a product is assembled from — tokens for color, type, spacing and elevation, component contracts, and the rules that keep them coherent as the product grows. Use this when starting a new interface, when screens have drifted apart visually, when the same component exists three…

cbrock84/headcount · 82 tokens

interface-redesign

Upgrades an existing interface to a higher standard without rebuilding it — auditing what is there, identifying what reads as generic or unfinished, and sequencing changes by impact. Use this when a product works but looks dated or default, when a redesign is being considered, when deciding whether to restyle or…

cbrock84/headcount · 77 tokens

design-to-code

Mockup-to-component pipeline using Google Stitch, 21st.dev, and Storybook MCP. Accepts a screenshot, a description, or a URL and produces production-ready React components, checking existing Storybook components before generating anything new. Use when implementing UI from a mockup or screenshot. To call the MCP tool…

yonatangross/orchestkit · 86 tokens

design-context-extract

Extract design DNA from app screenshots, live URLs, or screen recordings using Google Stitch — color palettes, typography, spacing tokens, component patterns, and motion specs as design-tokens.json or Tailwind config. Use when the user points to a screenshot, URL, or video and asks to extract or audit the design…

yonatangross/orchestkit · 84 tokens

design-import

Scaffolds React components from a Claude Design handoff bundle and stops at files on disk: no stories, no tests, no pull request. Use when handed a claude.ai/design URL or a local bundle file; when that same scaffold should carry on through test generation, browser verification and an opened PR, run /ork:design-ship…

yonatangross/orchestkit · 74 tokens