Sleek으로 디자인하기

개요

sleek.design은 AI 기반 모바일 앱 디자인 도구입니다. /api/v1/*의 REST API를 통해 상호작용하여 프로젝트를 생성하고, 일반 언어로 만들고 싶은 것을 설명하면 렌더링된 화면을 반환받습니다. 모든 통신은 Bearer 토큰 인증이 있는 표준 HTTP를 사용합니다.

기본 URL: https://sleek.design 인증: 모든 /api/v1/* 요청에 Authorization: Bearer $SLEEK_API_KEY Content-Type: application/json (요청 및 응답) CORS: 모든 /api/v1/* 엔드포인트에서 활성화 응답 파싱: 본문을 파일(curl -o run.json)에 쓰고 파일을 파싱합니다. JSON을 echo를 통해 파이프하지 마십시오: zsh에서는 문자열 값 안의 이스케이프된 \n이 실제 줄바꿈으로 확장되어 본문이 유효하지 않은 JSON이 됩니다. API 문서: OpenAPI 스펙 https://sleek.design/api/v1/spec.json; 브라우징 가능 문서 https://sleek.design/api/v1/docs. 여기에 다루지 않은 계약 세부 사항은 스펙을 가져오세요.

사전 조건: API 키

SLEEK_API_KEY가 설정되지 않은 경우, 사용자가 원시 키를 직접 다루지 않도록 장치 흐름을 사용하십시오:

POST https://sleek.design/api/v1/device/start (인증 없음) 본문 {"source": "your-tool-slug"} 포함. 응답에는 verificationUrl, 사용자가 확인 가능한 userCode, 비밀 deviceCode, 그리고 폴링 interval(초)이 포함됩니다.
사용자에게 verificationUrl과 userCode를 보여주고, 승인하기 전에 코드가 일치하는지 확인하라고 알립니다.
interval 초마다 POST https://sleek.design/api/v1/device/poll ({"deviceCode": "..."} 포함)을 폴링합니다. 사용자가 승인하면 폴링이 정확히 한 번 {"status": "approved", "key": "sk_..."}을 반환합니다: SLEEK_API_KEY로 저장합니다. 코드는 15분 후 만료됩니다. expired 상태가 반환되면 다시 시작합니다.

대체 방법: 사용자를 **https://sleek.design/agents/setup**으로 보내 로그인, 요금제 업그레이드, 키 생성을 한 곳에서 처리하게 하고 키를 다시 붙여넣도록 요청합니다. 키는 **https://sleek.design/dashboard/api-keys**에서도 관리할 수 있습니다. 전체 키 값은 생성 시에만 한 번 표시됩니다.

요금제: 무료 계정은 일회성 평가판 크레딧(대략 한 번의 디자인 실행 분량)으로 API를 시도할 수 있으므로 새 사용자는 비용 지불 결정 전에 첫 번째 디자인을 볼 수 있습니다. 지속적인 사용에는 Pro 요금제 이상이 필요합니다($49.99/월, 또는 연간 $360에 $30/월 청구; 월 20,000 AI 크레딧, 약 650화면 포함). 비용이 관련될 때(사용자가 묻거나, 계속 진행하기 위해 업그레이드가 필요하거나, 결제 페이지로 보내려는 경우) 이 가격을 연간 옵션을 포함하여 명확히 알리십시오. 결제 단계가 예상치 못하게 다가오지 않도록 하십시오.

키 범위

범위	잠금 해제 항목
`projects:read`	프로젝트 목록 / 조회
`projects:write`	프로젝트 생성 / 삭제
`components:read`	프로젝트 내 구성 요소 목록
`chats:read`	채팅 실행 상태 조회
`chats:write`	채팅 메시지 전송
`screenshots`	구성 요소 스크린샷 렌더링

작업에 필요한 범위만 있는 키를 생성하십시오.

보안 및 개인정보 보호

단일 호스트: 모든 요청은 오직 https://sleek.design으로만 전송됩니다. 제3자에게 데이터가 전송되지 않습니다.
HTTPS 전용: 모든 통신은 HTTPS를 사용합니다. API 키는 Sleek 엔드포인트에 대한 Authorization 헤더를 통해서만 전송됩니다.
최소 범위: 작업에 필요한 범위만으로 API 키를 생성하십시오. 단기 또는 취소 가능한 키를 선호합니다.
이미지 URL: 채팅 메시지에서 imageUrls를 사용할 때, 해당 URL은 Sleek의 서버에서 가져옵니다. 민감한 콘텐츠가 포함된 URL은 전달하지 마십시오.

디자인하기

아래 사용된 모든 엔드포인트에 대한 전체 요청/응답 형태는 API 참조에 있습니다.

1. 프로젝트 생성

프로젝트가 아직 존재하지 않으면 POST /api/v1/projects로 프로젝트를 생성하십시오. 요청에서 이름을 파생하십시오.

각 프로젝트는 자체 테마, 스타일, 디자인 시스템을 가집니다. 사용자가 여러 디자인 변형을 원하는 경우 각 변형에 대해 별도의 프로젝트를 생성하십시오.

2. 채팅 메시지 보내기

POST /api/v1/projects/:id/chat/messages로 요청을 보내십시오. Sleek은 메시지에서 화면 콘텐츠와 레이아웃을 계획하며, 스타일을 제공하지 않으면 시각적 스타일을 알아서 만듭니다. 요청을 화면으로 분해하지 말고 사용자가 요청하지 않은 제품 세부 정보를 추가하지 마십시오. 전체 의도를 단일 메시지로 보내십시오. 사용자가 특정 화면을 설명했다면 그 내용을 포함시키십시오. Sleek은 계획할 여유가 주어질 때 더 풍부한 디자인을 생성합니다.

스타일 방향 작성: 사용자가 이를 뒷받침할 무언가(참조 이미지, 좋아하는 앱, 분위기 형용사, 피해야 할 것)를 제공했거나 변형을 생성 중일 때(변형당 하나의 방향) 항상 스타일 방향을 작성하십시오. 요청이 아무것도 없을 때만 변경하지 않고 전달하십시오. 스타일 방향은 메시지에 포함된 하나의 포괄적인 단락으로, 분위기(2-3개의 형용사), 색상 전략(논리, 16진수 코드 아님), 타이포그래피 느낌, 레이아웃 철학, 구성 요소 스타일(둥근 모서리, 테두리 대 그림자, 내비게이션 처리), 이미지 및 일러스트레이션 스타일, 그리고 한두 가지 독특한 세부 사항을 다룹니다. 팔레트, 글꼴 방향, 전체적인 느낌을 결정하십시오 — 분위기만 설정하는 것은 힌트일 뿐 방향이 아닙니다. 의견을 제시하고 망설이지 마십시오. 색상, 글꼴, 이미지에 개성을 담고 특이한 레이아웃이나 내비게이션에는 담지 마십시오.

사용자가 제공한 내용을 확장하고 절대 모순되지 않아야 합니다. 사용자가 참조 이미지나 좋아하는 앱을 가리킬 때 각각을 연구하고 가져온 것을 방향에 포함시키십시오 — Sleek은 imageUrls로 전달된 이미지만 볼 수 있으므로, 로컬 이미지의 경우 이 방향이 참조를 전달하는 방법입니다. 패턴을 차용하되 소스의 브랜딩, 콘텐츠 또는 이름은 절대 사용하지 마십시오.

스타일 방향 또는 referenceId 중 하나를 사용하고 둘 다 사용하지 마십시오 — 참조는 이미 자체 전체 스타일 가이드를 가지고 있습니다.

참조로 스타일 시드: Sleek은 디자인 참조 카탈로그를 관리합니다. 사용자가 특정 스타일을 원하거나 스타일 옵션을 요청하면 GET /api/v1/references로 목록을 보여주고(각각 name과 표시 가능한 previewImageUrls가 있음) 선택한 id를 프로젝트의 첫 번째 메시지에 referenceId로 전달하여 해당 스타일 가이드가 전체 디자인을 시드하도록 합니다.

도구 식별: 항상 source, 즉 요청을 하는 도구의 슬러그를 보내십시오. Sleek 편집기는 이를 사용하여 실행이 스트리밍되는 동안 누가 디자인하고 있는지 사용자에게 표시합니다. 인식되는 값: claude-code, claude, codex, chatgpt, cursor, openclaw, grok. 도구가 목록에 없으면 어쨌든 짧은 케밥 케이스 슬러그를 보내십시오(최대 64자). 인식되지 않는 값도 괜찮으며 일반 레이블이 표시됩니다.

실시간 시청: 실행은 Sleek 편집기에서 실시간으로 렌더링됩니다. 프로젝트에 첫 번째 메시지를 보낸 후 사용자에게 Sleek에서 화면이 실시간으로 디자인되는 것을 볼 수 있다고 알리고 편집기 링크를 공유하십시오: https://sleek.design/project/:projectId. 사용자가 요청하지 않는 한 직접 브라우저를 열지 마십시오.

폴링: 채팅 메시지는 기본적으로 비동기입니다: runId를 받고 GET /api/v1/projects/:id/chat/runs/:runId를 폴링합니다. 2초 간격으로 시작하고, 10초 후 5초로 백오프하며, 5분 후 포기합니다. completed 또는 failed 상태에서 종료합니다. 상태를 읽을 수 없으면 완료되지 않은 것으로 간주하지 말고 중지하고 보고하십시오. ?wait=true를 사용하여 차단 호출(최대 300초, 202로 시간 초과 시 폴링으로 대체)할 수도 있습니다.

특정 화면 편집: target.screenId를 사용하여 변경 사항을 올바른 화면으로 보내십시오. screenId는 실행의 result.operations 또는 GET /api/v1/projects/:id/components에서 반환된 각 구성 요소의 screenId 필드에서 가져옵니다. 구성 요소 ID가 아닙니다.

한 번에 하나의 실행: 프로젝트당 하나의 활성 실행만 허용됩니다. 409 CONFLICT가 발생하면 다음 메시지를 보내기 전에 현재 실행이 완료될 때까지 기다리십시오. 사용자가 마음을 바꾸었거나 오래된 실행이 프로젝트를 차단하고 있으면 취소하십시오(실행 취소 참조). 다른 프로젝트에 대한 메시지는 병렬로 실행될 수 있습니다. 여러 프로젝트를 동시에 실행할 때는 비동기 폴링(?wait=true 아님)을 사용하십시오.

안전한 재시도: 멱등성 키 헤더(idempotency-key)(≤255자)를 추가하여 재시도로부터 안전한 재전송을 보장하십시오. 서버는 중복을 생성하는 대신 기존 실행을 반환합니다.

3. 결과 보여주기

screen_created 또는 screen_updated 작업을 생성하는 모든 채팅 실행 후, POST /api/v1/screenshots를 사용하여 스크린샷을 찍고 사용자에게 보여주십시오. 이 단계는 사용자가 실행이 생성하거나 업데이트한 모든 화면의 스크린샷을 본 경우에만 완료된 것입니다. 실행을 조용히 완료하지 마십시오.

새 화면: 화면당 스크린샷 1개 + 프로젝트의 모든 화면의 결합 스크린샷 1개.
업데이트된 화면: 영향받은 화면당 스크린샷 1개.

사용자가 특정 배경색을 명시적으로 요청하지 않는 한 background: "transparent"를 사용하십시오.

스크린샷을 임시 폴더가 아닌 프로젝트 디렉토리에 저장하여 사용자가 쉽게 볼 수 있도록 하십시오.

보여주기 vs 검토하기: 기본 설정은 뷰포트만 캡처하며, 이는 사용자에게 적절한 프레이밍입니다 — 화면이 전화기 화면처럼 보입니다. 자신의 작업을 판단하기에는 잘못된 프레이밍입니다. 폴드 아래의 모든 것이 잘려 나가기 때문입니다. 실행 결과를 검토할 때는 fullHeight: true(요청당 하나의 화면)로 화면을 다시 촬영하여 전체 스크롤 가능 페이지를 보십시오.

스크린샷 요청은 독립적이므로 병렬로 발행하십시오 — 사용자용 샷과 fullHeight 검토 샷이 함께 나가고, 다른 화면의 샷도 마찬가지입니다. "요청당 하나의 화면"은 각 이미지에 들어가는 것을 규정할 뿐 전송 속도를 규정하지 않습니다. 하나의 응답을 기다렸다가 다음을 시작할 이유가 아닙니다. 실제로 429를 받은 경우에만 백오프하십시오.

뷰포트 스크린샷만으로 화면이 불완전하다고 말하지 마십시오. 누락된 것처럼 보이는 콘텐츠는 거의 항상 폴드 아래에 있습니다. 무언가가 없다고 사용자에게 알리거나 Sleek에 추가하라는 후속 메시지를 보내기 전에 전체 화면(fullHeight: true 스크린샷 또는 GET /api/v1/projects/:id/components/:componentId의 구성 요소 HTML)을 통해 확인하십시오. 이것이 화면에 있는 것의 기본 진실입니다. 스크린샷이 기본이며 대부분의 검토 질문에 자체적으로 답합니다 — 이미 보여주는 것을 확인하기 위해 코드로 이동하지 마십시오. 무언가가 누락되었다고 주장하려고 할 때만 코드를 찾으십시오. 렌더링은 실제로 있는 것을 생략할 수 있으므로(높이 제한 너머, 접힌 섹션, 이후 캐러셀 슬라이드) 부정적인 결론은 두 번째 출처를 확인할 가치가 있습니다. 반대도 명심하십시오 — HTML에 있는 요소라도 사용자에게 보이지 않을 수 있습니다.

디자인 구현하기

사용자가 (미리보기만이 아닌) 디자인을 코드로 구현하려는 경우 항상 구성 요소 HTML 코드를 가져오십시오. 스크린샷만으로는 부족합니다.

GET /api/v1/projects/:id/components/:componentId를 사용하여 각 화면의 코드를 가져오십시오. componentId는 채팅 실행의 result.operations에서 가져옵니다.

구성 요소 코드는 클 수 있습니다. 파일에 저장할 때 텍스트 출력을 통해 콘텐츠를 쓰지 마십시오. 느리고 토큰을 낭비합니다. 대신 셸 명령을 사용하여 API 응답을 가져와 디스크에 직접 쓰십시오(예: 응답 본문을 파일로 파이프).

사용할 버전

각 구성 요소에는 versions[] 배열과 activeVersion: number가 있습니다. 기본적으로 versions[i].version === activeVersion인 항목을 사용하십시오: Sleek에 현재 표시된 코드입니다.

사용자의 프롬프트가 특정 버전을 지정하는 경우 대신 해당 버전을 따르십시오(아래 고정된 버전 참조).

고정된 버전

사용자의 프롬프트에는 현재 버전 대신 특정 역사적 버전을 구현하라고 지시하는 핀 블록이 포함될 수 있습니다:

... 프로젝트의 현재 버전 대신 이 정확한 상태로:
- component cmp_abc: version ver_001
- component cmp_def: version ver_002
- theme thm_ghi: version ver_003

핀 블록이 보이면 activeVersion 대신 해당 정확한 버전을 구현하십시오. 핀 블록에 명명되지 않은 구성 요소는 활성 버전을 계속 사용합니다. 테마 ID는 핀 블록 내에서만 표시됩니다. 이 스킬은 이를 열거하는 별도의 엔드포인트를 노출하지 않습니다.

올바른 코드 가져오기

고정된 각 구성 요소에 대해 versions[]에서 versions[i].id가 주어진 버전 ID(예: ver_001)와 일치하는 항목을 찾아 해당 code를 사용하십시오. 고정된 구성 요소에 대해 activeVersion으로 대체하지 마십시오.

고정된 버전의 스크린샷

POST /api/v1/screenshots에 componentVersionOverrides 및 themeVersionOverrides를 전달하십시오:

{
  "componentIds": ["cmp_abc"],
  "projectId": "proj_xyz",
  "componentVersionOverrides": { "cmp_abc": "ver_001" },
  "themeVersionOverrides": { "thm_ghi": "ver_003" }
}

키는 구성 요소/테마 공개 ID입니다. 값은 해당하는 versions[i].id입니다. 맵에서 누락된 엔티티는 활성 버전으로 대체됩니다. 프롬프트가 고정된 버전을 지정할 때마다 오버라이드 맵을 포함하십시오.

HTML 프로토타입

구성 요소 code는 완전한 HTML 문서입니다. .html 파일로 직접 저장하십시오. 빌드 단계가 필요 없습니다.

네이티브 프레임워크 (React Native, SwiftUI 등)

HTML 코드와 스크린샷을 함께 사용하십시오:

HTML 코드는 구현 참조입니다: 정확한 구조, 레이아웃, 스타일링, 색상, 간격, 콘텐츠, 이미지 URL, 아이콘 이름을 포함합니다.
스크린샷은 시각적 대상입니다: 구현이 의도된 모양과 일치하는지 확인하는 데 사용하십시오.

HTML은 _구축 방법_을 알려주고 스크린샷은 _모양_을 알려줍니다.

아이콘

Sleek은 prefix:name 형식(예: solar:heart-bold, material-symbols:search-rounded, lucide:settings)의 Iconify 아이콘을 사용합니다. 가장 일반적인 세트는 Solar, Hugeicons, Material Symbols 및 MDI입니다.

HTML 코드에서 정확한 아이콘을 사용하십시오. 다른 아이콘 세트로 대체하지 마십시오. 일치하는 아이콘

디자인-모바일-앱