Give your product screens a frame worth sharing. Compose phone, tablet and browser showcases, bring your own screenshots and export sharp images with an editable source.
Generated example · fictional content
High-resolution PNG from the browser + portable SVGEditable studio HTML + embedded project JSONThree original product directions + source image embeddingSource licenses + SHA-256 delivery manifestDesigners, founders and makers presenting authorized product screenshots.
Original stylized 2D frames. Screens are images, not interactive apps. No branded hardware model, 3D or video renderer.
A workspace in focus, a quieter daily practice or a listening experience in color. Give every product a scene of its own.
Compose 1–4 phone, tablet or browser frames in duo, hero or gallery layouts.
Import your screenshots, choose cover or contain, and edit the message, palette and device order.
Make wide, square and portrait compositions with optional transparent backgrounds.
Export PNG at up to 3840 px, SVG, project JSON and a portable editable studio.
Original stylized 2D frames. Screens are images, not interactive apps. No branded hardware model, 3D or video renderer.
FROM PACKAGE TO FIRST RESULT
A workspace in focus, a quieter daily practice or a listening experience in color. Give every product a scene of its own.
Your product, beautifully in the frame
Use Device Showcase Studio at .agents/skills/device-showcase-studio. Read SKILL.md. Create a product showcase using my owned screenshots. Confirm product message and destination, choose the right device types and screen crop, review three formats and export actual PNG/SVG plus an editable project. Ask for essential missing facts, preserve unknowns, and prepare a reviewed input. Check dependencies, generate into a new folder, inspect the actual files and explain any failed checks. You may open the bundled local studio for editing. Do not publish or purchase external services.Copy this request to your agent after installing the package. The local studio runs on your computer; the public preview is an example, not a hosted generation service.
Unzip into a new folder and open the studio directly. Choose an agent below if you would like help reviewing sources or writing your own content.
Package folder .agents/skills/device-showcase-studio
Download and unzip the package into the folder above. Keep all its files together, with SKILL.md directly inside that folder.
Downloads require a verified account and purchase access. Choose a new folder if this Skill is already installed.
Open studio.html, choose a direction and import your screenshots. Edit the message and composition, preview the formats, then export PNG or SVG and save the editable project.
Browser editing and portable exports need no dependency installation. Save HTML and project JSON to keep your work. The optional command-line builder is described below.
Read SKILL.md, review the generator and check its runtime requirements before running:
cd .agents/skills/device-showcase-studio
node scripts/build.mjs --input examples/default.json --output ./my-showcaseOpen studio.html, choose a direction and import your screenshots. Edit the message and composition, preview the formats, then export PNG or SVG and save the editable project.
Original stylized 2D frames. Screens are images, not interactive apps. No branded hardware model, 3D or video renderer.
If my-showcase already exists, change the output to ./my-showcase-2. Existing files are never overwritten.
Use Device Showcase Studio at .agents/skills/device-showcase-studio. Read SKILL.md and review scripts/build.mjs. Run examples/default.json into a new output folder and show me all generated files. Keep fictional sample content clearly labeled.
Tried this workflow? Help others decide with an honest review.
The listed individual package price is USD 4.99. Premium downloads require a confirmed purchase or active membership. Your agent subscription, model access and external provider credits are separate.
This release lists Codex, Claude Code, Cursor as intended installation hosts. Check the package’s dependencies and permissions before running it. These labels do not certify that every workflow has been tested in every agent.
The documented 1.0.0 workflow lists: High-resolution PNG from the browser + portable SVG; Editable studio HTML + embedded project JSON; Three original product directions + source image embedding; Source licenses + SHA-256 delivery manifest. Some files or exports are optional; follow the package’s setup and inspect the delivered result.
Original stylized 2D frames. Screens are images, not interactive apps. No branded hardware model, 3D or video renderer.
