Skip to content
LiveNew tools this week
Submit
AIMarketly
pen-design logo

pen-design

Guide for working with Pencil (.pen) design files. Use this skill for reading, creating, or modifying UI layouts, typography, or styling in .pen design files.

NeverSight/skills_feed0installs214starsOther

SKILL.md

Full skill instructions

PEN Design Format

Work with .pen design files efficiently.

Quick Reference

Root Structure

{
  "version": "2.6",
  "children": [...],     // Design elements
  "themes": {...},       // Theme definitions (e.g., Light/​Dark)
  "variables": {...}     // Design tokens
}

Element Types

TypePurposeKey Properties
frameContainer/​layoutlayout, children, gap, padding, reusable
textTypographycontent, fontFamily, fontSize, fontWeight
rectangleBasic shapewidth, height, fill, cornerRadius
pathVector graphicsgeometry (SVG path data)
imageRaster graphicsurl, mode
refComponent instanceref (source ID), descendants (overrides)
icon_fontIconiconFontName, iconFontFamily (e.g., "lucide")
promptAI generationmodel, content

Token System

Tokens use $-- prefix:

  • Colors: $--primary, $--foreground, $--background, $--border
  • Semantic: $--color-success, $--color-warning, $--color-error
  • Fonts: $--font-primary, $--font-secondary
  • Radii: $--radius-none, $--radius-m, $--radius-pill

Layout

PropertyValues
layout"none" (absolute), "horizontal", "vertical"
justifyContentstart, center, end, space_between
alignItemsstart, center, end, stretch

Sizing

  • Fixed: 360
  • Flex: "fill_container" or "fill_container(360)"
  • Fit: "fit_content" or "fit_content(717)"

Common Patterns

For detailed patterns and examples

See references/​patterns.md

For complete JSON schema

See references/​schema.json

Manipulation Guidelines

  1. Generate unique IDs - 5 alphanumeric chars (e.g., "xCEfn")
  2. Use tokens - Prefer $--primary over hardcoded colors
  3. Component naming - Category/​Variant (e.g., "Button/​Large/​Primary")
  4. Reusable components - Add "reusable": true to source, use ref for instances
  5. Override properties - Use descendants object keyed by child ID