Pencil Design System Generator

.pen

/pds coffee shop that sells coffee online

Getting Started

/pds

1. Parse the user's input — extract domain, brand name, color preferences, font preferences from their message after

   /pds

2. Greet and confirm — show what was understood and what will be built:

Pencil Design System Generator

Domain: [extracted domain]
Brand:  [extracted name or "unnamed"]
Colors: [extracted preferences or "will research"]
Fonts:  [extracted preferences or "will research"]

I'll build this step by step:
 1. Research    -> design brief
 2. Tokens      -> ~64 themed variables (light + dark)
 3. Foundations  -> visual documentation
 4. Components  -> ~25 reusable parts
 5. Patterns    -> 4 composition showcases

Each step pauses for your review. Type:
  c  to continue
  r  to redo (tell me what to change)
  s  to skip ahead to final verification

Want screens too? Tell me now or add them later.

Starting with domain research...

1. Proceed to Phase 1 immediately — the first review pause comes after the design brief is ready.

Input

Canvas Organization

[Foundations 1440×2400] → 100px gap → [Components 1440×2400] → 100px gap → [Patterns 1440×1800] → (optional) [Screens →]

• Foundations — Visual documentation: color palette swatches, typography specimens, spacing scale, elevation examples, border radius showcase.
• Components — All ~25 reusable components, organized under category sub-frames (Buttons, Inputs, Typography, Badges, Alerts, Cards, Navigation, Tables, etc.).
• Patterns — Composition showcases: form pattern, data display pattern, navigation pattern, card layout pattern. Each uses component refs to demonstrate real usage.
• Screens (only if user requests) — 3–5 domain-relevant screens placed to the right of Patterns.

Workflow

references/

c

r

s

Phase 1 — Research the Domain

WebSearch

"bakery website fonts 2026"

"best Google Fonts for bakery"

domain-research-guide.md

references/domain-research-guide.md

Design Brief — [Domain]

Primary:    [hex] ([description])
Secondary:  [hex] ([description])
Accent:     [hex] ([description])
Background: [hex] ([description])
Heading:    [font name]
Body:       [font name]
Mono:       [font name]
Tone:       [2-3 adjectives]

Based on: [list 2-3 reference sites studied]

Phase 2 — Initialize the Pencil Document

1. Call

   get_editor_state({ include_schema: true })

   .
2. If no active document, call

   open_document("new")

   .
3. Call

   get_guidelines({ topic: "design-system" })

   .
4. Call

   get_style_guide_tags()

   then

   get_style_guide({ tags: [...] })

   with 5–10 domain-matching tags.
5. Call

   get_variables({ filePath })

   to check for existing tokens.

Phase 3 — Create Design Tokens

set_variables

--primary

--background

--accent

$--

set_variables

--background

--foreground

--primary

--secondary

--muted

--accent

--destructive

--border

--input

--ring

--color-success

--color-warning

--color-error

--color-info

--font-primary

--font-secondary

--font-mono

--radius-none

--radius-pill

--space-1

--space-24

--shadow-sm

--shadow-md

--shadow-lg

--shadow-xl

--text-xs

--text-5xl

--leading-tight

--leading-normal

--leading-relaxed

{ "mode": ["light", "dark"] }

references/design-tokens-reference.md

set_variables

get_variables

"theme":{"mode":"light"}

"theme":{"mode":"dark"}

"theme":{}

set_variables

design-tokens-reference.md

get_variables

Tokens Created — [count] total

| Category        | Count | Status      |
|-----------------|-------|-------------|
| Core colors     | 19    | light+dark  |
| Semantic colors | 8     | light+dark  |
| Typography      | 3     |             |
| Border radius   | 6     |             |
| Spacing         | 12    |             |
| Shadows         | 4     |             |
| Font sizes      | 9     |             |
| Line heights    | 3     |             |

[any warnings: missing themes, wrong format, etc.]

Phase 4 — Build Foundations (Visual Documentation)

1. Color Palette — Grid of labeled swatches for all 27 color tokens.
2. Typography Scale — 6 specimens (H1 → Caption) rendered at real sizes with metadata labels.
3. Spacing Scale — 12 visual blocks showing each spacing value with labels.
4. Elevation — 4 cards demonstrating shadow levels.
5. Border Radius — 6 rectangles showcasing each radius token.

fill: "#FFFFFF"

$--background

--card

--secondary

--muted

$--

$--

references/foundations-specs.md

batch_design

get_screenshot

get_screenshot

Foundations Complete

Sections built:
 - Color Palette (27 swatches)
 - Typography Scale (6 specimens)
 - Spacing Scale (12 blocks)
 - Elevation (4 shadow levels)
 - Border Radius (6 shapes)

[screenshot]
[any visual issues: blank swatches, overlap, clipping]

Phase 5 — Build Base Components (~15 Primitives)

fill: "#FFFFFF"

reusable: true

$--

"Category/Variant"

references/component-specs.md

1. Check the batch response for "unknown properties were ignored" warnings — fix immediately.
2. Call

   get_screenshot

   on the affected section — visually confirm no overlapping elements, no invisible shadows, no broken layouts.
3. If ANY horizontal arrangement shows items stacked/overlapping, the frame is missing

   layout: "horizontal"

   . Fix it before proceeding to the next batch.

Phase 6 — Build Composite Components (~10 Composites)

get_screenshot

snapshot_layout({ problemsOnly: true })

references/component-specs.md

batch_get({ patterns: [{ reusable: true }] })

get_screenshot

snapshot_layout({ problemsOnly: true })

Components Created — [count] reusable

| Category    | Components                              | Count |
|-------------|----------------------------------------|-------|
| Buttons     | Primary, Secondary, Outline, Ghost, Destructive | 5 |
| Inputs      | TextField, Textarea, Select, InputGroup | 4 |
| Typography  | H1, H2, H3, Body, Caption, Label      | 6 |
| Badges      | Default, Success, Warning, Error       | 4 |
| Alerts      | Info, Success, Warning, Error          | 4 |
| Card        | Header + Content + Actions             | 1 |
| Navigation  | Sidebar, Active, Default, SectionTitle | 4 |
| Table       | Wrapper, HeaderRow, DataRow            | 3 |
| ...         | [remaining composites]                 | ... |

[screenshot]
[layout issues from snapshot_layout, if any]

Phase 7 — Build Patterns (Composition Showcases)

1. Form Pattern — Vertical stack of InputGroup refs + Submit button.
2. Data Display Pattern — Table ref with populated rows + Pagination ref.
3. Navigation Pattern — Sidebar ref + Breadcrumbs ref + Tabs ref.
4. Card Layout Pattern — Grid of populated Card refs with images and domain content.

ref

$--

references/screen-patterns.md

get_screenshot

Patterns Complete — 4 composition showcases

 1. Form Pattern       — InputGroup refs + Submit button
 2. Data Display       — Table ref + Pagination ref
 3. Navigation Pattern — Sidebar + Breadcrumbs + Tabs refs
 4. Card Layout        — Grid of populated Card refs

[screenshot]
[any layout or ref issues]

Phase 8 — Create Domain Screens (only if user requests)

ref

$--

1. Call

   find_empty_space_on_canvas({ direction: "right", width: 1440, height: 900, padding: 100 })

   .
2. Insert screen frame at returned position.
3. Build layout with component refs. Customize via

   U(instanceId+"/descendantId", {...})

   .
4. Add domain imagery via

   G()

   .
5. Call

   get_screenshot

   to verify.

references/screen-patterns.md

get_screenshot

Domain Screens — [count] created

 1. [Screen Name] — [brief description]
 2. [Screen Name] — [brief description]
 ...

[screenshots]
[any issues: missing refs, hardcoded values, layout problems]

Phase 8b — Business Logic Screens (only if user provides requirements)

• User flows: "checkout: cart → address → payment → confirmation"
• Feature specs: "CRM with contact list, deal pipeline kanban, activity timeline"
• A PRD or user story document
• Wireframe descriptions: "onboarding wizard with 4 steps"

1. Read existing components:

   batch_get({ patterns: [{ reusable: true }], readDepth: 2 })

   .
2. Read existing tokens:

   get_variables({ filePath })

   .
3. Plan screens based on user requirements — map each user flow or feature to a screen.
4. For each screen: a. Call

   find_empty_space_on_canvas({ direction: "right", width: 1440, height: 900, padding: 100 })

   . b. Insert screen frame at returned position. c. Build layout using existing component

   ref

   instances. d. Customize content via

   U(instanceId+"/descendantId", {...})

   with realistic business data. e. Add imagery via

   G()

   where appropriate. f. Call

   get_screenshot

   to verify.

get_screenshot

Business Logic Screens — [count] created

 1. [Screen Name] — maps to: [which user requirement/flow]
 2. [Screen Name] — maps to: [which user requirement/flow]
 ...

[screenshots]
[any issues or gaps vs requirements]

Phase 9 — Layout Enforcement Pass (MANDATORY)

layout: "horizontal"

batch_get({ filePath, patterns: [{ type: "frame" }], searchDepth: 10, readDepth: 0 })

gap

alignItems

justifyContent

layout

batch_get

layout: "horizontal"

layout: "horizontal"

U("frameId1", { layout: "horizontal" })
U("frameId2", { layout: "horizontal" })
// ... for every frame with gap/alignItems/justifyContent

layout: "vertical"

effect

color

rgba()

#RRGGBBAA

layout: "horizontal"

Phase 10 — Final Verification

1. Visual —

   get_screenshot

   on Foundations, Components, Patterns (and screens if created). Check alignment, spacing, typography, color, overflow.
2. Layout —

   snapshot_layout({ problemsOnly: true })

   to detect clipping/overflow. Fix all.
3. Token audit —

   search_all_unique_properties

   for

   fillColor

   ,

   textColor

   ,

   fontFamily

   ,

   fontSize

   . Replace leaked hex values and raw font sizes with

   $--

   tokens.
4. Component audit —

   batch_get({ patterns: [{ reusable: true }] })

   . Verify ~25 components.
5. Organization audit — Verify no orphan components at document root. All should be under Components section.
6. Fix and re-verify — Re-screenshot affected areas after fixes.
7. Present — Summarize tokens, components, patterns (and screens if created). Show key screenshots.

references/verification-checklist.md

Phase 11 — Canvas Navigation Index

Design System Index
├── Foundations (x, y)
├── Components (x, y)
├── Patterns (x, y)
└── Screens (x, y) — only if screens were created

Phase 12 — Code Export (optional, user-triggered)

• Tailwind version: v3 or v4
• Framework: Next.js or Vite+React

get_variables({ filePath })

batch_get({ patterns: [{ reusable: true }], readDepth: 3, searchDepth: 3 })

get_guidelines("code")

get_guidelines("tailwind")

globals.css

• v3:

  :root

  with HSL values (space-separated, no

  hsl()

  wrapper),

  .dark

  overrides,

  @layer base

  font utilities
• v4:

  @import "tailwindcss"

  ,

  @custom-variant dark

  ,

  :root

  with hex values,

  .dark

  overrides,

  @layer base

  font utilities

tailwind.config.js

hsl(var(--name))

• Next.js:

  layout.tsx

  with

  next/font/google

  loader setting

  --font-primary

  ,

  --font-secondary

  ,

  --font-mono

  CSS variables
• Vite+React:

  <link>

  tags in

  index.html

  loading all three fonts from Google Fonts

• Uses only token-referencing Tailwind classes (no hardcoded hex)
• Has TypeScript interfaces with variant props where applicable
• Accepts and spreads an optional

  className

  prop
• Uses v3 mapped classes (

  bg-primary

  ) or v4 arbitrary values (

  bg-[var(--primary)]

  ) based on the chosen version

1. Deep-read the screen frame:

   batch_get({ nodeIds: [screenId], readDepth: 10, resolveInstances: true })

2. Take a reference screenshot:

   get_screenshot({ nodeId: screenId })

3. Follow Pencil's Component Implementation Workflow (from Step 4's

   get_guidelines("code")

   ):
   • Steps 1A-1C: Extract components, map ALL instances with ALL overrides and descendants
   • Step 2: Create React components using

     get_guidelines("tailwind")

     for property-to-class mapping
   • Step 3: Validate each component with

     get_screenshot

     — pixel-perfect match required
   • Step 4: Integrate into frame, verify instance count and prop completeness
4. Handle screen-level elements: semantic HTML for headings/labels/links, page wrapper, form behavior, icon name conversion, image fills
5. Assemble into a complete page file with all imports
6. Visually verify the rendered page against the Pencil screenshot — fix any discrepancies

references/code-export-guide.md

Critical Rules

batch_get({ patterns: [{ reusable: true }] })

ref

$--

$--font-*

$--radius-*

$--text-*

set_variables

width: "fill_container"

snapshot_layout({ problemsOnly: true })

get_screenshot

C()

G()

Component Inventory

References

• references/pencil-mcp-guide.md

  — Complete Pencil MCP tool reference with examples and operation syntax.

• references/domain-research-guide.md

  — Domain research strategies, color psychology, font pairings, screen inventories.

• references/design-tokens-reference.md

  — Token architecture,

  set_variables

  JSON payloads, ~60 token definitions, industry palettes.

• references/foundations-specs.md

  — Visual foundation documentation: color palette, typography scale, spacing, elevation, radius

  batch_design

  code.

• references/component-specs.md

  — All ~25 component

  batch_design

  operation code with section frame organization.

• references/screen-patterns.md

  — Layout patterns, composition showcases, and domain-specific screen templates.

• references/verification-checklist.md

  — Visual QA, layout checks, token audits, canvas organization verification.

• references/code-export-guide.md

  — Tailwind CSS export: token extraction, v3/v4 templates, Pencil-to-Tailwind class cheatsheet, component translation, framework setup (Next.js / Vite+React).