What problem does it solve? Deciding on a UI layout requires comparing visual options, but iterating directly inside a design tool is slow. This Skill lets an agent generate HTML/CSS mockup variants, render them as comparable screenshots across viewports, and export the approved variant as an SVG importable into a self-hosted Penpot instance as the official design record. ## Core Features & Use Cases - Variant rendering: Renders every HTML file in a variants directory to PNG screenshots at multiple viewports (e.g., 1440x900 and 390x844) using Playwright and headless Chromium. - SVG export for Penpot: Serializes the approved variant's rendered DOM to SVG via dom-to-svg loaded from esm.sh, with resources inlined as data URIs. - Automated Penpot import: Logs into a self-hosted Penpot once via a persistent browser profile, then creates a file and pastes the SVG as native editable layers using a synthetic paste event. - Use Case: Ask the agent to mock up three sidebar layout options for a dashboard; it renders screenshots for comparison, and after you approve one, exports it to the Drafts project in Penpot. ## Quick Start Ask the agent to prototype two layout variants of a settings page in HTML, render screenshots at desktop and mobile widths, and export the one you approve to Penpot.
