1DesignTool은 작성한 브리프를 실제로 동작하는 디자인으로 바꾸는 데스크톱 디자인 스튜디오입니다. 결과물은 실제 프로젝트 폴더 안의 진짜 HTML, CSS, JS이며, 이미 설치되어 있는 코딩 에이전트가 이를 빌드합니다. Claude Code, Codex, Cursor Agent, Devin 등 지원되는 CLI들이 빌드를 담당하고, 1DesignTool은 그 에이전트들에게 스튜디오를 제공합니다. 실시간 미리보기, design kit 규칙, 스티어링 도구, 그리고 내 디스크에 저장되는 내보내기까지요.
구조
"커피 정기구독을 위한 랜딩 페이지, 차분하고 에디토리얼하게"처럼 원하는 것을 작성하면 에이전트가 빌드합니다. 결과물은 목업이나 도형 캔버스가 아닙니다. 열고, 편집하고, 포크하고, 배포할 수 있는 파일 폴더입니다. 미리보기 패널이 폴더를 감시하기 때문에 화면의 디자인은 항상 디스크의 디자인과 같습니다.
이 분리가 핵심입니다. 에이전트는 첫 초안을 빠르게 만드는 데 강하고, 사용자는 "맞는" 결과가 어떤 모습인지 아는 데 강합니다. 1DesignTool은 이 인수인계를 중심으로 설계되었습니다. 에이전트가 빌드하고, 사용자가 스티어링합니다. 요소를 선택하고, 댓글을 쓰고, Tweaks 컨트롤을 살짝 조정하거나, 더 엄격한 게이트를 거쳐 작업을 다시 보내면 됩니다.
로컬 우선, 그리고 에이전트가 엔진
프로젝트는 사용자가 선택한 폴더에 저장됩니다. 실행은 사용자 자신의 에이전트 CLI와 계정을 통해 이루어지며, 앱은 에이전트용 API 키를 요구하지 않고 작업을 자체 서버로 프록시하지도 않습니다. 에이전트가 만든 결과는 design kit이 검사합니다. 대비, 최소 글자 크기, 히트 타겟, 모든 너비에서 동작하는 내비게이션까지요. 게이트를 통과하지 못한 디자인은 정확히 어디가 문제인지 알려줍니다.
무엇을 만들 수 있나
14개 템플릿은 소규모 팀이 실제로 출시하는 작업을 커버합니다. UI 목업과 와이어프레임, 슬라이드 덱, 모바일 화면, 인터랙티브 웹사이트, 브랜드 킷과 로고, 3D 오브젝트와 씬, 애니메이션, 이력서, 인포그래픽, HTML 이메일, 문서 등입니다. 각 템플릿에는 출력에 맞게 튜닝된 뷰어가 함께 제공됩니다. 덱에는 슬라이드 뷰어가, 이메일에는 클라이언트 너비 미리보기가, 3D에는 궤도 뷰포트가 붙습니다.
Tip: 빈 페이지가 아니라 템플릿에서 시작하세요. 템플릿이 에이전트에게 출력 형식, 뷰어, 적용되는 검사를 알려주기 때문에 브리프에는 아이디어만 담으면 됩니다.