Build domain-specific screens for a Pencil Design System. Creates 3-5 screens using component refs based on domain requirements. Optional phase — only runs if user requests screens.
Build 3-5 domain-specific screens using component refs. Only runs if the user explicitly requests screens.
layout: "vertical" or layout: "horizontal" — no exceptions.batch_design, screenshot and check for overlap — fix immediately.ref instance — never recreate component internals..pen file is open (get_editor_state)get_variables)batch_get({ patterns: [{ reusable: true }] }))Call get_guidelines("design-system") — use Section 10 (Screen Layout Patterns A–D) as layout reference:
layout: "horizontal", sidebar 240pxlayout: "vertical", full-width sectionsFor each screen:
find_empty_space_on_canvas({ direction: "right", width: 1440, height: 900, padding: 100 }) to get coordinatesscreen=I("document", { type: "frame", name: "[Screen Name]", width: 1440, height: 900, x: X, y: Y, layout: "[vertical or horizontal]", fill: "$--background", clip: true })
U(instanceId+"/descendantId", {...})G(imageFrame, "stock", "[domain keyword]")get_screenshot to verifySee references/screen-patterns.md → Domain Screen Templates for domain-specific screen blueprints:
Before each screen:
find_empty_space_on_canvasbatch_get({ patterns: [{ reusable: true }] })After each screen:
get_screenshot — no overlapping elements$-- tokens)ref instances)Log screenshots of all screens. Continue automatically to verification.