pixel-point/toolcraft

Toolcraft – AI‑assisted starter kit for custom design apps

What it is – An open‑source starter project and UI component library that lets you quickly scaffold a web‑based design tool (canvas, controls, export, animation timeline, etc.). The kit is meant to be used together with a code‑generation AI agent such as GitHub Codex, Anthropic Claude Code, or Cursor Code. The AI reads the generated files, runs the provided commands, and follows the built‑in “AI harness” instructions to add or modify features.

Core pieces (as listed in the repo)

• A ready‑made React + TypeScript app built with TanStack Router, Tailwind CSS and Base UI.
• A canvas component with pan/zoom, plus a library of UI controls (buttons, sliders, font pickers, color palettes, curve editors, image uploaders, etc.).
• Built‑in layer handling, animation timelines and key‑frame support.
• Export pipelines for images and video.
• A set of test suites (unit, browser, acceptance, performance) and a verify command that runs the full quality gate.
• “AI harness” files that give the coding agent the skills, prompts and safety checks needed to work inside the Toolcraft design system.

How you start

1. Prompt‑first – Open an empty folder in your AI coding agent, paste the provided prompt, replace the placeholder with a description of the tool you want, and let the agent run npx --yes @pixel-point/toolcraft create --yes.
2. CLI‑first – Run npx @pixel-point/toolcraft create in a terminal, answer the interactive prompts, then ask the agent to start a preview (e.g., “Build an app that applies an ASCII effect to an uploaded image and start a local preview.”).
3. The generated project lives in a folder you choose; the dev server runs on localhost:3002 (or the next free port).

Typical apps you can build

• Procedural graphics or gradient generators.
• Image‑stylisation tools (ASCII, pixel, halftone, glitch, etc.).
• Small WebGL/Three.js or shader experiments.
• Animation or video‑effect utilities.
• Simple brand‑asset generators for blog covers, social media images, etc.

Why not just use Figma? Toolcraft shines when you need a repeatable, custom workflow that Figma can’t express—e.g., batch‑processing hundreds of layers, exposing bespoke parameters, or exporting video. The resulting app can be shared with clients or teammates and runs entirely in the browser without sending files to a cloud service.

Running & testing

npm install          # install deps
npm run dev          # start local dev server (http://localhost:3002)
npm run test        # unit + contract tests
npm run verify:quick # fast dev‑quality checks
npm run verify:final # full functional gate
npm run build        # production bundle

Licensing – MIT license, free for commercial use, modification and redistribution.

Where to learn more – Official site toolcraft.sh, a gallery of example apps, a YouTube walkthrough, and a blog post that walks through building a personal design tool.