diff --git a/packages/pen-ai-skills/skills/phases/generation/jsonl-format-simplified.md b/packages/pen-ai-skills/skills/phases/generation/jsonl-format-simplified.md index 04ec0d6c2..521fee2cc 100644 --- a/packages/pen-ai-skills/skills/phases/generation/jsonl-format-simplified.md +++ b/packages/pen-ai-skills/skills/phases/generation/jsonl-format-simplified.md @@ -9,9 +9,9 @@ budget: 1700 category: base --- -CRITICAL: This skill describes the JSONL fallback format. If a separate `OUTPUT FORMAT — EMIT AS TOOL CALL(S)` block (teaching `` tags) appears later in the system prompt, FOLLOW THAT block — emit `` tags whose payloads are element-tool calls or `batch_design`. Use the JSONL form below ONLY when no `` instruction is present. Either way, do NOT mix prose with the structured output, do not use `[TOOL_CALL]` or `{tool => ...}` legacy syntax, and do not output JSON outside its block. +CRITICAL — OUTPUT-MODE PRIORITY: If a separate `OUTPUT FORMAT — EMIT AS TOOL CALL(S)` block (teaching `` tags) appears later in the system prompt, FOLLOW THAT block — emit `` tags whose payloads are element-tool calls or `batch_design`. Use the JSONL form (the EXAMPLE block at the bottom of this skill) ONLY when no `` instruction is present. Either way, never use `[TOOL_CALL]` or `{tool => ...}` legacy syntax, and never mix prose with the structured output. -Generate a UI section as a nested JSON tree. Output a ```json block with a single root object containing nested "children" arrays. +The TYPES / RULES / DESIGN SYSTEM TOKENS sections below describe the underlying PenNode schema and apply to EITHER mode — they tell you the shape of node arguments inside an `` call, and the shape of nodes in raw JSONL. TYPES: frame (width,height,layout,gap,padding,justifyContent,alignItems,cornerRadius,fill,children), rectangle (width,height,cornerRadius,fill), text (content,fontFamily,fontSize,fontWeight,fill,width,textAlign), icon_font (iconFontName,width,height,fill) @@ -26,7 +26,7 @@ RULES: - Text: never set height. Use width="fill_container" for wrapping text. - Icons: use icon_font with iconFontName (lucide names: search, bell, user, heart, star, plus, x, check, chevron-right, settings). Sizes: 16/20/24px. - Buttons: frame with padding=[12,24] containing a text child. -- No emoji characters. No markdown. No explanation. No tool calls. +- No emoji characters. No markdown. No explanation outside the structured output. DESIGN SYSTEM TOKENS — prefer refs over literals; the renderer resolves them against the user's seeded palette (or a default light palette when un-seeded), so refs are SAFE even on a fresh document. @@ -36,6 +36,10 @@ DESIGN SYSTEM TOKENS — prefer refs over literals; the renderer resolves them a USE refs for standard semantic colors and typography sizes/weights/line-heights that match the scale above. KEEP literal hex / numbers for brand-specific colors not in the palette, off-scale pixel values, and "white text on accent" (`#FFFFFF`). +— JSONL FALLBACK MODE — the section below applies ONLY when there is no `` instruction earlier in the prompt; if `` mode is in effect, ignore the EXAMPLE below and emit `` tags instead. + +Generate a UI section as a nested JSON tree. Output a single ```json block with a single root object containing nested "children" arrays. + EXAMPLE: ```json diff --git a/packages/pen-ai-skills/skills/phases/generation/jsonl-format.md b/packages/pen-ai-skills/skills/phases/generation/jsonl-format.md index f33fd1b2d..3734d141a 100644 --- a/packages/pen-ai-skills/skills/phases/generation/jsonl-format.md +++ b/packages/pen-ai-skills/skills/phases/generation/jsonl-format.md @@ -8,9 +8,9 @@ budget: 1700 category: base --- -CRITICAL: This skill describes the JSONL fallback format. If a separate `OUTPUT FORMAT — EMIT AS TOOL CALL(S)` block (teaching `` tags) appears later in the system prompt, FOLLOW THAT block — emit `` tags whose payloads are element-tool calls or `batch_design`. Use the JSONL form below ONLY when no `` instruction is present. Either way, do NOT mix prose with the structured output, do not use `[TOOL_CALL]` or `{tool => ...}` legacy syntax, and do not output JSON outside its block. +CRITICAL — OUTPUT-MODE PRIORITY: If a separate `OUTPUT FORMAT — EMIT AS TOOL CALL(S)` block (teaching `` tags) appears later in the system prompt, FOLLOW THAT block — emit `` tags whose payloads are element-tool calls or `batch_design`. Use the JSONL form (the FORMAT + ```json example sections at the bottom of this skill) ONLY when no ``instruction is present. Either way, never use`[TOOL_CALL]`or`{tool => ...}` legacy syntax, and never mix prose with the structured output. -PenNode flat JSONL engine. Output a ```json block with ONE node per line. +The TYPES / RULES / DESIGN SYSTEM TOKENS sections below describe the underlying PenNode schema and apply to EITHER mode — they tell you the shape of node arguments inside an `` call, and the shape of nodes in raw JSONL. TYPES: frame (width,height,layout,gap,padding,justifyContent,alignItems,clipContent,cornerRadius,fill,stroke,effects), rectangle, ellipse, text (content,fontFamily,fontSize,fontWeight,fontStyle,fill,width,textAlign,textGrowth,lineHeight,letterSpacing), icon_font (iconFontName,width,height,fill), path (d,width,height,fill,stroke), image (width,height,imageSearchQuery,imagePrompt). imagePrompt: describe subject+scene+style, NEVER mention background type (transparent/white/plain). Match composition to aspect ratio. @@ -43,7 +43,9 @@ DESIGN SYSTEM TOKENS — prefer refs over literals so output respects the user's USE refs for: standard semantic colors (page bg, surfaces, text levels, borders, accent, alerts, charts), and typography sizes/weights/line-heights that match the scale above. KEEP literal hex / numbers for: brand-specific colors not in the palette (custom logo color, off-palette accent), pixel values that don't match the typography scale, and "white text on accent" (`#FFFFFF`). -FORMAT: \_parent (null=root, else parent-id). Parent before children. +— JSONL FALLBACK MODE — the section below applies ONLY when there is no `` instruction earlier in the prompt; if `` mode is in effect, ignore the FORMAT section and the ```json example below and emit `` tags instead. + +FORMAT: \_parent (null=root, else parent-id). Parent before children. Output a single ```json block with ONE node per line. ```json {"_parent":null,"id":"root","type":"frame","name":"Hero","width":"fill_container","height":"fit_content","layout":"vertical","gap":24,"padding":[48,24],"fill":[{"type":"solid","color":"$color-bg-deep"}]}