# Toolcraft: A Starter Kit for Building AI-Assisted Design Apps > Toolcraft is an open-source starter kit and component library from Pixel Point for building small custom design apps with an AI coding agent. It provides a canvas with pan and zoom, a set of UI controls, and an AI harness that helps agents like Claude Code or Cursor understand and extend the design system. **pixel-point/toolcraft** — Build your own design apps with AI. - Repository: https://github.com/pixel-point/toolcraft - Website: https://toolcraft.sh - Stars: 867 · Forks: 45 - Language: TypeScript - License: MIT - Published: 2026-09-17 · Updated: 2026-09-17 · Language: en - Canonical page: https://hysenlabs.com/projects/pixel-point-toolcraft ## What Toolcraft Is and Who It Is For Toolcraft is not an application. It is a collection of files: a starter app, a component library, and an AI harness that an AI coding agent copies into a project folder and then builds on. The README describes it as a batch of files copied into a folder of your choice when you use the command-line tool or ask an agent to do it. The project targets designers and developers who work with AI coding agents and want to build small custom creative tools: procedural graphics generators, image stylization apps, animation tools, or branded asset pipelines. These are situations where an existing design tool like Figma handles the general case but a custom app would allow more control over parameters, batch workflows, or export formats. Built by Pixel Point, the starter is licensed under MIT, which allows commercial use, modification, and distribution. Apps built with Toolcraft can be used for paid client work. ## What Toolcraft Includes: Canvas, Components, and AI Harness The starter app is built on TanStack Router, React, TypeScript, Tailwind CSS, and Base UI. The canvas provides familiar pan and zoom controls and serves as the drawing surface for whatever the agent implements. The component library includes buttons, dropdowns, sliders, font pickers, color palettes, curve editors, and image uploaders. Layers, animation timelines, and keyframes are available as opt-in features that the agent can enable as the project requires them. Image and video export workflows are also included from the start. The AI harness is the mechanism by which an agent understands the design system. It packages skills, instructions, and checks so that the agent builds consistently with Toolcraft's conventions rather than generating components from scratch. The README states the harness gives your agent the skills, instructions, and checks to build on Toolcraft's design system. The project also ships with unit, browser, acceptance, and performance checks, giving the agent feedback signals during implementation. ## Starting a Project with the CLI or an AI Agent The fastest path is through the CLI: ```bash npx @pixel-point/toolcraft create ``` This scaffolds a new project and prompts for configuration. The default local development server runs on port 3002. If that port is busy on first launch, the tool picks the next available port and remembers it. Alternatively, you can hand the entire setup to an AI coding agent. Open an empty project folder in Codex, Claude Code, Cursor, or another agent and give it this prompt: ```text Install any missing prerequisites, including Node.js and npm. Set up Toolcraft with `npx --yes @pixel-point/toolcraft create --yes`, then build [describe your tool] and start a local dev server. ``` The agent handles prerequisites, scaffold, implementation, and server startup without requiring any terminal commands from you. To start from an existing example, use the `--template` flag with the example name from the gallery: ```bash npx @pixel-point/toolcraft@latest create --template prism-flow ``` The gallery at toolcraft.sh lists all available examples with their clone commands. ## Expected Build Time and Iteration Count The README is explicit about iteration expectations. A first working result typically appears 30 to 60 minutes after the initial prompt. Complex tasks, such as reverse engineering a reference design, combining multiple WebGL effects, or building 3D tools, take longer. Pixel Point reports spending 1 to 3 days on a single app and going through 30 to 50 agent iterations before reaching a finished version. This is honest about what working with AI coding agents on design tools currently involves: it is an iterative process that requires judgment about when to redirect the agent, not a one-shot code generation task. The FAQ in the README also addresses AI plan costs directly. A $20 per month plan for Codex, Cursor, or Claude is described as not suitable for meaningful work. The recommendation is a plan costing at least $100 per month. This is a practical constraint to know before starting a project. ## When Toolcraft Is the Wrong Choice The README addresses the comparison with Figma directly in its FAQ: use Toolcraft only when a custom app would solve your task faster or better than Figma or another design tool. This is an unusual admission of scope for a project's own documentation. For standard design work, Figma's existing feature set, including its AI tools, will be faster than building a custom app. Toolcraft's value appears in specific scenarios: managing hundreds of small layers with repeated effects, producing batches of branded assets in a consistent style, or exporting video with custom parameters that Figma does not support. Toolcraft is also unsuitable for users who need a hosted or SaaS solution. It runs locally. There is no cloud platform, and the README explicitly states it is not a cloud service. ## Maintenance and License Details The last push to the repository was on 2026-09-17, and the project has no formal GitHub releases. The repository structure separates the starter app in the `starter/` directory from example projects in the `examples/` directory. The MIT license covers the starter. Because the license permits commercial use without requiring derivative works to be open-sourced, apps built with Toolcraft can be distributed to clients or deployed as commercial products without any license compliance burden. Toolcraft works on Windows, macOS, and Linux, as stated in the README FAQ. The only runtime requirement is Node.js and npm, which are also prerequisites for any AI coding agent workflow. ## Conclusion Toolcraft is the right starting point when you need a custom design tool that combines a visual canvas with a specific set of controls and want an AI coding agent to do most of the implementation work. It is a poor fit when an existing design tool already covers the task, since the README itself advises evaluating your current software before building a custom app. A $20 per month plan for Codex, Cursor, or Claude is explicitly stated as insufficient for meaningful work; plan for at least $100 per month. Start with `npx @pixel-point/toolcraft create` and review the example gallery at toolcraft.sh before describing your tool to an agent. ## FAQ ### Is Toolcraft free to use for commercial projects? Yes. The starter uses the MIT license, which allows commercial use, modification, and distribution. Apps built with Toolcraft can be used in paid client work and commercial products. ### Which AI agents work with Toolcraft? The README lists Codex, Claude Code, Cursor, and other coding agents that can read and edit project files, run commands, and follow the project's instructions. Toolcraft includes an AI harness with skills and checks to guide whichever agent you use. ### How do I start from an existing Toolcraft example instead of from scratch? Browse the gallery at toolcraft.sh, find the example you want, and click Clone with CLI to copy the setup command. Run that command in your terminal or give it to your AI agent. For example, to start from the prism-flow example: npx @pixel-point/toolcraft@latest create --template prism-flow ## Sources - [Issues](https://github.com/pixel-point/toolcraft/issues) - [License: MIT](https://github.com/pixel-point/toolcraft/blob/main/LICENSE) - [pixel-point/toolcraft on GitHub](https://github.com/pixel-point/toolcraft) - [Project website](https://toolcraft.sh) - [README](https://github.com/pixel-point/toolcraft/blob/main/README.md) --- Hysen Labs editorial analysis, written from the project's own repository and release notes. Cite the canonical page: https://hysenlabs.com/projects/pixel-point-toolcraft