pixel-point/toolcraft

Toolcraft – 用于自定义设计应用程序的 AI 辅助入门套件

它是什么 – 一个开源的入门项目与 UI 组件库，让您可以快速搭建网页版设计工具（画布、控件、导出、动画时间轴等）。此套件旨在与代码生成 AI 代理（例如 GitHub Codex、Anthropic Claude Code 或 Cursor Code）搭配使用。AI 会读取生成的档案、执行提供的指令，并遵循内置的“AI 导引”说明来新增或修改功能。

核心组件（如仓库中所列）

• 一个使用 TanStack Router、Tailwind CSS 和 Base UI 构建的 React + TypeScript 应用程序。
• 包含平移/缩放功能的画布组件，以及一系列 UI 控件（按钮、滑块、字体选择器、调色板、曲线编辑器、图片上传器等）。
• 内置图层处理、动画时间轴与关键帧支持。
• 图片与视频的导出管线。
• 一套测试套件（单元测试、浏览器测试、验收测试、性能测试）以及执行完整质量把关的 verify 指令。
• “AI 导引”文件，赋予编程代理在 Toolcraft 设计系统内工作所需的技能、提示词与安全检查。

如何开始

1. 提示词优先 – 在您的 AI 编程代理中打开一个空文件夹，粘贴提供的提示词，将占位符替换为您想要的工具描述，并让代理执行 npx --yes @pixel-point/toolcraft create --yes。
2. CLI 优先 – 在终端机执行 npx @pixel-point/toolcraft create，回答交互式提示，然后要求代理启动预览（例如：“Build an app that applies an ASCII effect to an uploaded image and start a local preview.”）。
3. 生成的项目会存放在您选择的文件夹中；开发服务器会在 localhost:3002（或下一个可用端口）运行。

您可以构建的典型应用程序

• 程序化图形或渐变生成器。
• 图片风格化工具（ASCII、像素、网点、故障艺术等）。
• 小型 WebGL/Three.js 或着色器实验。
• 动画或视频特效工具。
• 用于博客封面、社交媒体图片等的简单品牌资产生成器。

为什么不直接使用 Figma？ 当您需要 Figma 无法表达的可重复、自定义工作流程时，Toolcraft 就显得特别出色——例如批量处理数百个图层、公开自定义参数或导出视频。生成的应用程序可以与客户或团队成员共享，并完全在浏览器中运行，无需将文件传送到云端服务。

运行与测试

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

许可 – MIT 许可，可免费进行商业使用、修改与重新分发。

了解更多 – 官方网站 toolcraft.sh、示例应用程序库、YouTube 导览视频，以及一篇介绍如何构建个人设计工具的博客文章。