DESIGN TOOL · GUIDE
Toolcraft.
How to build your own personal design tools with Toolcraft by Pixel Point — no coding required, just an AI agent, one command, and a clear description of what you want.
01
What is Toolcraft?
Toolcraft is a free starter kit from Pixel Point — the design agency behind sites for Neon, Unkey, and Databricks — that lets you build your own small design tools with an AI agent, without knowing how to code. Think of it as a pre-built workshop: the canvas, the sliders, the color pickers, the export button, and the file structure are already there. You just tell the AI what the tool should do.
Why does that matter? If you simply ask an AI to "build me a design tool", the result is usually rough — even with a detailed prompt. A good creative app isn't just what it generates; it's how the canvas behaves, how the controls look, how settings are grouped, how export works, and whether it stays smooth when you drag a slider. Toolcraft bakes all of that in, along with instructions and testing steps that keep the AI on the rails.
AI alone — you babysit it
Every prompt has to explain the canvas, the controls, the layout, and export.
One small change request and the AI breaks the layout, or ships laggy sliders that look fine in a screenshot.
AI + Toolcraft — you direct it
The environment, components, and quality checks come pre-built.
Your prompt only describes the visual idea. The AI tests and optimises its own work before handing it back.
02
Why build your own design tools?
A "personal design tool" is a tiny app that does one creative job with a handful of controls. Pixel Point makes the case for three situations where building one beats doing the work by hand:
- Speed. Some graphics are impractical to draw manually. For a Polar Signals illustration, they built a procedural art tool so they could experiment with density, direction, color, spacing, and randomness in seconds instead of redrawing in Figma.
- Better UX for someone else.For clients Unkey and Neon they built branded blog-cover generators: pick a template, choose accent colors, upload an image, edit the text, export. No Figma knowledge needed on the client's side.
- Skipping yet another app. Instead of learning Spline, Rive, or After Effects for one job, their motion designer built a purpose-made animation tool — with keyframes and effect controls — tuned directly on the real Databricks site.
03
What you need before starting
You don't need to be a developer, but you do need two things installed:
- Node.js — a free program that runs JavaScript on your computer. Download it from nodejs.org (choose the LTS version) and install it like any other app. It includes
npx, the command you'll use below. - An AI coding agent — Toolcraft supports Claude Code, Codex, and Cursor. If you're new to all three, Cursor is the most approachable: it looks like a regular editor with a chat panel.
You'll also open the terminal once (Terminal on Mac, PowerShell on Windows) to run a single command — or skip even that by pasting the command into your AI agent and letting it run it for you.
04
Set up Toolcraft
Setup is one command. Open your terminal (or your AI agent's chat) and run:
npx @pixel-point/toolcraft createThe installer asks you two questions: a name for your project (this becomes the folder name) and which AI agent you'll use— it installs the matching "skills", the instruction files that teach your agent how Toolcraft works. When it finishes, you'll have a new folder containing the complete starter: a working app skeleton with the canvas, controls, and project structure already decided.
05
Build your first tool
Open the new folder in your AI agent and describe the tool you want. The trick is that you only describe the visual behavior— what the tool generates and which controls you want. You don't need to mention the canvas, the layout, or how sliders should work; Toolcraft already handles that. The simplest possible first prompt:
Build an app that applies an ASCII effect to an uploaded image.For something more ambitious, start from a reference. Find an animation or effect you love on Pinterest or X, record a short video of it, and hand it to the agent with a prompt like:
Build a creative tool inspired by this animation. I want to
upload an image, apply this kind of visual effect, and control
the density, speed, colors, distortion, and export size.
Do not copy the reference exactly. Use it as a starting point
and make the result feel more unique.06
Run it and iterate
When the agent says it's done, start the app. In the terminal (or by asking your agent), run:
npm run devThen open http://localhost:3002in your browser — that's Toolcraft's preferred address; if it's taken, the terminal prints the one it used instead. Your tool is now running on your own machine, sliders and all.
From here, iterate in plain English. Ask the agent to add a control, add presets, change the visual style, improve the export options, or smooth out performance. Because the components and instructions live inside the project, the AI changes what you asked for — and leaves the rest alone.
08
Ideas for what to build
Pixel Point's advice is to start small. Good first projects from their list:
- Image effects — ASCII, pixel, halftone, or glitch filters for uploaded photos.
- Gradient and procedural graphics tools — generative backgrounds and patterns with a few sliders.
- A blog cover generator— your brand's templates, colors, and fonts behind a simple form.
- Shader and Three.js experiments — animated, 3D, or lens-like visual effects.
- A tiny animation controller — keyframes and effect controls for one specific motion job.
It also works for reverse-engineering: take a visual idea you've seen on another site as a foundation — not to copy one-to-one, but to build your own version with your own controls. As the Toolcraft team says: "Open the project in your AI agent. Describe what you want to build. Add a few references. And see what comes out."
09