The demo lays out a ring top-down at real size, the way a retail jeweler does in desktop CAD. It opens on one of five starter rings, and any part of it can be swapped. The Render panel turns the flat layout into a product photo, though live AI is switched off in this public version.
Where this pattern fits
A ring builder is one case of a parts-based designer, where a customer or a sales assistant puts a product together from a catalogue and sees it before anything is made. The same structure serves:
- retail jewelers designing a custom ring with a client at the counter
- jewelry brands with a "design your own" page for engagement rings and bands
- CAD and casting services that take orders from stores and need a clean spec
- pendants, earrings and bracelets, which use the same parts on a different base
Each of them comes down to a base piece and a library of parts that fit onto it. Polotno handles the canvas, and the parts and fitting rules are your data.
What's in it
- A work area in millimetres, with rulers on its edges that follow zoom and scroll. A 6.5 mm stone measures 6.5 mm on both rulers. For a round diamond, the size picker also shows the approximate carat weight (6.5 mm is about 1 ct).
- Eight shanks: classic, tapered, knife edge, cathedral, split, bypass, bow and channel. Width is adjustable in millimetres, with a polished or satin finish.
- Eight cuts in six stones: round, oval, pear, marquise, cushion, heart, princess and emerald, in diamond, ruby, sapphire, emerald, amethyst and morganite, from 1 to 10 mm. Pavé rows run along the band.
- Four settings: four prongs, six prongs, bezel and halo. Each one fits any cut and follows its stone when it moves or resizes. Prongs keep a realistic size for the stone they hold, so they don't balloon on a large centre stone or vanish on a small one.
- White, yellow and rose gold, switched for the whole ring at once.
- Export as an image, or as design data with every part's position and size in millimetres.
Every part is drawn in code
Each part is computed from a few numbers. A stone needs its cut and size, and the facets and reflections are worked out from those. A setting is drawn from the outline of the stone it holds, which is why one bezel fits a pear and a princess alike.
That keeps the library cheap to grow, since a new cut is one new outline and works at once in every size and setting. Eight cuts in six stones and 17 sizes already make 816 stones, and each fits all four settings without anything drawn by hand.
A production version would use the jeweler's own CAD parts, exported as top views. They follow the same fitting and resizing rules.
From a drawing to a photo
Render sends a picture of the layout to an image-to-image model, with a prompt that describes the design and asks the model to keep it exactly as drawn. There are four scenes (studio from above, angled, on a hand, on dark velvet) plus a custom prompt, and each render returns up to four images.
The full demo offers four models, all run through Replicate. We ran the same designs through each:
- Nano Banana Pro (Google) gave the most natural result and kept closest to the design, in about 30 seconds.
- GPT Image 2 (OpenAI) gave a clean catalogue look and stayed true to the layout, in about a minute.
- Seedream 5 Pro (ByteDance) gave a glossy, high-contrast look at 2K, but took up to three minutes.
- Flux 2 Max (Black Forest Labs) was fast, but added sparkle effects and textured backgrounds the design didn't ask for.
Naming the stones in the prompt matters. Asked only to "keep the colours", the models tended to invent coloured side stones. Told that every stone is a colourless diamond, or that the centre is a blue sapphire, they kept them that way.
In production the models sit behind your own backend, with your own keys and spending limits. The private version of this demo works the same way, through a server endpoint that checks access and caps usage.
Known limits
- The models only see the top view. The height of a setting and the profile of the band are their guess. The studio shot from above stays closest to the drawing, and the angled view is the weakest because the model has to invent the side of the ring.
- AI renders drift. An image model redraws the whole ring, so small details can change between renders, like the count of pavé stones or the shape of a prong. Manufacturing works from the design data.
- Coded parts are placeholders. They are close to real proportions, but a customer should see the jeweler's own CAD parts.
- Built for desktop. A tablet and phone version would rearrange the panels around the same canvas.
What Polotno does here
The canvas, selection, layers, snapping, undo and redo, zoom and export all come from Polotno SDK. The canvas runs in millimetres, so sizes in the toolbar, on the rulers and in the exported data are real sizes. A ring is one JSON document that can be saved or rendered to an image on your server. The panels and controls are Polotno's own UI components, themed in a light and a dark palette.
