Before You Cut

Inspiration

Throughout the hackathon description, I kept seeing one aim: to reduce the loss and dissatisfaction of buying the wrong dress by letting people see how it looks first. But let's be honest, if we buy the wrong dress, most of the time we can return it. If we make a bad dress, we can't. A style that doesn't come together, fabrics that fight each other, a silhouette that isn't flattering on real people - none of that can be undone. The cuts, the sewing, the fabric, the hours are all gone. The loss is far bigger than buying the wrong dress. That's how I came up with Before You Cut: see the finished result before you cut a single piece of fabric.

What it does

Before You Cut is a design room for a garment that doesn't exist yet , built for fashion designers, small garment shops, custom clothing makers and tailors.

We design a garment in our heads, and it rarely matches what shows up on a real body. Designers can sketch on paper but changing one small part means redrawing the whole thing. And the sketch is still just a sketch, not realistic, and with no real fabric in it. Before You Cut solves all of that.

Features :

Draw anything. A canvas for any garment : a dress, trousers, a top, a shirt.

Cut it into parts and swap them. Enclose any area : a collar, a sleeve, a hemline, and save what's inside as a version. Draw an alternative and switch between them. Everything outside stays exactly as it was, so changing the neckline never costs you the rest of the dress.

See every combination. Three necklines and two sleeves aren't five drawings, they're six garments and all six appear instantly, free, because none of it touches the API.

Turn it into real cloth. Paint an area, name its fabric : "silk chiffon", "heavy crepe", and render the whole design as a photograph of the actual garment, with different fabrics on different parts.

Put it on real people. See the finished design worn by your own model photos, on the bodies it's actually for.

How we built it

A React + TypeScript front end (Vite), and a small Express backend whose only job is to hold the API key.

The canvas. Every bitmap lives in a raster registry outside React, keyed by id — layers, part versions, fabric masks. The store (zustand) holds only metadata: names, order, visibility, which version is active.

Parts and swapping. A part is a closed boundary in canvas coordinates plus a list of versions, each version its own raster. Saving a version cuts the pixels inside the boundary into a new raster; switching versions just points the part at a different one. What makes it feel free is the compositor: the layer's base raster holds everything outside every boundary, so swapping a sleeve composites a different sleeve over untouched artwork rather than redrawing anything.

Fabric zones. A zone is a painted mask at canvas resolution plus a written note.

YouCam Features used: We used two YouCam features: image generation to turn the flat drawing into photographic cloth with real fabrics, and Apparel VTO to put the finished garment on real model photos. We also built and tested the object-replace route for fabrics, but the single image-to-image pass beat it on both quality and cost.

Projects autosave to IndexedDB and export as one self-contained file.

Deployment. Both halves on Render — the front end as a static site , the API as a free service kept warm by a scheduled ping.

Challenges we ran into

Coming to the finalised idea was the hardest part. The first plan was nothing like this clean, it was messy. We started by trying to scan a hand-drawn dress off paper, detect its separate parts, and turn that into an editable drawing. We tried heuristics, then mathematics - Fourier decomposition, parametric equations, and finally LLMs. Nothing was accurate enough.

Accomplishments that we're proud of

We're proudest that the expensive part is rare. Drawing, cutting the garment into parts, saving versions and seeing every combination are all instant and free, the API is called only at the two moments it earns its cost, so a designer can explore fifty necklines and spend nothing. Swapping genuinely works: change a sleeve and the rest of the dress is untouched, which is the one thing paper can't do. We didn't stop iterating our idea when our first idea failed, that's I think where our main success lies.

What we learned

The two things that actually changed our output were both about framing, not prompting. Cropping a garment to its own outline destroys length information. And generative models are trained on product shots: a garment on a transparent background isn't what they expect, so the flat drawing goes up on white.

What's next for Before You Cut

Training a model to separate a paper sketch into its parts, so a hand-drawn design can be an input to the app rather than something to redraw. Right now the only thing that can be imported is a project file, everything else starts on the canvas. That was our original idea, and it's the one worth going back to with real training data instead of heuristics.

Built With

• apparelvto
• express.js
• githubactions
• html5canvas
• indexeddb
• node.js
• perfectcorp
• react
• render
• typescript
• vite
• youcamapi
• zustand