More room for your next idea. Membership from $9.99/month.Take a look

Product Cutaway Studiov1.0.0

Tell the product story from the inside out. Create original parametric component artwork, an interactive assembled/exploded viewer and three designed compositions, then export editable SVG, high-resolution PNG and an actual three-page PDF.

No reviews yetFeatured

See what you can make

Jump to a momentExplore the workflow
Made with this SkillAn interactive product anatomy and three export compositions

Six original components · three compositions · real SVG, PNG and PDF

Open full example

What you get

An interactive product anatomy and three export compositions

What you can make

  • Create a component story with assembled, exploded and parts-sheet views.
  • Adjust separation, isolate components, switch palettes and download the current SVG.
  • Export three designed compositions as editable SVG, high-resolution PNG and print PDF.
Explore delivered files7 groups
  • index.html
  • hero.svg + .png
  • exploded.svg + .png
  • parts-sheet.svg + .png
  • print.pdf + parts.csv + specs.md
  • input.json + quality.json + delivery-manifest.json
  • font notices

Good fit

Designers and marketers explaining a stacked concept object or product anatomy.

DesignerMarketerCreator

Know the limits

Shape presets are conceptual, not CAD; quantities and mass are declared rather than measured.

About this skill

Capabilities: 3–12 component types with five original shape presets, assembled/exploded/parts-sheet views, separation slider, three palettes, keyboard component selection, inspection and isolation, label controls, current-state SVG download and quantity-weighted declared mass totals.

Deliverables: the fictional six-part ARC / LIGHT study, interactive HTML workspace, three editable SVGs, three 1920 × 2400 PNGs, a three-page 480 × 600 pt PDF, parts CSV, concept notes, editable input, renderer metadata, font notices and a SHA-256 manifest.

Read the full workflow

First run: Node.js 22+ with pinned sharp 0.35.5 and pdf-lib 1.17.1. Run npm ci --ignore-scripts, then node scripts/build-cutaway.mjs --input examples/product.json --demo --output ./cutaway-studio. Inspect the generated workspace and every exported composition.

Validation: actual SVG rasterization and decoded PNG dimensions, actual PDF creation and page rendering, independent quantity-weighted totals, browser selection/isolation/reset, palettes/labels/separation, real current-state SVG download, 390px layout and deterministic file hashes.

Version 1.0.0: original MIT workflow and vector compositions with separately licensed OFL fonts. This is a schematic design study, not photorealistic rendering or engineering CAD. Materials and masses are illustrative example data; manufacturing and safety are not validated. PDF pages embed rendered images; separate SVGs remain editable. $4.99 one-time; active Premium includes this package.

Read skill facts →Choose a skill by task →
Product cutaways

FROM PACKAGE TO FIRST RESULT

Your first product story, layer by layer.

Explore ARC / LIGHT: an original six-part lamp concept with a clear component story, three compositions and actual print/image files.

View example result
US$4.99 · MIT licenseNode.js 22+ · sharp 0.35.5 / pdf-lib 1.17.1 · offlineNo API key or paid provider
  1. 01

    Choose your agent

    These steps use a project folder. Open the project in your agent and run terminal commands from its root.

    Codex directory guide

    Package folder .agents/skills/product-cutaway-studio

  2. 02

    Add the package

    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.

  3. 03

    Run the included sample

    Manual sample commands and technical details

    Read SKILL.md, review the generator and check its runtime requirements before running:

    cd .agents/skills/product-cutaway-studio
npm ci --ignore-scripts
node scripts/build-cutaway.mjs --input examples/product.json --demo --output ./cutaway-studio
    Your first result

    Select and isolate a component, reset it, adjust separation, hide labels and switch palettes. Download your current SVG and confirm its state. Open all three full-resolution PNGs and PDF pages; reconcile declared quantities and mass with parts.csv.

    Node.js 22+ with sharp 0.35.5 and pdf-lib 1.17.1, tested on 24.15.0. No image API or paid renderer. Shape presets suit stacked concept objects; custom geometry needs artwork adaptation and visual review. Values are declared, not measured. PDF is image-based; editable artwork is supplied as separate SVGs.

    If cutaway-studio already exists, change the output to ./cutaway-studio-2. Existing files are never overwritten.

    Prefer to ask your agent?

    Use Product Cutaway Studio at .agents/skills/product-cutaway-studio. Read SKILL.md and review scripts/build-cutaway.mjs. Run examples/product.json into a new output folder and show me all generated files. Keep fictional sample content clearly labeled.

Ready to use your own facts?

Copy examples/product.json to a new input file, replace all fictional facts, and generate into a new folder. Review the content before using or publishing it; the generator does not independently verify claims.

Reviews0

Share your first result

Tried this workflow? Help others decide with an honest review.

Before you choose this Skill

How do I get Product Cutaway Studio?

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.

Compare access and pricing
Which agents can use this skill?

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.

Codex setupClaude Code setupCursor setup
What files can this workflow generate?

The documented 1.0.0 workflow lists: index.html; hero.svg + .png; exploded.svg + .png; parts-sheet.svg + .png; print.pdf + parts.csv + specs.md; input.json + quality.json + delivery-manifest.json; font notices. Some files or exports are optional; follow the package’s setup and inspect the delivered result.

Review all deliverablesInspect the working example
What should I check before using the result?

Node.js 22+ with sharp 0.35.5 and pdf-lib 1.17.1, tested on 24.15.0. No image API or paid renderer. Shape presets suit stacked concept objects; custom geometry needs artwork adaptation and visual review. Values are declared, not measured. PDF is image-based; editable artwork is supplied as separate SVGs.

Read the installation guideReview third-party notices

More skills to explore

View all skills
$4.99One-time purchase