Build Sketch

KINDAreplaces $12/mosaves $144/yrback to the verdict

0%0 of 20 items done

Saved on this device only. Tick prerequisites first, then work the phases in order · do not start one until the checks above it pass.

A desktop vector editor for interface work: precise shapes with boolean operations, auto-layout stacks that reflow, reusable components with overrides, text styles and colour variables, and export presets that produce assets at the exact scale factors platforms require.

estimated effort multi-daythe files for this build are in the project pack

ShellTauri with a TypeScript front endRenderingSVG in the DOM for the canvasGeometryA boolean path library operating on flattened pathsDocumentA JSON document format, one file per document, human diffableExportresvg for rasterising, with scale factors applied to the source geometry

Before step 1

Everything below is assumed from the first step. Tick each one when you actually have it, not when you plan to.

installfree
Why Builds the front end and the tooling.
Get it nodejs.org, or nvm install 22. open ↗
Verify node --version prints v22 or higher
installfree
Why Tauri compiles the desktop shell and hosts the rasteriser.
Get it rustup from rustup.rs, plus the platform packages Tauri lists. open ↗
Verify A Tauri hello world builds and runs
have readyfree with open licences
Why Export can embed or outline fonts, which is redistribution and is not permitted by every licence.
Get it Use openly licensed families and keep the licence files. Check the embedding clause before Phase 5 if you use a commercial face.
Verify Each bundled font's licence permits embedding, or export outlines text
have readyfree
Why Boolean operations, components and auto-layout only reveal their gaps against real work. A test file of three rectangles will not.
Get it Rebuild two screens you have designed before, or two from an open design system.
Verify Both are rebuilt and the friction points are noted
decidefree
Why Colour management is explicitly out of scope, so the document must state which space it works in or exports will not match expectations.
Get it Pick one, usually standard RGB, and state it in the README and in the interface.
Verify The colour space is stated in the README

Data model

Create these before the first phase that stores anything. Changing a table later is the expensive kind of change.

- documents(id, name, path, updated_at)
- pages(id, doc_id, name, order)
- layers(id, page_id, parent_id, kind, name, x, y, w, h, rotation, opacity, visible, locked, z) · kind is frame, rect, ellipse, path, text, image, component or instance
- styles(id, doc_id, kind, name, value_json) · kind is fill, text or effect, referenced by layers rather than copied
- components(id, doc_id, root_layer_id, name), instances(layer_id, component_id, overrides_json)
- An instance stores only its overrides. Everything else resolves from the component, which is what makes changing the component change every instance.

Environment variables

These go in a .env file the app reads at startup. The pack's .env.example is this table as a file · copy it, never commit the filled-in version.

Variable	Needed	Example	Where the value comes from
`DOCUMENTS_DIR`	required	`~/Documents/Designs`	Default location for documents. Version control friendly because the format is JSON.
`EXPORT_DIR`	required	`~/Documents/Designs/exports`	Where batch exports are written.
`SNAP_TOLERANCE_PX`	required	`6`	How close a drag must come before snapping engages, in screen pixels rather than document units.
`AUTOSAVE_INTERVAL_MS`	required	`30000`	How often to save. Saves are atomic, so a shorter interval is safe.
`COLOR_SPACE`	required	`srgb`	The single colour space this application works in. Stated rather than managed.

The build, in order

1
Canvas, shapes and precise geometry
You can draw and position shapes exactly, and the numbers in the inspector are the truth.
1. Pan and zoom through the viewBox so what you see is the geometry you will export.
  Files src/canvas.ts
  terminal
  npm create tauri-app@latest
2. Store floating point, display rounded. Rounding on write is what causes drift.
  Files src/document.ts
3. Snap to object edges, centres and a grid. Show the guide, because invisible snapping feels like the tool fighting you.
  Files src/snap.ts
done when · tick each as it passes
watch out
- Rounding positions to integers on every drag makes rotation and scaling accumulate error, so a shape drifts after a few operations. Keep full precision in the document and round only for display and for export, where the pixel grid actually matters.
next phase
2
Boolean operations and path editing
You can combine shapes into new ones and edit the resulting paths.
1. Flatten curves to the library's expected form, operate, and convert back. The conversion at each boundary is where precision is lost, so do it once.
  Files src/boolean.ts
2. A boolean result references its inputs. Un-combining is then trivial and users expect it.
  Files src/boolean.ts
3. Shared edges, tangent overlaps, fully contained shapes and zero-area results. These are the cases that appear in real work.
  Files src/boolean.test.ts
done when · tick each as it passes
watch out
- Boolean operations on curves are numerically delicate, and shapes that share an exact edge or overlap at a tangent will produce artefacts or empty results in every library. Test with adjacent rectangles sharing an edge, because that case is common in interface work and is where naive usage breaks.
next phase
3
Components and overrides
Changing a component changes every instance, except where an instance deliberately differs.
1. An instance is a component reference plus an override map. Nothing else.
  Files src/components.ts
2. Instances resolve from the component on every render, which is what makes propagation automatic rather than a synchronisation step.
  Files src/resolve.ts
3. Name what is missing. Silence here produces documents with invisible holes.
  Files src/resolve.ts
done when · tick each as it passes
watch out
- Storing an instance as a full copy with a link back makes a component change ambiguous: you cannot tell which differences were deliberate and which are stale. Store only the overrides, and resolve everything else from the component every time it is rendered.
next phase
4
Auto-layout and text styles
Content that grows reflows its container instead of overflowing it.
1. Direction, gap, padding and alignment, computed top down with children measured first.
  Files src/layout.ts
2. Wait for font loading and re-measure on load. This is the single most common source of layout that is subtly wrong.
  Files src/text.ts
3. Layers reference a style by identifier. A literal value is a deliberate choice, not the default.
  Files src/styles.ts
done when · tick each as it passes
watch out
- Text measurement must use the actual font, loaded and ready, or a stack sized against a fallback font will be visibly wrong the moment the real face arrives. Wait for font loading before measuring, and re-measure when a font finishes loading.
next phase
5
Export at real scale factors
Assets come out at exactly the sizes platforms require, from the vector source every time.
1. Format, scale and a naming pattern. Multiple presets per layer, because platforms want several.
  Files src/export.ts
2. Render the vector at each scale factor. Never upscale a bitmap.
  Files src/raster.ts
3. Compare a two times export against an upscaled one times. The difference should be obvious, and if it is not, you are upscaling.
done when · tick each as it passes
watch out
- Rendering once at one times and scaling up to produce the two and three times assets gives you blurry output, which is the exact problem vector sources exist to avoid. Rasterise from the geometry at each scale factor separately, and verify by checking that the larger asset has genuinely more detail rather than more pixels.
6
Handoff, versioning and file safetyproduct builder
Developers can read the design, and a document is never lost to a crash.
1. Temporary file plus rename. Test by killing the process during a save.
  Files src/save.ts
2. Measurements between selected layers, resolved colours and text styles. Read-only, so it can be shared without risk.
  Files src/handoff.ts
3. Stable key ordering and one layer per line group, so a small change produces a small diff. This is a real advantage over binary formats and is worth protecting.
  Files src/serialise.ts
done when · tick each as it passes
watch out
- Writing directly over the document file means a crash mid-save leaves a truncated file and loses the whole document. Write to a temporary file and rename over the target, which is atomic on every platform that matters.

what this build does not replace

Colour management across profiles and devices.
Real-time collaboration and a cloud workspace.
Prototyping with interactions and transitions.
A plugin ecosystem.
color-management edge cases
cloud collaboration and mobile apps
pixel-perfect professional tooling
large template and asset libraries

after v1, if you want it

Component variants, which are the natural next step once overrides work
A command line export so continuous integration can produce assets
Importing an existing design system's tokens as styles and variables

Need the files? The project pack on the verdict page hands your agent the whole brief · more design.