How do you get started with Toolcraft?
Toolcraft is an open-source starter kit and UI library for building custom design apps with AI. You start by running npx @pixel-point/toolcraft create, then build your app on top of the provided components and starter structure. This path assumes you're comfortable with front-end development — you'll be working in a code project, not a no-code builder.
What you're actually starting with
Toolcraft isn't a finished design tool. It's a foundation for making your own. The site describes it as a starter kit plus a UI library, aimed at things like:
- Branded asset generators
- Tools for exploring new visual styles
- Reusable tools that replace repetitive design tasks
The framing on the site is "Design the outcome. Not the workspace." — the idea being that instead of adapting your process to a general-purpose editor, you build a small app that produces exactly the output you need.
Step 1: Initialize the project
Run the create command from your terminal:
npx @pixel-point/toolcraft create
This scaffolds a project based on the starter kit. The expected result is a working local codebase you can open, run, and modify — with the UI library already available as a dependency.
Common snag: npx needs Node.js installed. If the command fails immediately, check your Node version before anything else.
Step 2: Understand the two layers
It helps to separate what you got into two parts:
| Layer | What it gives you | What you do with it |
|---|---|---|
| Starter kit | Project structure and setup | Run it, then replace the example with your own app |
| UI library | Components for creative workflows | Compose them into your tool's interface |
The site's heading "Components for every creative workflow" points at the second layer — the library is meant to cover the controls and panels a design app needs, so you're not rebuilding sliders, canvases, and panels from scratch.
Step 3: Pick a small, real target
The fastest way to learn the kit is to copy the shape of one of the published case studies. The site lists several, and they're all deliberately small:
- A mini app to explore a testimonials section design
- A mini app showing logos on a rotating sphere for a bento card
- A custom app for a brand's signature visual
- A mini app experimenting with WebGL dispersion on a carousel's edges
- A custom app for a footer showreel animation
- An interactive product demo for an AI image generation company
- A procedural graphics app for exploring a brand's visual direction
Each of these is a single-purpose tool, not a general editor. That's the pattern to imitate: pick one repetitive or exploratory task, build the smallest app that does it, and let the library handle the UI.
Step 4: Build and verify
Because this is a code project, "verification" means running it and checking the output against your intent:
- Start the dev server from the scaffolded project.
- Confirm the starter renders before you change anything — this isolates setup problems from your own code.
- Swap in one component from the library and confirm it behaves as expected.
- Iterate toward your target app one piece at a time.
If something breaks after step 3 but not before, the problem is in your change, not the scaffold.
What you need before starting
- Front-end development experience — the site's examples assume you can read and write project code.
- A Node.js environment for
npxand the dev server. - A clear, narrow task in mind. Toolcraft rewards specificity; "build me a design tool" is the wrong starting point, "build a generator for our brand's gradient assets" is the right one.
When Toolcraft is the right choice
Choose it if you want to own the tool — a custom app tailored to one workflow, built on open-source components you can modify. Skip it if you want a ready-made editor to use today, or if you don't want to write code. The site's own closing line, "You're only limited by your creativity," is really a statement about scope: the kit gives you the parts, and the app is yours to define.