pixel-point/toolcraft

Toolcraft – カスタム設計アプリのためのAI支援スターターキット

概要 – Webベースの設計ツール（キャンバス、コントロール、エクスポート、アニメーションタイムラインなど）を迅速に構築できる、オープンソースのスタータープロジェクトおよびUIコンポーネントライブラリです。このキットは、GitHub Codex、Anthropic Claude Code、Cursor Codeなどのコード生成AIエージェントと組み合わせて使用することを想定しています。AIは生成されたファイルを読み込み、提供されたコマンドを実行し、組み込みの「AIハーネス」の指示に従って機能を追加または変更します。

主要コンポーネント（リポジトリに記載）

• TanStack Router、Tailwind CSS、Base UIを使用して構築されたReact + TypeScriptアプリケーション。
• パン/ズーム機能を備えたキャンバスコンポーネントと、UIコントロールのライブラリ（ボタン、スライダー、フォントピッカー、カラーパレット、カーブエディター、画像アップローダーなど）。
• レイヤー処理、アニメーションタイムライン、キーフレームサポートを内蔵。
• 画像および動画のエクスポートパイプライン。
• テストスイート（ユニット、ブラウザ、受け入れ、パフォーマンス）および品質ゲートを実行する verify コマンド。
• Toolcraft設計システム内で作業するために必要なスキル、プロンプト、安全チェックをAIエージェントに提供する「AIハーネス」ファイル。

開始方法

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 やシェーダーの実験。
• アニメーションやビデオエフェクトのユーティリティ。
• ブログのカバー画像やSNS用画像などのシンプルなブランドアセットジェネレーター。

なぜFigmaを使わないのか？ Toolcraftは、Figmaでは表現できない反復可能でカスタムなワークフローが必要な場合に真価を発揮します。例えば、数百のレイヤーのバッチ処理、独自のパラメータの公開、動画のエクスポートなどです。生成されたアプリはクライアントやチームメンバーと共有でき、ファイルをクラウドサービスに送信することなくブラウザ内で完全に動作します。

実行とテスト

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のチュートリアル、および個人用設計ツールの構築方法を解説したブログ記事をご覧ください。