How to Use Toolcraft: The Beginner's Guide (2026)
CodexFuse Team · 2026-11-02T12:53:24.954Z · 16 min read min read
Toolcraft by Pixel Point is an MIT-licensed starter kit, UI library, and AI harness for building design apps with an AI agent. This beginner guide covers the create command, the canvas, the component library, and the four checks — verified Nov 2026.
What Is Toolcraft, Exactly?
If you search for how to use Toolcraft, start with this one sentence: Toolcraft is an open-source starter kit, UI library, and AI harness by Pixel Point (toolcraft.sh) that lets you build your own design apps with an AI coding agent — you describe the tool you want, and the agent builds it on top of a real canvas, a real component library, and a real design system. This toolcraft tutorial is the missing beginner arc: the mental-model lesson that makes everything else click, your first scaffolded app, the canvas arc, the component library, the AI harness, and the four checks you run before shipping.
One line first, said once and never blurred: this guide is about Toolcraft by Pixel Point at toolcraft.sh — the open-source AI starter kit that launched on Show HN on October 29, 2026. The name "Toolcraft" is crowded — bare "toolcraft" search results are dominated by CNC machining companies and an electronics own-brand — so everywhere below, "Toolcraft" means the Pixel Point project, and I will say "toolcraft.sh" or "Pixel Point's Toolcraft" wherever the context needs it. The project's own tagline is "Build your own design apps with AI," and its GitHub repository describes it as a starter kit plus UI library plus AI harness for building custom design apps with AI. It is MIT-licensed — the README calls it "completely free, open-source software licensed under MIT," and commercial use, modification, and distribution are allowed, including client work. If your workflow already lives in a coding agent, this pairs naturally with our Claude Code beginner guide.
How Do You Use Toolcraft for the First Time?
You use Toolcraft in seven steps, and the shape never changes no matter what design app you are building:
- Check the prerequisites. You need Node.js with npm installed and an AI coding agent you can talk to — Codex, Claude Code, Cursor, or any other agent that can read and edit files, run commands, and follow instructions.
- Scaffold the starter. Run
npx @pixel-point/toolcraft createin your terminal. The CLI asks for a project name, then asks which AI agent you use, so it can install the right AI skills for that agent. - Open the project. The starter is copied into a folder you choose — Toolcraft is not an app or a cloud service, it is files on your machine. The starter template is built on TanStack Router, React, TypeScript, Tailwind CSS, and Base UI.
- Start the dev server. Run
npm installonce, thennpm run dev. The app opens athttp://localhost:3002by default (the next free port if 3002 is busy). - Give your agent the first prompt. Describe the design tool you want in plain words — the README's own example is
Build an app that applies an ASCII effect to an uploaded image.Expect a first working result 30 to 60 minutes after the initial prompt, according to the project's FAQ. - Iterate on the canvas. The agent builds on Toolcraft's canvas — pan and zoom, a toolbar, a layer system, an animation timeline, and keyframes — using the component library instead of inventing its own controls.
- Run the checks, then ship. The harness ships verification commands:
npm run test,npm run verify:quick, andnpm run verify:finalcover unit, browser, acceptance, and performance checks. Thennpm run buildand deploy to Cloudflare, Vercel, or Netlify.
The rest of this guide walks each step with the details that actually matter, so you can tell the difference between the starter, the harness, and the app you are building.
What Do You Need Before You Start?
You need three things, and the honest version of each matters more than the marketing version. First, Node.js and npm — the README does not pin a specific Node version; its prompt-first variant simply tells the agent to "install any missing prerequisites, including Node.js and npm," so if Node is missing, let the agent sort it out rather than guessing. Second, an AI coding agent with a plan that can do real work: the project's FAQ is blunt that $20-a-month AI plans "aren't suitable for meaningful work" and recommends a plan of $100 a month or more for building real apps with the harness. Third, realistic time expectations: the FAQ says the first working result typically lands 30 to 60 minutes after the initial prompt, while Pixel Point itself reports spending 1 to 3 days and 30 to 50 iterations per app when the team builds its own example apps.
On the machine side there is nothing exotic: Toolcraft runs on Windows, Mac, and Linux, and everything happens locally in your own folder. Imported files are processed in the browser and sent nowhere, which the FAQ states explicitly — a meaningful privacy property if your design work involves client assets. If you are new to keeping a project under version control as you iterate, our GitHub beginner guide covers the workflow the scaffolded project expects.
How Does the Create Command Work?
The create command is the front door, and it does more than copy files. Running npx @pixel-point/toolcraft create — the exact command on the homepage and in the README under "Or start in the terminal" — launches an interactive setup: it asks for your project name, then asks which AI agent you use, and installs the AI skills matched to that agent. That second question is the important one — the harness is agent-aware, and the skills it installs are what let your agent build on Toolcraft's design system instead of improvising its own.
There are two more invocation forms worth knowing, both from the README. If you would rather drive the whole thing from inside an agent prompt, the README documents a prompt-first variant: npx --yes @pixel-point/toolcraft create --yes, wrapped in a prompt that asks the agent to install prerequisites, set up Toolcraft, build your tool, and start a dev server. And if you want to start from one of the example apps instead of a blank slate, there is a template flag: npx @pixel-point/toolcraft@latest create --template prism-flow. The repo ships example apps including ascii, hero, grass-world, and neon-iceberg; the site showcases Textures, Watercolor, ASCII, Bricks, Shaders, and Frozen as finished examples of what the starter produces.
What Is the AI Harness, Really?
The AI harness is the idea that separates Toolcraft from a component library, so learn it before you touch the canvas. A component library gives your agent buttons and sliders; the harness gives your agent an application architecture — skills, instructions, and checks — so the agent builds on Toolcraft's design system instead of inventing a new one for every app. Concretely, the repository ships two things that make this real: a docs/toolcraft directory with local rules and reference material for AI agents, and a .agents/ directory with AI coding-agent skills, system prompts, and verification instructions.
The checks are the part beginners underuse and experts swear by. The harness defines four of them — unit, browser, acceptance, and performance — and wires them to npm scripts you run in order: npm run test for the unit layer, then npm run verify:quick and npm run verify:final as the progressively stricter gates. The Pixel Point team's own write-up adds a rule beginners should memorize: the components live inside your project and are editable, but Toolcraft instructs the AI not to change them without an explicit request — the design system stays stable while your app grows around it. Performance guidance and performance checks are part of the harness too, which matters because design apps live or die on frame rates.
What Can You Build on the Canvas?
The canvas is the working surface your app is built on, and it arrives with the behaviors users expect from real design software. Panning and zooming work the way your hands already know; the toolbar holds the app's tools; the layer system supports selection, visibility toggles, groups, and drag reordering; and the animation timeline supports keyframes with timing and easing controls. Your agent does not build any of this — it is the starter's job — which is exactly why a Toolcraft app can look like a finished product after one afternoon instead of a prototype with a canvas-shaped hole in it.
The use cases the project lists read like a menu for picking your first app: procedural graphics and gradient generators, image stylization (ASCII, pixel, halftone, glitch effects), shader and Three.js experiments, animation and video-effect tools, blog-cover and branded-asset generators, and image-plus-video export workflows. If you are wondering which one to build first, take the project's own advice implicit in its examples: start with a single effect on an uploaded image — the ASCII example is the canonical first app — because one input, one effect, and one export is the smallest loop that exercises the canvas, a component, and a check.
What Is in the Component Library?
The component library is the vocabulary your agent builds with, and knowing its range keeps your prompts honest — ask for controls that exist instead of describing controls you hope exist. The docs page lists the full set; the groups that matter most to a beginner are the inputs, the color tools, and the canvas furniture:
| Group | What you get | Reach for it when |
|---|---|---|
| Inputs | Slider, Range, Text, Textarea, Select, Segmented, Switch, Checkbox, Buttons, Actions | Your app needs parameters the user can tune — effect strength, text content, on/off toggles |
| Color | Color, Color palette, Gradient, Curves, Channel mixer | Your app manipulates color at all — pickers for quick choice, curves and channel mixer for serious grading |
| Media | Image picker, File upload, Model upload | Your app takes user files in — images to stylize, models to preview |
| Canvas furniture | Canvas, Layers, Keyframes, Toolbar, Controls panel, Collection actions | You are arranging the workspace itself rather than the effect |
| Precision | Font picker, Vector, Anchor grid, Orientation gizmo, Settings transfer | Your app needs typography, vector work, or portable settings |
Two facts about the library change how you prompt. First, the components are inside your project and editable — they are your code, not a dependency you are afraid to touch. Second, the harness tells the agent to leave them alone unless you explicitly ask, so a careless "make it nicer" prompt will not silently redesign your sliders. The starter's own stack is worth knowing when you read the generated code: TanStack Router, React, TypeScript, Tailwind CSS, and Base UI. If Tailwind is new to you, our Tailwind CSS beginner guide covers the utility-first styling the starter is written in.
What Are the Four Checks?
The four checks are the harness's quality gate, and running them is what separates a demo from a design app you would hand to someone. Each check answers a different question, and the npm scripts run them in escalating order of strictness:
| Check | The question it answers | How you run it |
|---|---|---|
| Unit | Does the logic do what it claims — the math, the transforms, the state? | npm run test |
| Browser | Does it actually work in a real browser — rendering, interaction, no console errors? | npm run verify:quick |
| Acceptance | Does the app do what you asked for in your original prompt? | npm run verify:final |
| Performance | Does it stay smooth — frame rates, no jank on the canvas? | Performance checks via the harness (run with the verify scripts) |
Beginners should treat npm run verify:final as the definition of done, not npm run dev looking right on their own screen. The acceptance check is the clever one: because the harness knows your original prompt, it can verify the app against your actual intent rather than against generic test assertions. When Pixel Point says the team spends 30 to 50 iterations per app, most of those iterations are the loop between a failed check and the next prompt — the checks are the workflow, not an afterthought.
Where Does Your App Go When It Is Done?
Your app goes wherever you put it, because Toolcraft is not an app or a cloud service — it is files in a folder you chose, and the FAQ makes this explicit. Nothing about the starter phones home: imported files are processed in the browser and sent nowhere, and there is no Toolcraft account, dashboard, or hosting lock-in sitting between you and your users. When the checks pass, npm run build produces the production bundle, and the project documents deployment to Cloudflare, Vercel, and Netlify — all three are standard static-plus-edge hosts, so pick the one you already use.
That ownership model is also the answer to the licensing question people ask before building client work on an open-source starter: the MIT license permits commercial use, modification, and distribution, and the README says so in plain words — "completely free, open-source software licensed under MIT." If Vercel is your deployment target, our Vercel beginner guide walks the first deploy, preview URLs, and custom domains.
What Toolcraft Is Not
Half of understanding a new tool is knowing what it is not, and Toolcraft's launch drew exactly the confusions you would expect. This table draws the lines once:
| If you think it is… | It is actually… |
|---|---|
| A design app you sign up for | A starter kit you scaffold — there is no Toolcraft app, account, or cloud service; npx @pixel-point/toolcraft create copies files into your folder |
| A component library | An application architecture for the agent — canvas, toolbar, layers, timeline, and keyframes come with it, and the harness adds skills, instructions, and checks |
| A Figma replacement | A way to build single-purpose design tools (gradient generators, ASCII stylizers, shader playgrounds) — Figma is the general editor; Toolcraft apps are the specialized instruments |
| Locked to one AI | Agent-agnostic — the site and README name Codex, Claude, and Cursor, then add "or any other AI agent"; the CLI installs skills matched to whichever agent you pick |
| The CNC/machining company | Pixel Point's open-source project at toolcraft.sh — the industrial Toolcrafts and the electronics own-brand share only the name |
7 Beginner Mistakes That Waste Your First Afternoon
Every mistake below comes from the gap between what the docs say and what beginners assume. Read the table before your first prompt, not after your third failed build:
| Mistake | What happens | Do this instead |
|---|---|---|
| Starting on a $20 AI plan | The agent stalls mid-build or produces shallow work — the FAQ says flatly these plans "aren't suitable for meaningful work" | Use a plan of $100/month or more for real builds, per the project's own guidance |
| Skipping the agent question in setup | The wrong (or no) AI skills get installed, and the agent improvises outside the design system | Answer the CLI's agent question carefully — it is how the harness matches skills to your workflow |
| Prompting "make it nicer" at the components | The agent redesigns library components you wanted stable | Remember the harness instructs the AI not to touch components without an explicit request — be explicit when you mean it |
Calling npm run dev looking right "done" | You ship a demo with failing checks and janky canvas performance | Define done as npm run verify:final passing — unit, browser, acceptance, and performance |
| Building the everything-app first | Thirty prompts in, nothing is finished and the checks all fail at once | Start with one effect on one upload (the ASCII example) — the smallest loop that exercises canvas, component, and check |
| Assuming the bare "toolcraft" keyword means this project | You land on CNC machining companies and soldering-station manuals | Search and link with "toolcraft.sh" or "Pixel Point Toolcraft" — the disambiguation from the top of this guide |
| Treating the starter as a black box | You cannot debug the generated code because you never learned the stack | Skim the starter's stack (TanStack Router, React, TypeScript, Tailwind, Base UI) before prompting — you will read its output all afternoon |
Frequently Asked Questions
Is Toolcraft really free?
Yes. The project is MIT-licensed, and the README describes it as "completely free, open-source software licensed under MIT" — you can use it, modify it, and distribute what you build, including commercial and client work. The costs that do exist are yours, not Toolcraft's: an AI coding-agent plan (the FAQ recommends $100/month or more for meaningful work) and wherever you choose to host the finished app.
Which AI agents work with Toolcraft?
Codex, Claude (Claude Code), and Cursor are the named ones, and the site adds "or any other AI agent" — any coding agent that can read and edit files, run commands, and follow instructions qualifies. The create command asks which agent you use precisely so it can install the matching AI skills. If you have not picked an agent yet, our Cursor AI beginner guide and Claude Code guide cover the two most popular choices.
Do I need to know React to use Toolcraft?
Not to start — you describe the app in plain words and the agent writes the React, TypeScript, and Tailwind code on the TanStack Router + Base UI starter. But you will read the agent's output all afternoon, so knowing roughly what the stack does pays off fast: the canvas behaviors, the component names from the library table above, and the four npm scripts are the vocabulary your prompts should use.
How is Toolcraft different from just asking an AI to build a design app?
Without the harness, the agent invents everything — its own canvas code, its own controls, its own idea of "done" — and you get a prototype that looks different every session. With Toolcraft, the agent builds on a fixed application architecture: the canvas, toolbar, layers, timeline, and keyframes already exist; the component library supplies the controls; the docs/toolcraft rules and .agents/ skills tell it how to build; and the four checks (unit, browser, acceptance, performance) verify the result. The starter is the floor, not the ceiling.
Can I deploy a Toolcraft app anywhere?
Yes — npm run build produces a standard production bundle, and the project documents deployment to Cloudflare, Vercel, and Netlify. Because Toolcraft is files in your folder rather than a cloud service, there is no platform lock-in: the same build output deploys anywhere that serves the stack the starter produces.
Sources
Every fact in this guide was verified on 2026-11-02 from the sources below; numbers that move daily (like the star count) are reported as of that date.
- toolcraft.sh — official site: tagline "Build your own design apps with AI"; the
npx @pixel-point/toolcraft createcommand; works with Codex, Claude, Cursor, or any AI agent; stack and canvas features - toolcraft.sh/components — official component documentation: canvas behaviors (pan/zoom, toolbar, layers, timeline, keyframes) and the full component library list
- github.com/pixel-point/toolcraft — README: open-source starter kit + UI library + AI harness; MIT license ("completely free, open-source software licensed under MIT"); 975 stars, 47 forks, created 2026-07-14; the
createcommand variants;docs/toolcraftand.agents/directories; npm scripts (npm run dev,test,verify:quick,verify:final,build); dev server at localhost:3002; use cases and example apps; FAQ (30–60 minutes to first result, 1–3 days and 30–50 iterations per app, $100+/month plan guidance, not an app or cloud service, files processed in browser and sent nowhere, deploys to Cloudflare/Vercel/Netlify, Windows/Mac/Linux) - pixelpoint.io/blog/how-to-craft-personal-design-tools-with-toolcraft/ — Pixel Point's own write-up: the CLI asks for the project name then the AI agent to install the right skills; components live in your project and the AI is instructed not to change them unprompted; performance guidance and checks
- newsoftoday.com Show HN syndication (October 29, 2026) — the launch post: "MIT-licensed, 100% free starter kit, UI library, and AI harness for building your own design apps. Works with Codex, Claude, Cursor, or any other agents."
- deepwiki.com/pixel-point/toolcraft — repository-layout reference: example apps (ascii, hero, grass-world, neon-iceberg)
