JSX-Renderer
OpenPencil verwendet JSX als Sprache zur Designerstellung. LLMs haben Millionen von React-Komponenten gesehen — ein Layout als <Frame><Text> zu beschreiben ist natürlich, kein spezielles Training nötig. Jedes Token zählt, wenn ein KI-Agent Dutzende von Operationen durchführt, und JSX ist die kompakteste deklarative Darstellung.
JSX ist auch diff-fähig. Wenn eine KI ein Design ändert, ist die Änderung ein JSX-Diff — lesbar, überprüfbar, versionierbar.
Designs erstellen
Das render-Werkzeug (verfügbar im KI-Chat, MCP und CLI eval) akzeptiert JSX:
<Frame name="Card" w={320} h="hug" flex="col" gap={16} p={24} bg="#FFF" rounded={16}>
<Text size={18} weight="bold">Card Title</Text>
<Text size={14} color="#666">Description text</Text>
</Frame>Im MCP-Server und KI-Chat akzeptiert das render-Werkzeug JSX-Strings direkt. Im CLI verwendest du den export-Befehl für die umgekehrte Richtung — Designs als JSX exportieren.
Elemente
Alle Knotentypen sind als JSX-Elemente verfügbar:
| Element | Erstellt | Aliasse |
|---|---|---|
<Frame> | Frame (Container, unterstützt Auto-Layout) | <View> |
<Rectangle> | Rechteck | <Rect> |
<Ellipse> | Ellipse / Kreis | |
<Text> | Textknoten (Kinder werden zum Textinhalt) | |
<Line> | Linie | |
<Star> | Stern | |
<Polygon> | Polygon | |
<Vector> | Vektorpfad | |
<Group> | Gruppe | |
<Section> | Abschnitt |
Stil-Props
Kompakte Kurzschreibweisen, inspiriert von Tailwinds Benennung.
Layout
| Prop | Beschreibung |
|---|---|
flex | "row" oder "col" — aktiviert Auto-Layout |
gap | Abstand zwischen Kindern |
wrap | Kinder in nächste Zeile umbrechen |
rowGap | Gegenachsen-Abstand beim Umbrechen |
justify | "start", "end", "center", "between" |
items | "start", "end", "center", "stretch" |
p, px, py, pt, pr, pb, pl | Innenabstand |
Größe & Position
| Prop | Beschreibung |
|---|---|
w, h | Breite/Höhe — Zahl, "fill" oder "hug" |
minW, maxW, minH, maxH | Größenbeschränkungen |
x, y | Position |
Erscheinungsbild
| Prop | Beschreibung |
|---|---|
bg | Hintergrundfüllung (Hex-Farbe) |
fill | Alias für bg |
stroke | Konturfarbe |
strokeWidth | Konturbreite (Standard: 1) |
rounded | Eckenradius (oder roundedTL, roundedTR, roundedBL, roundedBR) |
cornerSmoothing | iOS-artig abgerundete Ecken (0–1) |
opacity | 0–1 |
shadow | Schlagschatten (z.B. "0 4 8 #00000040") |
blur | Ebenen-Unschärferadius |
rotate | Rotation in Grad |
blendMode | Mischmodus |
overflow | "hidden" oder "visible" |
Typografie
| Prop | Beschreibung |
|---|---|
size / fontSize | Schriftgröße |
font / fontFamily | Schriftfamilie |
weight / fontWeight | "bold", "medium", "normal" oder Zahl |
color | Textfarbe |
textAlign | "left", "center", "right", "justified" |
Als JSX exportieren
Bestehende Designs zurück in JSX konvertieren:
open-pencil export design.fig -f jsx # OpenPencil-Format
open-pencil export design.fig -f jsx --style tailwind # Tailwind-KlassenDer Roundtrip funktioniert: Exportiere ein Design als JSX, bearbeite den Code, rendere es zurück.
Visuelles Diffing
Da Designs als JSX darstellbar sind, werden Änderungen zu Code-Diffs:
<Frame name="Card" w={320} flex="col" gap={16} p={24} bg="#FFF">
- <Text size={18} weight="bold">Old Title</Text>
+ <Text size={24} weight="bold" color="#1D1B20">New Title</Text>
<Text size={14} color="#666">Description</Text>
</Frame>Das macht Designänderungen in Pull Requests überprüfbar, in der Versionskontrolle nachverfolgbar und in der CI auditierbar.