Pencil Pro
Primäre Auflösungsregel
Dieses Skill muss vor der ersten Verwendung konfiguriert werden.
Wenn der Benutzer „PencilPlaybook-Setup-Assistent ausführen" sagt oder darum bittet, PencilPlaybook einzurichten oder zu konfigurieren:
→ Lies .claude/skills/pencilplaybook/setup.md und folge den dortigen Anweisungen exakt.
Wenn der Benutzer „meinen ersten Bildschirm mit PencilPlaybook erstellen" sagt oder darum bittet, mit dem Design zu beginnen:
→ Lies .claude/skills/pencilplaybook/onboarding.md und folge den dortigen Anweisungen exakt.
Konfigurierte Auflösung: (Setup ausführen, um dies festzulegen)
Wenn ein Bildschirm-Root in einer vorhandenen .pen-Datei nicht deiner konfigurierten Auflösung entspricht, vermerke dies vor der Bearbeitung. Erstelle keine Komponente auf einem falsch dimensionierten Canvas, ohne die Abweichung zu kennzeichnen.
Häufige Ausnahme – Marketingseiten: Designe bei 1440px, unabhängig von deiner App-Auflösung. Marketingseiten werden in variablen Browserbreiten konsumiert – designe bei 1440px, überprüfe bei 390px.
Sitzungsstart (Jede Pencil-Sitzung)
1. get_editor_state() – aktives Dokument und Auswahl prüfen
2. open_document("path/to/your-file.pen") – Zieldatei öffnen
3. get_guidelines(topic="web-app") – Designrichtlinien laden
4. set_variables(<Token-Map unten>) – Marken-Token injizieren
5. get_variables() – Token-Speicherung bestätigen
6. snapshot_layout() – Canvas-Dimensionen überprüfen
Deine Token-Map – führe set_variables mit diesem Objekt zu Beginn jeder Sitzung aus. Variablen bleiben möglicherweise nicht zwischen Claude Code-Sitzungen erhalten.
{
"color-primary": "DEIN_HEX",
"color-primary-dark": "DEIN_HEX",
"color-accent": "DEIN_HEX",
"color-background": "DEIN_HEX",
"color-surface": "DEIN_HEX",
"color-border": "DEIN_HEX",
"color-text": "DEIN_HEX",
"color-text-muted": "DEIN_HEX",
"color-success": "DEIN_HEX",
"color-warning": "DEIN_HEX",
"color-error": "DEIN_HEX",
"font-sans": "DEINE_SCHRIFTART",
"font-mono": "DEINE_SCHRIFTART",
"font-serif": "DEINE_SCHRIFTART",
"spacing-card": "24",
"spacing-gap-sm": "8",
"spacing-gap-md": "16",
"spacing-gap-lg": "24",
"spacing-gap-xl": "32",
"content-max-width": "DEIN_WERT",
"sidebar-width": "DEIN_WERT"
}
Rufe nach set_variables get_variables() auf, um zu bestätigen, dass alle Token gespeichert sind.
Gerüst-Skripte
Neun Gerüst-Skripte, die die häufigsten Layout-Architekturen abdecken. Führe den Setup-Assistenten aus, um die Dimensions- und Farbwerte unten vor der Verwendung auszufüllen.
Gerüst A – App-Dashboard
Metriken, KPIs, Aktivitätsfeed, Überwachung
sidebar=I("root", {name:"Sidebar", width:SCAFFOLD_SIDEBAR_WIDTH, height:SCAFFOLD_CANVAS_HEIGHT, bg:"SIDEBAR_BG", display:"flex", flexDirection:"column"})
pageArea=I("root", {name:"PageArea", width:SCAFFOLD_PAGE_AREA_WIDTH, height:SCAFFOLD_CANVAS_HEIGHT, x:SCAFFOLD_SIDEBAR_WIDTH, bg:"PAGE_BG"})
pageHeader=I("pageArea", {name:"PageHeader", width:SCAFFOLD_PAGE_AREA_WIDTH, height:64, bg:"SURFACE_COLOR", borderBottom:"1px solid BORDER_COLOR", display:"flex", alignItems:"center", px:32})
statsBar=I("pageArea", {name:"StatsBar", y:64, width:SCAFFOLD_PAGE_AREA_WIDTH, height:80, bg:"STATS_BG", display:"flex", alignItems:"center", gap:24, px:32})
contentWrap=I("pageArea", {name:"ContentWrap", y:144, width:SCAFFOLD_PAGE_AREA_WIDTH, height:SCAFFOLD_CONTENT_HEIGHT_A, display:"flex", justifyContent:"center", p:32})
contentInner=I("contentWrap", {name:"ContentInner", width:SCAFFOLD_CONTENT_MAX, display:"flex", flexDirection:"column", gap:24})
Nach dem Gerüst: snapshot_layout() – überprüfe, ob pageArea.width und contentInner.width korrekt sind.
Gerüst B – App-Liste / Warteschlange
Tabellen, Asset-Bibliotheken, Warteschlangen, Benutzerverwaltung
sidebar=I("root", {name:"Sidebar", width:SCAFFOLD_SIDEBAR_WIDTH, height:SCAFFOLD_CANVAS_HEIGHT, bg:"SIDEBAR_BG"})
pageArea=I("root", {name:"PageArea", width:SCAFFOLD_PAGE_AREA_WIDTH, height:SCAFFOLD_CANVAS_HEIGHT, x:SCAFFOLD_SIDEBAR_WIDTH, bg:"PAGE_BG"})
pageHeader=I("pageArea", {name:"PageHeader", width:SCAFFOLD_PAGE_AREA_WIDTH, height:64, bg:"SURFACE_COLOR", borderBottom:"1px solid BORDER_COLOR", display:"flex", alignItems:"center", px:32})
commandStrip=I("pageArea", {name:"CommandStrip", y:64, width:SCAFFOLD_PAGE_AREA_WIDTH, height:52, bg:"SURFACE_COLOR", borderBottom:"1px solid BORDER_COLOR", display:"flex", alignItems:"center", gap:16, px:32})
tableWrap=I("pageArea", {name:"TableWrap", y:116, width:SCAFFOLD_PAGE_AREA_WIDTH, height:SCAFFOLD_CONTENT_HEIGHT_B, display:"flex", justifyContent:"center", px:32, pt:24})
tableInner=I("tableWrap", {name:"TableInner", width:SCAFFOLD_CONTENT_MAX, display:"flex", flexDirection:"column", gap:0})
tableHeader=I("tableInner", {name:"TableHeader", width:SCAFFOLD_CONTENT_MAX, height:40, bg:"TABLE_HEADER_BG", borderBottom:"1px solid BORDER_COLOR", display:"flex", alignItems:"center"})
Gerüst C – App-Detailansicht / Überprüfung
Zweispaltige Detailansichten, Überprüfungsabläufe, nebeneinanderliegende Layouts
sidebar=I("root", {name:"Sidebar", width:SCAFFOLD_SIDEBAR_WIDTH, height:SCAFFOLD_CANVAS_HEIGHT, bg:"SIDEBAR_BG"})
pageArea=I("root", {name:"PageArea", width:SCAFFOLD_PAGE_AREA_WIDTH, height:SCAFFOLD_CANVAS_HEIGHT, x:SCAFFOLD_SIDEBAR_WIDTH, bg:"PAGE_BG"})
pageHeader=I("pageArea", {name:"PageHeader", width:SCAFFOLD_PAGE_AREA_WIDTH, height:64, bg:"SURFACE_COLOR", borderBottom:"1px solid BORDER_COLOR"})
actionBar=I("pageArea", {name:"ActionBar", y:64, width:SCAFFOLD_PAGE_AREA_WIDTH, height:56, bg:"SURFACE_COLOR", borderBottom:"1px solid BORDER_COLOR"})
contentWrap=I("pageArea", {name:"ContentWrap", y:120, width:SCAFFOLD_PAGE_AREA_WIDTH, height:SCAFFOLD_CONTENT_HEIGHT_C, display:"flex", justifyContent:"center"})
contentInner=I("contentWrap", {name:"ContentInner", width:SCAFFOLD_CONTENT_MAX, height:SCAFFOLD_CONTENT_HEIGHT_C, display:"flex", gap:0})
leftPanel=I("contentInner", {name:"LeftPanel", width:SCAFFOLD_LEFT_PANEL, height:SCAFFOLD_CONTENT_HEIGHT_C, bg:"SURFACE_COLOR", borderRight:"1px solid BORDER_COLOR"})
rightPanel=I("contentInner", {name:"RightPanel", width:SCAFFOLD_RIGHT_PANEL, height:SCAFFOLD_CONTENT_HEIGHT_C, bg:"PAGE_BG", p:24, display:"flex", flexDirection:"column", gap:20})
Hinweis: Die linke/rechte Aufteilung beträgt standardmäßig etwa 40/60. Je nach Funktion anpassen – übliche Aufteilungen: 40/60, 38/62, 50/50.
Gerüst D – Marketingseite
Landingpages, Produktseiten – immer 1440px breit, unabhängig vom App-Canvas
navbar=I("root", {name:"Navbar", width:1440, height:72, bg:"SURFACE_COLOR", borderBottom:"1px solid BORDER_COLOR", display:"flex", alignItems:"center", px:80})
heroSection=I("root", {name:"HeroSection", y:72, width:1440, height:600, bg:"HERO_BG", display:"flex", flexDirection:"column", alignItems:"center", justifyContent:"center"})
heroContent=I("heroSection", {name:"HeroContent", width:SCAFFOLD_MARKETING_CONTENT_MAX, display:"flex", flexDirection:"column", alignItems:"center", gap:24})
section1=I("root", {name:"Section1", y:672, width:1440, height:480, bg:"SURFACE_COLOR", display:"flex", flexDirection:"column", alignItems:"center", py:80})
section1Content=I("section1", {name:"Section1Content", width:SCAFFOLD_MARKETING_CONTENT_MAX})
Marketingseiten sind Mobile-First. Designe bei 1440px und überprüfe das Layout bei 390px Breite vor der Übergabe.
Gerüst E – Modal / Dialog
Bestätigungen, zerstörerische Aktionen, Schnellbearbeitungsformulare, seitliche Einschubpanels
Führe zuerst Gerüst A, B oder C aus. Füge dann dieses Modal überlagert über pageArea hinzu – nicht in den Root einfügen.
backdrop=I("pageArea", {name:"ModalBackdrop", width:SCAFFOLD_PAGE_AREA_WIDTH, height:SCAFFOLD_CANVAS_HEIGHT, bg:"rgba(0,0,0,0.48)", display:"flex", alignItems:"center", justifyContent:"center"})
modal=I("backdrop", {name:"Modal", width:480, bg:"SURFACE_COLOR", borderRadius:8, border:"1px solid BORDER_COLOR", display:"flex", flexDirection:"column", overflow:"hidden"})
modalHeader=I("modal", {name:"ModalHeader", height:56, px:24, display:"flex", alignItems:"center", justifyContent:"space-between", borderBottom:"1px solid BORDER_COLOR"})
modalBody=I("modal", {name:"ModalBody", px:24, py:20, display:"flex", flexDirection:"column", gap:16})
modalFooter=I("modal", {name:"ModalFooter", height:60, px:24, display:"flex", alignItems:"center", justifyContent:"flex-end", gap:12, borderTop:"1px solid BORDER_COLOR"})
Nach dem Gerüst: snapshot_layout() – bestätige, dass das Modal sichtbar und zentriert ist. Passe die Modalbreite je nach Anwendungsfall an: 380px (kompakte Bestätigung), 480px (Standardformular), 600px (breites Formular), 720px (Detailansicht/Vorschau).
Gerüst F – Assistent / Schrittanzeige
Mehrschritt-Formulare, Onboarding-Abläufe, Einrichtungssequenzen, Checkout
sidebar=I("root", {name:"Sidebar", width:SCAFFOLD_SIDEBAR_WIDTH, height:SCAFFOLD_CANVAS_HEIGHT, bg:"SIDEBAR_BG"})
pageArea=I("root", {name:"PageArea", width:SCAFFOLD_PAGE_AREA_WIDTH, height:SCAFFOLD_CANVAS_HEIGHT, x:SCAFFOLD_SIDEBAR_WIDTH, bg:"PAGE_BG"})
pageHeader=I("pageArea", {name:"PageHeader", width:SCAFFOLD_PAGE_AREA_WIDTH, height:64, bg:"SURFACE_COLOR", borderBottom:"1px solid BORDER_COLOR", display:"flex", alignItems:"center", px:32})
stepperBar=I("pageArea", {name:"StepperBar", y:64, width:SCAFFOLD_PAGE_AREA_WIDTH, height:60, bg:"SURFACE_COLOR", borderBottom:"1px solid BORDER_COLOR", display:"flex", alignItems:"center", justifyContent:"center"})
contentWrap=I("pageArea", {name:"ContentWrap", y:124, width:SCAFFOLD_PAGE_AREA_WIDTH, height:SCAFFOLD_CONTENT_HEIGHT_F, display:"flex", justifyContent:"center", px:32, pt:32})
contentInner=I("contentWrap", {name:"ContentInner", width:640, display:"flex", flexDirection:"column", gap:24})
actionFooter=I("pageArea", {name:"ActionFooter", y:SCAFFOLD_WIZARD_FOOTER_Y, width:SCAFFOLD_PAGE_AREA_WIDTH, height:72, bg:"SURFACE_COLOR", borderTop:"1px solid BORDER_COLOR", display:"flex", alignItems:"center", justifyContent:"space-between", px:32})
Hinweis: ContentInner ist standardmäßig 640px breit – fokussiertes einspaltiges Formular. Zurück-Button links, Weiter/Absenden rechts in ActionFooter (justifyContent:"space-between").
Gerüst G – Mobiler Bildschirm
390×844px (iPhone 14 Standard). Verwende dies für alle mobilen Bildschirme – fest codiert, keine Setup-Werte erforderlich.
statusBar=I("root", {name:"StatusBar", width:390, height:44, bg:"PAGE_BG"})
navBar=I("root", {name:"NavBar", y:44, width:390, height:56, bg:"SURFACE_COLOR", borderBottom:"1px solid BORDER_COLOR", display:"flex", alignItems:"center", px:16})
scrollContent=I("root", {name:"ScrollContent", y:100, width:390, height:688, bg:"PAGE_BG", display:"flex", flexDirection:"column", overflow:"hidden"})
contentPad=I("scrollContent", {name:"ContentPad", width:390, display:"flex", flexDirection:"column", gap:16, px:16, pt:16})
bottomNav=I("root", {name:"BottomNav", y:788, width:390, height:56, bg:"SURFACE_COLOR", borderTop:"1px solid BORDER_COLOR", display:"flex", alignItems:"center", justifyContent:"space-around"})
Hinweis: Entferne statusBar und setze navBar.y=0, wenn kein System-Chrome angezeigt wird. Entferne bottomNav für Apps ohne Tab-Navigation. Touch-Ziele innerhalb dieses Gerüsts müssen ≥44×44px sein.
Gerüst H – Formular / Dateneingabe
Einstellungsseiten, Profilbearbeitung, umfangreiche Dateneingabe – einspaltiges, zentriertes Formular
sidebar=I("root", {name:"Sidebar", width:SCAFFOLD_SIDEBAR_WIDTH, height:SCAFFOLD_CANVAS_HEIGHT, bg:"SIDEBAR_BG"})
pageArea=I("root", {name:"PageArea", width:SCAFFOLD_PAGE_AREA_WIDTH, height:SCAFFOLD_CANVAS_HEIGHT, x:SCAFFOLD_SIDEBAR_WIDTH, bg:"PAGE_BG"})
pageHeader=I("pageArea", {name:"PageHeader", width:SCAFFOLD_PAGE_AREA_WIDTH, height:64, bg:"SURFACE_COLOR", borderBottom:"1px solid BORDER_COLOR", display:"flex", alignItems:"center", justifyContent:"space-between", px:32})
formWrap=I("pageArea", {name:"FormWrap", y:64, width:SCAFFOLD_PAGE_AREA_WIDTH, height:SCAFFOLD_CONTENT_HEIGHT_H, display:"flex", justifyContent:"center", px:32, pt:32})
formInner=I("formWrap", {name:"FormInner", width:600, display:"flex", flexDirection:"column", gap:28})
formSection=I("formInner", {name:"FormSection1", display:"flex", flexDirection:"column", gap:16})
formActions=I("formInner", {name:"FormActions", display:"flex", gap:12, justifyContent:"flex-end"})
Hinweis: FormInner-Breite standardmäßig 600px. Verwende 480px für einfache Abläufe, 800px für breite zweispaltige Layouts. Füge weitere FormSection-Knoten innerhalb von formInner hinzu, um verwandte Felder zu gruppieren.
Gerüst I – Leerer Zustand / Onboarding-Schritt
Null-Daten-Ansichten, Erste-Verwendung-Aufforderungen, Feature-Entdeckung, leere Bildschirme
sidebar=I("root", {name:"Sidebar", width:SCAFFOLD_SIDEBAR_WIDTH, height:SCAFFOLD_CANVAS_HEIGHT, bg:"SIDEBAR_BG"})
pageArea=I("root", {name:"PageArea", width:SCAFFOLD_PAGE_AREA_WIDTH, height:SCAFFOLD_CANVAS_HEIGHT, x:SCAFFOLD_SIDEBAR_WIDTH, bg:"PAGE_BG"})
pageHeader=I("pageArea", {name:"PageHeader", width:SCAFFOLD_PAGE_AREA_WIDTH, height:64, bg:"SURFACE_COLOR", borderBottom:"1px solid BORDER_COLOR"})
emptyCenter=I("pageArea", {name:"EmptyCenter", y:64, width:SCAFFOLD_PAGE_AREA_WIDTH, height:SCAFFOLD_CONTENT_HEIGHT_H, display:"flex", alignItems:"center", justifyContent:"center"})
emptyContent=I("emptyCenter", {name:"EmptyContent", width:400, display:"flex", flexDirection:"column", alignItems:"center", gap:20})
illustrationArea=I("emptyContent", {name:"IllustrationArea", width:200, height:160, borderRadius:12, bg:"SURFACE_COLOR", border:"1px solid BORDER_COLOR", display:"flex", alignItems:"center", justifyContent:"center"})
textStack=I("emptyContent", {name:"TextStack", width:400, display:"flex", flexDirection:"column", alignItems:"center", gap:8})
emptyActions=I("emptyContent", {name:"EmptyActions", display:"flex", gap:12})
Hinweis: Ersetze IllustrationArea durch G("illustrationArea", "ai", "dein Prompt"), um eine Illustration zu generieren. Halte den Text für den leeren Zustand kurz: eine Überschrift (16–18px), eine unterstützende Zeile (14px, dezent), einen primären CTA.
Kern-Workflows
Workflow 1: Canvas-Archäologie
Verwende bei: „Was ist in dieser …