코드가 나오나요?

코드는 나오지 않습니다. 지시문을 받은 AI가 화면 구조와 문안, 상태 정의를 만들고, 에셋은 이미지 생성 도구용 프롬프트로 나옵니다.

앱과 웹 어느 쪽인가요?

어느 쪽이든 됩니다. 만들려는 화면과 플랫폼을 적으면 그 조건에 맞춰 짜 줍니다.

디자인 도구(피그마 등)와는 어떻게 이어지나요?

특정 도구 전용 출력은 아닙니다. 설계 지시문과 에셋 프롬프트를 각자 쓰는 도구에서 실행하는 방식입니다.

디자인 AI용 — 피그마 · 캔바 · v0 · Lovable · Bolt · Framer · Uizard 등

화면·UI 디자인 스튜디오

산출물 형식과 디자인 언어, 브랜드 고정값을 고르면 쓰시는 디자인 도구에 그대로 붙여 넣을 지시문이 나옵니다 — 피그마든 웹 디자인 생성 서비스든 이미지·3D 모델이든. 화면 구조·상태·토큰은 설계 명세로, 에셋과 렌더는 생성 엔진이 바로 읽는 지시로 나눠 씁니다.

붙여 넣을 곳 예시 — 화면 설계는 피그마 AI · 캔바, 웹 디자인 생성은 v0 · Lovable · Bolt · Framer · Uizard, 에셋과 목업은 미드저니 · 이미지 생성 도구, 3D 오브젝트는 3D 생성 도구. 쓰시는 도구가 목록에 없어도 그대로 붙여 넣으면 됩니다.

1. 산출물 형식 및 사양 규격

2. 타겟 뷰포트 & 디바이스 규격

3. 고정 브랜드 아이덴티티 앵커 (색상, 타이포, 라운딩 고정)

여기 입력한 브랜드 토큰(색상, 폰트, 모서리 라운딩)은 생성되는 프롬프트에 그대로 들어갑니다. 화면을 여러 개 만들어도 토큰 값 문구는 동일하게 유지됩니다.

4. 디자인 템플릿

화면이 어떤 결로 보일지 정합니다. 고르지 않으면 지시문이 이 제품에 맞는 언어를 근거와 함께 추천합니다.

기본

5. 생성할 핵심 컴포넌트 목록

만능 프롬프트

위에서 고른 값으로 대상 AI에 붙여 넣을 지시문을 만들어 드립니다.

조립 미리보기 (템플릿)Figma AI

예상 토큰 수: 239

/* UI Design Directive */
[Role]: You are a Figma design-systems engineer.
[Deliverable]: Figma Auto-Layout component spec (frames, variants, tokens)
[Target Viewport & Grid]: Desktop Web (1440px / 12-Column Responsive Grid)
[Design language]: [RECOMMENDED: pick a design language and state why it fits this product]

[Fixed Brand Identity Anchor]:
[FILL IN: brand tokens — colors, type, radius]

[Components & Screen Layout to Construct]:
[FILL IN: components or sections to design]

[Engineering Execution Rules]:
- Spacing Scale: 4px, 8px, 12px, 16px, 24px, 32px, 48px, 64px
- Interactive States: Render Default, Hover (:hover), Active (:active), Focused (:focus-visible), Disabled, Loading Skeleton
- Responsive Behavior: Auto-layout 'Hug' contents or 'Fill' container with zero absolute positioning hacks

여기서 만드는 것

화면과 UI 설계를 시킬 지시문을 만듭니다. 만들려는 화면과 브랜드 재료를 적으면, 화면 구조와 상태, 컴포넌트, 디자인 토큰은 글로 세우게 하고 일러스트나 아이콘 같은 에셋은 생성 프롬프트로 뽑게 합니다. 두 갈래가 한 벌인 지시문입니다. 코드나 시안 파일이 아니라 그것을 만들게 할 지시문이 결과물입니다.

실제로 나온 것

이 스튜디오가 만드는 지시문의 한 대목입니다(1,453어절 중 일부). 생성 엔진의 결과물은 여기서 만들 수 없어 지시문 자체를 보입니다.

요청 한 줄

가계부 앱 홈 화면을 설계해 줘 — 이번 달 지출이 한눈에 보이게

만들어진 지시문

역할과 목표: 너는 가계부 앱의 홈 화면을 설계하는 UI 디자이너다. 사용자가 제공한 정보만 바탕으로, 이번 달 지출을 첫 화면에서 빠르게 파악할 수 있는 홈 화면 설계를 만들어라. 산출물은 화면 목록, 화면별 구성요소, 상태별 동작, 디자인 토큰을 포함한 오토레이아웃 설계 지시문이어야 한다. 브랜드 색상·글꼴·라운딩은 [입력 필요: 브랜드 색상·글꼴·라운딩]으로 둔다. 금액·비율·거래 건수는 입력에 없는 값을 만들어 내지 말고, 데이터가 없을 때는 빈 상태로 처리한다. 작업 규칙 1. 첫 화면의 시각적 우선순위를 다음 순서로 고정한다: 이번 달 총지출, 예산 또는 비교 기준이 실제로 제공되는 경우의 변화 정보, 지출 분류 요약, 최근 거래 진입점.

이 항목 전문과 검증 기록 보기

AI에 시킬 때 자주 틀리는 것

화면마다 어긋나는 시안 — 버튼 색과 간격이 화면마다 다르면 맞추는 비용이 만드는 비용보다 커집니다. 색·서체·간격을 토큰으로 먼저 확정하고 전 화면이 그것을 쓰게 해야 합니다.
정상 화면만 설계하는 것 — 로딩·비어 있음·오류 상태가 빠진 설계는 절반입니다. 상태까지 요구해야 구현에서 막히지 않습니다.
브랜드 재료 없이 감으로 — 실제 브랜드 색·로고가 있는데 주지 않으면 AI가 지어냅니다. 가진 값은 확정으로 주고, 없는 값만 제안받는 쪽이 다시 하는 일을 줄입니다.

작성 가이드에서 자세히 읽기 라이브러리에서 실제 예시 보기

자주 묻는 질문

코드가 나오나요?: 코드는 나오지 않습니다. 지시문을 받은 AI가 화면 구조와 문안, 상태 정의를 만들고, 에셋은 이미지 생성 도구용 프롬프트로 나옵니다.
앱과 웹 어느 쪽인가요?: 어느 쪽이든 됩니다. 만들려는 화면과 플랫폼을 적으면 그 조건에 맞춰 짜 줍니다.
디자인 도구(피그마 등)와는 어떻게 이어지나요?: 특정 도구 전용 출력은 아닙니다. 설계 지시문과 에셋 프롬프트를 각자 쓰는 도구에서 실행하는 방식입니다.