Toolcraft 是一个开源启动套件和 UI 库,用于配合 AI 智能体(如 Codex、Claude、Cursor)构建自定义创意应用。

Stars

220

7 天增长

暂无数据

Fork 数

11

开放 Issue

1

开源协议

MIT

最近更新

2026-07-14

AI 仓库情报摘要
FR-AI / ANALYSIS

为什么值得关注

它提供了完整的预制基础(React/TypeScript、画布、控件、图层、导出),AI 智能体可按需扩展,快速生成定制化的创意工具,无需从零开始。

适合谁使用

  • 构建自定义创意或设计工具的开发者
  • 进行交互式实验原型制作的 AI 智能体用户
  • 希望自动化资产生成流程的设计师

典型使用场景

  • 创建过程式图形和渐变生成器
  • 构建图像风格化效果(ASCII、像素、半色调、故障艺术)
  • 开发动画和视频特效工具
  • 生成品牌封面或社交媒体素材

项目优势

  • 自带现成的画布、控件、图层、时间线和导出工作流
  • 兼容多种 AI 编码智能体(Codex、Claude、Cursor)
  • 每个生成项目的源代码均可自由编辑
  • 包含单元、浏览器、验收和性能测试

使用前须知

  • 专为视觉画布类应用设计,非通用 UI 工具包
  • 需要 AI 智能体来生成初始工具逻辑
  • 对不熟悉 React 和 TypeScript 的开发者有学习门槛

README 快速开始

Toolcraft

Toolcraft is an open-source starter kit and UI library for building custom design apps with AI. Use it to create small creative products, internal utilities, interactive experiments, and tools tailored to your workflow.

It works with any AI agent (Codex, Claude, Cursor).

Built by Pixel Point.

Create a project

Run the CLI:

npx @pixel-point/toolcraft create

Choose a project name and your AI agent. Then open the generated folder in that agent and describe the tool you want to build:

Build an app that applies an ASCII effect to an uploaded image.

Once the app is ready, start it locally:

npm run dev

What Toolcraft includes

  • A React and TypeScript starter app
  • A canvas with upload, pan, zoom, radar, and history support
  • Built-in controls for common creative-tool settings
  • Optional layers, animation timelines, and keyframes
  • Image and video export workflows
  • Local instructions for AI coding agents
  • Unit, browser, acceptance, and performance checks
  • Editable runtime and UI source inside each generated project

The checked-in app is intentionally neutral. It starts with the Toolcraft canvas, upload flow, controls panel, and toolbar. Product-specific controls, renderers, layers, timelines, and exports are added only when the tool needs them.

What to build

Toolcraft works best for apps that combine a visual canvas with a focused set of controls, such as:

  • Procedural graphics and gradient generators
  • Image stylization, ASCII, pixel, halftone, and glitch effects
  • Shader and Three.js experiments
  • Animation and video-effect tools
  • Blog cover and branded asset generators

Repository structure

  • src/app — product schema, acceptance coverage, and performance configuration
  • src/routes — application routes and Toolcraft composition
  • src/toolcraft/runtime — state, commands, canvas, panels, timeline, and export runtime
  • src/toolcraft/ui — Toolcraft controls and interface components
  • docs/toolcraft — local rules and reference docs for AI agents
  • e2e — browser acceptance and performance tests

This repository contains the standalone starter produced by the Toolcraft CLI. The runtime and UI source are included directly instead of being hidden behind a package, so generated projects can be inspected and changed when needed.

Commands

npm in

项目描述

A starter kit and UI library for building custom design apps with AI.

相关仓库与替代方案

根据分类、Topic 和编程语言匹配的相似项目。

TanStack
精选
TanStack GitHub avatar

router

TanStack Router is a type-safe, data-driven React router with built-in caching, prefetching, and nested layouts, while TanStack Start extends it into a full-stack SSR framework.

Web 开发前端框架
14,861
vercel-labs
精选
vercel-labs GitHub avatar

scriptc

scriptc compiles ordinary TypeScript into small, fast native executables without needing Node.js, V8, or any JavaScript runtime in the binary.

开发者工具代码质量与构建
1,985
Jakubantalik
精选
Jakubantalik GitHub avatar

thinking-orbs

A React component library that renders six hand-tuned animated thought orb loading indicators on a plain 2D canvas, with two purpose-tuned sizes and automatic theme detection for AI and agent UIs.

AI 与机器学习AI 智能体
1,191