pixel-point/toolcraft

Toolcraft – 맞춤형 디자인 앱을 위한 AI 지원 스타터 키트

개요 – 웹 기반 디자인 도구(캔버스, 컨트롤, 내보내기, 애니메이션 타임라인 등)를 빠르게 구축할 수 있는 오픈 소스 스타터 프로젝트 및 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 또는 셰이더 실험.
• 애니메이션 또는 비디오 효과 유틸리티.
• 블로그 커버, 소셜 미디어 이미지 등을 위한 간단한 브랜드 자산 생성기.

왜 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 가이드, 그리고 개인용 디자인 도구 구축 과정을 다룬 블로그 게시물을 확인하세요.