rapid prototyping for expressive JavaScript
Make a mess.
Keep the good parts.
A small protected space beside your project, where ideas can be rough, code can move quickly, and every good accident can become the next iteration.
Exploratory code needs room to breathe.
Polished project code asks for certainty. An experiment asks a better question: what happens if I try this? Sketch Kit lives alongside your project, giving a sketch its own JavaScript and SCSS files so you can test an idea without dragging the whole application into it.
// isolate the question
// follow the interesting result
When code becomes cheap, explore more
Agentic programming makes it possible to produce working code at extraordinary speed. But faster implementation can create pressure to decide too early—to describe exactly what you want, then ask an agent to make sweeping changes to the real codebase.
Creative work rarely begins with that certainty.
Sketch Kit offers another approach: ask an agent to build several small possibilities. Try different interactions, structures or visual behaviours without requiring any of them to becomethe solution. Run them. Compare them. Change the promising ones. Forget the rest.
When the cost of writing code falls, code no longer needs to be treated as a precious final product. It can become a material for thinking.
The developer’s role is not simply to specify the correct answer in advance. It is to create the conditions in which better answers can be discovered.
Don’t ask an agent for one big answer.
Give it room to make many small suggestions.
Iteration is the feature.
Make one thing. Look at it. Copy the version that still has promise, change a single part, and compare. Keep the trail visible.
- 01Createstart a sketch
- 02Playsee what moves
- 03Copysave this state
- 04Changepush one idea
- 05Comparelook back
- 06Keepcarry it forward
A sketchbook that runs.
sketch-kit init creates a dedicated sketch-kit/ workspace alongside your application.
sketch-kit create motion generates a JavaScript sketch and its SCSS file. Select a sketch to render it in the browser.
Copying an existing sketch creates a numbered iteration. The earlier version stays there to compare against.
sketch-kit run starts a Vite dev server with hot updates.sketch-kit build produces a static build.
One idea, three passes.
Click through a tiny motion study. Each revision keeps the previous thought available while changing the shape of the next one.
Open a new page.
Install Sketch Kit, initialize a workspace in your project, then start sketching. The repository has the CLI source, usage notes and current roadmap.
$ npm install -g sketch-kit
$ sketch-kit init
$ sketch-kit create first-idea
$ sketch-kit run// Sketch Kit is an open-source project. Read the repository before you begin.