1DesignTool을 가장 빠르게 둘러보는 방법은 브리프 하나와 스티어링 한 번입니다. 약 5분이면 됩니다. 이 페이지는 그 루프를 한 번 따라갑니다. 새 프로젝트, 첫 실행, 첫 수정까지 — 나머지 문서를 읽는 데 필요한 큰 그림을 잡기 위해서입니다.
프로젝트 만들기
홈 화면에서 New project를 누르거나, 홈 컴포저에 원하는 디자인을 바로 적으면 앱이 프로젝트를 만들어줍니다. 템플릿을 선택하면 에이전트에게 출력 형식 (슬라이드 덱, 모바일 화면 세트, UI 목업)을 알려주고 적절한 뷰어와 검사를 불러옵니다. Blank는 형식을 브리프에 맡깁니다.
첫 브리프 쓰기
좋은 첫 브리프는 아이디어, 대상, 느낌을 담습니다. 스펙이 아니라 한두 문장이면 됩니다. "커피 정기구독을 위한 랜딩 페이지 — 어둡고, 에디토리얼하고, 자신감 있는 타이포"면 충분합니다. Send로 보내면 실행이 시작됩니다. 컴포저에는 에이전트가 작업하는 모습이 표시되고, 실제 파일이 프로젝트 폴더에 생길 때마다 미리보기 패널이 채워집니다.
턴이 끝나면 게이트가 보고합니다. Design checks가 초록색이면 결과가 kit의 규칙(대비, 글자 크기, 히트 타겟, 모든 너비에서 동작하는 내비게이션)을 통과했다는 뜻입니다. 결과는 오른쪽 패널에서 계속 살아 있습니다. 호버하고, 클릭해 보고, 너비를 드래그해 보세요.
한 번 스티어링하기
헤드라인이 마음에 안 드나요? 미리보기에서 ⌥-click하고 한 줄을 쓰세요. "여기 타이트하게, 최대 두 줄로"처럼 보내면 됩니다. 댓글은 에이전트가 읽는 핀으로 남고, 다음 턴에서 정확히 그 지점이 수정됩니다. 더 큰 방향 전환이라면 컴포저에 후속 지시를 쓰세요.
Tip: 어떻게가 아니라 무엇을 스티어링하세요. "첫 화면 위에 여백을 더"가 "
margin-top: 4rem추가"보다 낫습니다. design kit이 그 방향을 프로젝트 전체에 일관되게 적용되는 토큰으로 바꿔줍니다.
한 단계 더: 모바일 앱, MCP로 재디자인
같은 루프가 더 큰 결과물로도 확장됩니다. 여기서는 Mobile app 프로젝트가 습관 추적 앱을 만듭니다 — Today 링, 스트릭, 통계 화면 — 네이티브 SwiftUI 스타일로요. 그런 다음 MCP client(Cursor)가 앱 밖에서 다음 턴을 구동합니다. 액센트를 바꾸고, 링을 굵게 하고, 주간 차트를 추가하는 재디자인입니다.
외부 턴도 다른 턴처럼 도착합니다 — 버블에 via MCP · Cursor 태그가 붙고, 실행은 트랜스크립트에 실시간으로 진행되며, 끝나면 게이트가 보고합니다. 스튜디오는 멈추지 않습니다. 클라이언트는 그저 실제 API를 쓸 뿐입니다.
MCP — 어떤 에이전트로든 스튜디오 구동하기에서 서버, 접근 패널, 클라이언트가 호출할 수 있는 것을 다룹니다.