Create a Product Cutaway with Editable Artwork and Print Files
Turn a reviewed component list into an interactive product schematic, three editable posters, PNG exports and a three-page PDF. Separate visual coordinates from physical specifications.
Fastest way
Ask your AI to do it
Paste this into the AI agent you already use:
Use Product Cutaway Studio for an owned or permitted product concept. Ask for 3–12 component types, roles, materials, quantities and the source of any declared mass. Separate drawing coordinates from physical measurements. Generate into a fresh folder, check labels and interactions, inspect all three PNGs and PDF pages, and reconcile quantity-weighted totals. Deliver editable SVG and input JSON; describe it as a schematic, not verified CAD or repair instructions.
What is a product cutaway presentation?
Product Cutaway Studio illustrates assembled and separated components using supported geometric shapes. It delivers three SVGs, three 1920 × 2400 PNGs, a three-page PDF, a parts CSV and editable input. It is a schematic storytelling workflow, not verified CAD, a photoreal render or repair guidance.
Prepare components and their stated sources
- Supply an owned or permitted concept with 3–12 component types, names, roles, material labels, quantities and any declared mass per item.
- Read references/schema.md. Choose dome, cylinder, cone, plate or ring and use width, height and spacing as drawing coordinates, not measured product dimensions.
- Label illustrative values. The publishApproved flag records an operator's review; it does not independently verify permissions, safety or specifications.
Plan three complementary views
An illustrative lamp concept can use an assembled hero for recognition, an exploded poster for component roles and a parts sheet for comparison. Keep names short and position leaders deliberately. More than nine types or long labels may require editing the sheet layout in drawing.js; the input range alone does not guarantee readable artwork.
Export the fictional design study
From the installed package folder, use Node.js 22+; the reviewed runtime uses Node.js 24. Install the pinned sharp and pdf-lib dependencies first. sharp needs a supported platform binary. The fictional input requires --demo; use a fresh output folder and no paid model or CAD service.
Read this release’s setup before running the example
Confirm installation and invocation in your host
npm install --ignore-scripts
node scripts/build-cutaway.mjs --input examples/product.json --output ./practice-cutaway --demoInspect the artwork and quantity-weighted totals
- Open index.html on desktop and phone. Test separation, component selection, isolation, palette, labels, reset and the current SVG download.
- Inspect all three full-size PNGs and all three PDF pages for overlapping labels, cropped leaders and missing glyphs. The PDF embeds raster images; editable vectors are separate SVG files.
- Reconcile parts.csv and quality.json with input.json. A declared total uses quantity multiplied by declared mass per item; it does not establish a measured physical weight.
Inspect the current example output → — Compare the visible result with the exported files and checks described in this section.
Deliver a clear concept, not an engineering certificate
Retain editable SVGs, input JSON, concept notes, actual PNG/PDF exports and hashes together. Edit the source and regenerate to keep formats consistent. Preserve font notices. For a presentation, pair approved visuals with Presentation Deck Builder; manufacturing, dimensions, assembly and electrical safety require qualified independent validation.
Present the reviewed design study — Keep concept assumptions and source evidence visible in the deck.