storytold/figcraft

외부 오픈소스 저장소를 소개하는 글입니다. HDATF 제품이 아닙니다.

무엇을 하나

FigCraft는 앱과 웹 화면을 만드는 디자이너와 개발자를 위해 ArtCraft 팀(GitHub의 storytold 조직)이 Figma의 작업 방식을 clean-room 방식으로 다시 만든 Rust 화면 디자인 앱입니다. auto layout 프레임, 컴포넌트와 variant, 모드가 있는 변수, 프로토타입을 다루고, Dev Mode는 컴포넌트 속성을 매개변수로 바꾼 CSS, React, SwiftUI 같은 코드를 씁니다. 파일은 로컬 디스크의 .figcraft 압축 파일로 저장되고 레이어는 PNG, SVG, PDF 등으로 내보내며, .fig 파일은 best effort 수준으로 열고 .fig 내보내기는 실험 기능입니다. 모든 메뉴와 도구는 400개가 넘는 명령이 든 한 목록에서 실행되며, 같은 명령을 figcraft-cli 도구, MCP 서버(AI 에이전트가 도구를 부르는 프로토콜), JSON 제어 채널에서도 부릅니다. MCP 서버는 창 없이(headless) 실행하거나 실행 중인 앱에 붙고, 제어 채널은 127.0.0.1에서만 연결을 받지만 이번 조사에서 읽은 제어 채널 코드에서는 키 확인을 찾지 못했습니다. 앱은 계정과 telemetry(사용 정보 전송) 없이 오프라인으로 동작하지만, README에 따르면 공유 메뉴의 온라인 공유는 기본으로 공개 서버(collab.craftapps.dev)에 파일을 올립니다. 이 서버는 파일을 암호화 없이 저장해 운영자가 읽을 수 있고, 지우거나 30일 동안 아무도 열지 않을 때까지 보관하며, 편집 링크나 보기 링크 자체가 접근 권한이 됩니다. 직접 운영하는 figcraft-server(미리보기 단계, 배포판에 Linux용 포함)는 편집 링크와 보기 링크로 팀 파일을 보관하며, 아직 사용자 계정이 없습니다. 시작은 macOS, Windows, Linux, FreeBSD용 배포 패키지, 정적 웹판, Rust 1.95 이상 빌드 중 하나로 하고, 에이전트 연결은 MCP 클라이언트 설정에 figcraft-cli mcp를 추가하는 별도 단계입니다. 한국어 화면 번역은 원어민 검토를 기다리는 기계 초안이고 문서의 한글 표시와 IME 입력은 동작하며, 웹판은 WebGPU나 WebGL2를 지원하는 브라우저가 필요하고 CJK 글꼴을 넣어 빌드해야 한국어를 제공합니다. 프로젝트는 alpha 단계로 실무에서 Figma를 대체할 수준의 절반 정도(README 49%, ROADMAP 53%)라고 추정하고, 실제 Figma 파일 확인을 남은 일로 두며, AI 에이전트 4개에서 6개가 병렬로 약 25시간 만에 만들었다고 밝힙니다. GitHub 메타데이터의 라이선스는 Apache-2.0이지만 LICENSE 파일과 README는 사용자가 MIT와 Apache-2.0 중 하나를 고르게 하며, ArtCraft 이름과 로고는 이 라이선스에서 빠집니다.

라이선스

Apache-2.0 허용 범위가 넓고 특허 사용 허락이 포함됩니다. 상업적 이용이 가능하며 고지 문구를 유지하고 변경 사실을 밝혀야 합니다.

같은 분야 저장소

• wheresryan22/anatomy
  Anatomy는 Claude Code용으로 쓰였고 OpenCode, Codex, Antigravity에서도 불러 쓰는 Agent Skill(AI 코딩 에이전트가 지시문으로 읽는 SKILL.md 파일이 든 폴더)입니다. 이 skill은 에이전트가 기술 개념을 그 작동 자체가 개념이 되는 실제 기계로 고안해 대화형 등각 투영(isometric) 그림으로 그리게 하며, 문서, 블로그 글, 랜딩 페이지에 넣을 설명 그림이 필요한 사람이 대상입니다. 입력은 크기, 개수, 속도 같은 실제 숫자를 담아 개념이나 기계를 지정하는 요청과 출력 형식, 밝은 테마나 어두운 테마 선택입니다. 결과물은 사용자가 소유하는 소스로, Node 빌드 스크립트와 단독 HTML 페이지, SVG 파일 하나, React 18 이상용 React와 Next.js 형상 모듈 가운데 하나이며 그리기 kit도 함께 들어갑니다. 그림은 실시간 판독값이 있는 카드에 입체 부품을 담은 SVG, 불, 물, 김을 그리는 WebGL 셰이더 층을 더한 SVG, 움직이는 부품을 매 프레임 다시 투영하는 베타 단계의 3D 모드 세 종류입니다. SKILL.md는 먼저 크기(부품 40개에서 80개의 Figure, 80개에서 150개의 Hero, 사용자가 고를 때만 만드는 6시간 이상의 Epic)를 고르고 실제 숫자를 모은 뒤 kit으로 형상을 만들게 합니다. 검증도 이 순서에 들어 있어서, kit/audit.mjs가 부품끼리 뚫고 지나가는지와 모든 끝이 mount(고정되는 부분)에 붙었는지 검사하고, skill은 에이전트에게 headless Chrome으로 찍은 PNG를 모두 읽게 합니다. Node.js 20.10 이상의 기본 모듈만 써서 API 키와 npm 설치가 필요 없고 검사에는 Chrome이나 Chromium이 필요하며, Codex의 sandbox가 Chrome을 막으면 검사만 실패합니다. 설치는 skills CLI나 에이전트의 skills 폴더로 clone하는 방식이고 라이선스는 MIT이며, 설치하면 /anatomy로 skill을 부를 수 있게 될 뿐 그림마다 긴 에이전트 세션이 필요합니다. README는 대상을 기계, 계측기, 도구, 가구로 한정하고 axis와 series가 있는 데이터 차트, 사람, 정확한 지도는 범위 밖으로 둡니다. SECURITY.md에 따르면 검사 스크립트는 일회용 프로필과 allow-file-access-from-files 옵션으로 headless Chrome을 띄우고, drive.mjs는 넘겨받은 JavaScript를 페이지 안에서 실행합니다. 요청하면 publish.mjs가 사용자 동의 뒤 소스와 요청문을 공개 저장소 anatomy-community에 pull request로 보내며, 로그인한 GitHub CLI가 필요하고 Claude Code 세션 로그에서 시간과 token을 읽습니다.
• Jakubantalik/transitions.dev
  transitions.dev는 웹 화면에 쓰는 CSS 전환 효과 모음과, 이를 프로젝트에 넣는 CLI, 코딩 에이전트용 skill, 화면 움직임을 검사하는 transitions-agent를 함께 담은 저장소입니다. 화면 전환과 애니메이션을 일관되게 맞추려는 프런트엔드 개발자와 Claude Code나 Cursor 같은 코딩 에이전트로 화면을 만드는 사람이 주요 대상입니다. 각 전환은 :root 사용자 정의 속성, t- 접두어 클래스, prefers-reduced-motion 대응을 갖춘 복사용 CSS 코드 조각으로 제공됩니다. transitions-dev CLI(MIT, Node 18 이상)는 계정 없이 무료 전환을 추가하고 목록을 보여 주며, Pro 전환은 기기 로그인 뒤 api.transitions.dev에서 내려받고 내려받을 때마다 이용 권한을 확인합니다. transitions-agent(MIT)는 11개 규칙으로 화면 코드를 로컬에서 검사해 0부터 100까지 모션 점수를 매기고, GitHub Action은 PR에 점수 댓글을 단 뒤 해당 PR 브랜치를 대상으로 수정 PR을 엽니다. fix 명령은 관련 파일을 호스팅 수정 서비스로 보내 Claude가 만든 수정안을 diff로 먼저 보여 주고, 사용자가 승인한 뒤에만 파일에 반영하며, 수정 범위는 CSS 전환과 애니메이션 보호 코드로 한정된다고 설명합니다. 무료 가입 단계는 검사와 Action을 무제한으로, 본인의 Claude Code나 Cursor로 하는 수정도 무제한으로, 호스팅 수정은 월 10회와 하루 2회까지 제공하고, Business 요금제는 월 59달러에 Pro 5석과 월 200회 수정을 포함합니다. 자체 Transitions.dev License는 개인과 상업 프로젝트에서 수정과 배포를 허용하고 경쟁 라이브러리로의 재배포를 금지하며, 회사에서 Pro 전환이나 유료 Agent 기능을 쓰려면 사람마다 Business 좌석이 필요합니다. CLI와 agent 도구 코드는 MIT이고, GitHub가 라이선스를 NOASSERTION으로 표시하는 것은 이 자체 라이선스 때문으로 보입니다. 전환 개수는 README 표 12개, README 본문 18개, 저장소 설명 43개 이상, agent 문서의 무료 32개와 Pro 11개로 서로 달라 실제 개수는 직접 세어 봐야 하며, 호스팅 수정은 코드를 외부 서비스로 보내므로 회사 코드에 쓰기 전에 보낼 파일 범위를 정해야 합니다.
• CopilotKit/OpenIntelligentUI
  OpenIntelligentUI는 질문에 대한 답을 글뿐 아니라 표와 조작 가능한 화면으로 보여주는 채팅 앱과 개발 기반입니다. 설명과 비교, 간단한 도구를 대화 안에서 제공하려는 개발자를 대상으로 합니다. 사용자 질문을 Python 에이전트가 처리하고 CopilotKit과 AG-UI를 통해 브라우저로 결과를 전달합니다. Jev가 표현 방식을 고르며 기본 표는 A2UI, 복잡한 시각화와 계산기는 샌드박스 안의 HTML, CSS, JavaScript로 구성합니다. 화면의 버튼과 입력값은 후속 질문으로 보낼 수 있지만 이전 결과를 다른 호출에서 직접 고치는 API는 없다고 설명합니다. 실행 환경은 Node.js 22 이상, pnpm 9 이상, Python 3.12 이상과 uv이며 답변용 OpenAI 키와 Jev용 키를 별도로 연결해야 합니다. 사용자 키는 브라우저 메모리에 머물지만 앱 서버를 거쳐 제공자에게 전달되므로 신뢰할 수 있는 배포에서만 사용해야 합니다. 확인한 query_data 소스는 샘플 CSV 전체를 반환하며 검색어 필터링이나 실시간 회사 데이터 조회를 하지 않습니다. 대화 체크포인트는 프로세스 메모리에 있어 재시작이나 여러 서버 운영 시 영속성이 보장되지 않습니다.
• storytold/vectorcraft
  VectorCraft는 경로, 글자, 레이어와 여러 작업 영역을 다루는 디자이너를 위한 Rust 벡터 일러스트 편집기입니다. JSON 기반 전용 문서, SVG와 PDF를 열며 PDF 호환 Illustrator 파일도 대상으로 하고 벡터나 일반 이미지로 내보냅니다. 도형 연산, 편집 가능한 외관 효과와 별도 렌더링 엔진을 두어 화면 자체와 문서 자료를 분리합니다. CLI와 에이전트 도구 연결 규약인 MCP는 화면 없는 실행 또는 데스크톱 연결 모드에서 그리기 명령, 문서 검사와 렌더링 미리보기를 제공합니다. 현재 Cargo 설정은 Rust 1.95를 명시하며 데스크톱 대상은 macOS, Windows, Linux, FreeBSD이고 브라우저 빌드는 WebAssembly를 사용합니다. 일본어 글꼴은 선택적인 공용 저장소에서 가져올 수 있고 데스크톱에서는 해당 자료가 없으면 설치된 시스템 글꼴을 사용합니다. README는 Illustrator와의 완전한 동등성을 약속하지 않고 고급 효과, 한중일 세로 조판, 세부 조작과 Windows 및 Linux 패키징의 부족을 밝힙니다. MCP 문서도 진행 알림, 실행 중 취소와 자료 변경 구독이 미구현이라고 명시하며 렌더링 속도 주장은 이번 조사에서 독립적으로 재현하지 않았습니다.
• kargulstudio/sales-crm
  README는 Next.js 16, React 19, Tailwind CSS 4 기반 시작 템플릿으로 설명합니다. AVIF 이미지 변환과 동영상 및 Rive 파일의 포스터 생성 스크립트를 포함합니다.

Trendshift 순위 목록에 오른 저장소만 담았고, 목록은 후보를 찾는 데만 썼습니다. 순위 숫자는 옮기지 않았습니다. 설명과 라이선스, 별 수는 각 GitHub 저장소에서 확인했습니다. 해설은 우리의 판단입니다. 이 프로젝트들을 직접 시험한 것은 아니며, 상승 목록에 올랐다고 품질이 증명되지는 않습니다.