Artifold는 Claude Code나 Codex를 사용하여 HTML 페이지(보고서, 슬라이드 덱, 트래커, 설명 자료 등)를 작성하는 사람들을 위한 두 가지 도구입니다.
- **
craft**는 에이전트의 기능입니다. 콘텐츠를 먼저 편집하고, 주제에 맞는 레이아웃, 글꼴 및 어조를 선택하며, 헤드리스 브라우저에서 결과를 확인한 후 잘못된 부분을 수정합니다.
- **라이브러리(The library)**는 로컬 대시보드(
artifold serve)입니다. 사용자가 지정한 폴더 내의 모든 HTML 파일을 찾아 각 페이지의 버전을 그룹화하고, 그중 원하는 것을 한 번의 클릭으로 GitHub Pages에 공유할 수 있게 해줍니다.
Same prompt, plain Claude vs craft
<sub>동일한 프롬프트와 모델을 사용했습니다. 왼쪽은 스킬이 없는 Claude이고, 오른쪽은 craft를 적용했을 때입니다. 총 11쌍의 예시는 gallery에서 확인할 수 있습니다.</sub>
Figma의 디자이너, OpenAI와 Meta의 엔지니어들, 그리고 DoorDash의 데이터 엔지니어가 craft로 만든 페이지들을 극찬했습니다.
이러한 도구가 존재하는 이유
저는 Claude를 이용해 파트너를 위한 30일 운동 트래커를 만들었습니다. 몇 주 후 그것을 찾을 수 없게 되었습니다. 프로젝트 폴더와 다운로드 파일 더미 어딘가에 있었기 때문이죠. 그래서 저는 다시 요청했습니다. 새로 만들어진 것은 이전보다 더 나빴고, 대부분의 AI 페이지처럼 보였습니다: 보라색 그라디언트와 동일한 카드들이 늘어선 모습이었습니다.
Claude Code 팀의 Thariq은 결국 수동으로 같은 검색을 했습니다:
"제 코드 폴더를 읽고 제가 생성했던 모든 HTML 파일들을 찾아서 그룹화하고 분류해 주기를 Claude Code에 요청했습니다..."
Thariq, The Unreasonable Effectiveness of HTML
그래서 저는 일반적인 모양을 위한 craft와 분실된 페이지를 위한 라이브러리를 만들었습니다. 두 도구는 데이터를 공유합니다. craft가 레이아웃을 선택하기 전에, 사용자의 최근 몇 페이지들을 확인하여 중복되는 것을 방지합니다. 저장되는 각 페이지는 제목과 설명이 이미 채워진 상태로 라이브러리에 도착합니다.
페이지 만들기: craft
Claude Code에서 /craft a 30-day strength tracker for a beginner를 입력하거나, Codex에서는 $craft ...를 입력하면 다음과 같이 작동합니다:
- 작업이 얼마나 많은 디자인을 필요로 하는지 결정합니다. 일일 체크리스트는 깔끔한 텍스트만 담고 그 이상은 없습니다. 발표 자료(deck)나 공개 페이지는 자체 레이아웃과 글꼴 조합을 갖습니다.
- 스타일링하기 전에 콘텐츠를 편집합니다: 독자가 기억해야 할 것, 잘라내야 할 것, 그리고 산문 대신 표나 차트로 들어가야 하는 것을 파악합니다.
- 이 주제에 맞는 레이아웃, 시각적 스타일 및 톤을 선택하고, 사용자 정의 차트, 실행 여백 주석(running margin note), 또는 여권 스탬프처럼 진행 상황을 보여주는 것과 같은 세부 사항 하나를 추가합니다.
- 페이지를 15가지 명명된 AI 디자인 습관(보라색 그라디언트 히어로 섹션, 동일한 아이콘 카드, 이모지 글머리 기호, 유리 패널, 모든 것을 중앙 정렬)에 따라 검사하고 이를 제거합니다.
- 헤드리스 브라우저에서 데스크톱 및 휴대폰 너비로 페이지를 렌더링하고 발견된 문제를 수정합니다.
~/artifold-inbox/에 저장되며, 몇 초 안에 라이브러리에서 표시됩니다.
이전에 만든 것을 가리킬 수도 있습니다: /dobble 같은 포커 배당률 설명 자료(poker odds explainer)를 제작해 줘는 해당 페이지의 실제 CSS부터 시작합니다.
The SF coffee tier list, plain Claude vs craft
페이지 유지 관리: 라이브러리
Artifold demo
모든 것을 찾습니다
여러 폴더를 지정하면 그 안의 모든 HTML 파일을 인덱싱합니다. 각 아티팩트(artifact)는 스크린샷 썸네일, 카테고리, 그리고 그것이 무엇을 위한 것인지에 대한 한 줄 설명을 갖게 되어, 유사한 치트 시트를 한눈에 구별하기 쉽습니다. 검색은 제목, 헤딩, 시작 텍스트, 프롬프트 및 의도를 포함합니다. ⌘K를 누르면 모든 곳으로 이동할 수 있습니다.
node_modules, 빌드 출력물(build output), 복제된 git 레포지토리, 서버 템플릿, 그리고 max_depth(기본값 3)보다 깊게 중첩된 모든 것은 건너뜁니다.
기록을 유지합니다
report-v2.html 또는 report (1).html과 같이 이름이 지정되거나 같은 페이지의 날짜별 사본 파일들은 버전 선택기(version picker)와 차이점 보기(diff view)가 있는 하나의 카드로 통합됩니다. 인플레이스(in place)로 편집하는 페이지도 개정 이력(revision history)을 유지하며, 카드에는 얼마나 많이 수정하거나 열었는지 횟수가 표시됩니다.
아무 카드에서든 공유를 클릭하면 보통 1분 이내에 https://you.github.io/artifold-share/abc12345.html와 같은 영구 링크가 클립보드에 복사됩니다. 이는 사용자의 GitHub Pages에 게시되며, 무료이고 만료일이 없으며, 받는 사람이 별도로 설치할 필요가 없습니다. 이 기능은 gh CLI를 사용하므로, 해당 곳에서 GitHub에 로그인해야 합니다. 또한 모든 아티팩트를 PDF로 내보낼 수도 있습니다.
Share flow in detail pane
다른 디자인 스킬과도 작동합니다
이 라이브러리는 Claude, ChatGPT Canvas, v0, Cursor 또는 기타 디자인 스킬 등 어떤 것이 작성했든 HTML을 인덱싱합니다. 차이점은 각 페이지에 대해 얼마나 많이 학습할 수 있는지입니다.
| Made with | Artifold knows |
|---|
craft | 의도(intent), 선택된 레이아웃 및 스타일, 그리고 그러한 선택의 이력 |
| ... | |
마지막 행은 페이지에서 아무것도 필요하지 않으며 라이브러리가 하는 대부분을 다룹니다. 처음 두 행은 페이지가 <head> 몇 줄로 무엇인지 말할 수 있기 때문에 존재합니다. 디자인 스킬을 구축하는 경우, 해당 형식은 docs/ARTIFACT-METADATA.md에 문서화되어 있으며, 그 내용 중 Artifold에 특정한 것은 없습니다. 자체 형식을 가진 스킬은 adapters를 통해 읽어지며, 새로운 어댑터에 대한 pull request는 환영합니다. | |
artifold skills를 실행하여 설치된 목록을 확인할 수 있습니다.
방해되지 않습니다 (Stays out of the way)
실행 중인 artifold serve는 아무것도 변경되지 않을 때 약 30MB의 메모리와 CPU를 사용하지 않습니다. 파일이 변경되면, 내 라이브러리(약 300페이지)를 다시 스캔하는 데 0.7초가 걸립니다. 이는 변경되지 않은 파일은 크기와 수정 시간을 통해 인식되어 재읽기가 필요 없기 때문입니다. 페이지를 반복 작업할 때, 해당 미리보기 이미지는 편집을 멈출 때까지 기다리므로, 일괄적인 저장(burst of saves)은 저장당 한 번이 아닌 헤드리스 브라우저를 한 번만 실행합니다.
설치
모든 것: 에이전트에게 맡기세요
Claude Code 또는 Codex에 이것을 붙여넣으세요:
⚠️ [팁]
pipx를 사용하여 https://github.com/shubhamgoel27/artifold에서 Artifold 설치하기
(또는 pipx가 설치되지 않았다면 pip 사용). 그런 다음 `artifold install-skill`을 실행하여 craft 스킬을 설정하고, `artifold init`을 실행하여 모니터링할 폴더를 지정하세요. 열기...
스킬만 사용할 경우
좋아 보이는 페이지가 필요하고 라이브러리는 필요하지 않다면, 대신 이것을 붙여넣으세요:
[팁]
pipx를 사용하여 https://github.com/shubhamgoel27/artifold에서 craft 스킬만 설치하세요.
폴더 artifold/skills/craft (SKILL.md 및 references/)를 Claude Code의 경우 ~/.claude/skills/craft로, 또는 ...에 복사하세요.
아니면 직접 실행할 수 있습니다. Codex의 경우, ~/.claude/skills를 ~/.agents/skills로 변경하세요:
mkdir -p ~/.claude/skills && curl -sL https://github.com/shubhamgoel27/artifold/archive/main.tar.gz \
| tar -xz -C ~/.claude/skills --strip-components=3 artifold-main/artifold/skills/craft
이 스킬은 라이브러리 없이 작동합니다. 단지 과거 페이지를 볼 수 없기 때문에, 반복을 피할 때 참고할 자료가 적습니다. 나중에 라이브러리를 설치하면, 다음 실행부터 스킬이 이를 사용하기 시작합니다.
모든 것을 직접 설정하기
pipx install artifold
artifold init
artifold
pipx가 없나요? Mac에서는 brew install pipx를, 어디서든 python -m pip install --user pipx를 사용하세요. init은 찾은 모든 에이전트(~/.claude/skills/는 Claude Code용, ~/.agents/skills/는 Codex용)에 대해 craft를 설치합니다. 그 후에 에이젠트를 재시작하여 스킬을 인식하게 하세요.
첫 번째 스캔은 썸네일을 위해 헤드리스 Chromium(약 170 MB)을 다운로드합니다. 그 후에는 새롭거나 변경된 페이지만 캡처됩니다.
명령어
artifold
artifold init
artifold add <디렉토리>
...
설정
artifold config로 목록을 확인하고, artifold config <key> <value>를 사용하여 하나를 변경할 수 있습니다.
설정 파일은 macOS에서는 ~/Library/Application Support/artifold/config.json에, Linux에서는 ~/.config/artifold/config.json에 위치합니다:
{
"roots": ["/Users/me/Downloads", "/Users/me/work"],
"allow_repos": [],
...
썸네일, 대시보드 및 브라우저는 ~/Library/Caches/artifold/에 있습니다. 이 폴더를 삭제해도 안전하며, 다음 스캔 시 파일에서 다시 구축됩니다.
키보드 단축키
| Key | Does |
|---|
⌘K / Ctrl+K | 팔레트 열기: 아티팩트 검색 및 액션 실행 |
| ... | |
선택 사항: AI 설명
인덱싱과 검색은 AI 없이 오프라인으로 작동합니다. craft나 Hallmark로 만든 페이지는 이미 스스로를 설명하고 있습니다. 그 외의 모든 경우에 대해, Claude Haiku에게 각 아티팩트에 대한 한 줄 설명을 작성하도록 할 수 있습니다:
pipx install 'artifold[intent]'
export ANTHROPIC_API_KEY=sk-ant-...
artifold scan --intent
각 아티팩트는 반 센트도 안 되는 비용이 들며, 한 번 실행됩니다. 결과는 콘텐츠별로 저장되므로, 페이지가 변경될 때까지 나중에 스캔해도 재사용됩니다.
기기 외부로 전송되는 것
Artifold는 호스팅 서비스나 계정이 없습니다. 대시보드는 localhost에서 실행되며, CLI는 자격 증명을 보유하지 않습니다. 파일이 있는 곳에서 읽고, 요청받지 않는 한 절대 이동하거나 다시 쓰지 않습니다.
아티팩트를 어디든 전송하는 유일한 것은 artifold share이며, 이는 선택한 하나의 아티팩트를 사용자 자신의 GitHub Pages에 게시합니다.
상태
버전 0.14, 알파입니다. 저는 macOS에서 매일 사용하며; Linux는 작동할 것으로 예상하고; Windows는 테스트되지 않았습니다. Python 3.10부터 3.13까지 178개의 테스트와 CI가 있습니다.
개인 프로젝트이므로 제가 필요한 것을 먼저 구축하지만, 이슈나 풀 리퀘스트는 환영합니다. 뭔가 혼란스럽다면 이슈를 열어주세요; 한 줄이면 충분합니다.
로드맵
