1DesignTool의 모든 디자인은 같은 다섯 단계 루프를 거칩니다. 이 루프를 한 번 이해하면 문서의 다른 모든 페이지가 예측 가능해집니다. 스티어링, 배리언트, 내보내기, Build mode는 모두 같은 실행을 다른 각도에서 본 것입니다.
1. 브리프
원하는 것을 composer에 작성합니다. composer는 모든 프로젝트 하단의 입력란이거나, 새 프로젝트의 경우 홈 화면의 입력 상자입니다. 브리프는 템플릿, 디자인 시스템 규칙, 첨부한 핀·댓글·파일과 함께 에이전트에게 전달됩니다. 컴포저의 에이전트 칩에는 이번 실행이 사용할 CLI와 모델이 표시됩니다.
2. 빌드
앱은 프로젝트 폴더 안에서 에이전트를 헤드리스 서브프로세스로 실행하고
브리프와 design kit을 건네줍니다. design kit은 모든 프로젝트에
복사되는 평문 규칙집(.claude/skills/ 등)으로, 에이전트에게 여기서의
"좋은" 기준이 무엇인지 알려줍니다. 대비 하한, 타이포 스케일, 히트 타겟
크기, 마크업 구조입니다. 에이전트는 실제 파일을 작성하고, 미리보기는
폴더를 감시하며 파일이 생길 때마다 다시 그립니다.
3. 게이트
턴이 끝나면 게이트가 결과를 kit과 대조해 검사합니다. 텍스트 대비, 최소 글자 크기, 컨트롤 타겟, 폰과 태블릿 너비에서 죽은 내비게이션까지요. PASS는 결과를 그대로 가져가도 된다는 뜻이고, FAIL은 어떤 규칙이 어디서 깨졌는지 정확히 나열합니다. 그 결과를 한 줄짜리 수정 브리프로 에이전트에게 다시 보낼 수 있습니다. design kit 게이트를 참조하세요.
4. 스티어링
여기서 초안을 디자인으로 다듬습니다. 요소를 ⌥-click해 댓글을 핀으로 고정하거나, 에이전트가 노출한 실시간 컨트롤을 위해 Tweaks를 열거나, 더 큰 방향 전환을 위해 후속 브리프를 씁니다. 각 스티어링은 같은 루프를 도는 새로운 턴입니다. 에이전트가 다시 빌드하고, 게이트가 다시 검사합니다.
5. 배포
결과가 마음에 들면 Share / export가 패키징합니다. 템플릿의 내보내기 세트에 따라 ZIP, HTML, PNG, PDF, MP4로요. 프로젝트 폴더는 사용자가 둔 위치에 그대로 남아 있고, 모든 버전은 히스토리에서 복원할 수 있습니다.
Tip: 루프는 반복 비용이 쌉니다. 같은 브리프로 배리언트 세 개를 실행하고, 블라인드 비교해 우승자를 승격하세요. 정답을 맞히려고 긴 브리프 하나를 쓰는 것보다 낫습니다.