스타일을 고르면, 그 스타일대로 만들어 줍니다
AI 에게 “화면 만들어 줘”라고만 하면 누가 만들어도 비슷한 결과가 나옵니다. 마음에 드는 스타일을 고르고 프롬프트를 복사하면 디자인 문서가 통째로 함께 들어갑니다.
무엇을 만드세요?
이미 만든 화면이면 「내 프로젝트에 적용」, 새 화면이면 「새로 만들기」. 적용 전에 커밋(또는 폴더 복사)해 두세요.사용법·주의할 점 펼쳐 보기접기
- 1만들 화면과 어울리는 스타일을 고릅니다. 카드 왼쪽 위 「모바일」을 누르면 휴대폰 화면으로 바뀝니다.
- 2이미 만든 화면이면 「내 프로젝트에 적용」, 새 화면이면 「새로 만들기」를 복사합니다. 디자인 문서 본문이 함께 들어갑니다.
- 3Claude Code 같은 도구에 붙여 넣습니다. 「내 프로젝트에 적용」은 그대로 보내면 되고, 「새로 만들기」는 「만들 화면」 칸만 채웁니다.
버튼 두 개 — 상황에 맞는 것을 고르세요
복사해서 그대로 붙여 넣고 보내면 됩니다. 채울 칸이 없습니다. 기능은 건드리지 말 것·바꿀 파일 목록부터 보여줄 것·메인 화면 하나만 먼저 바꾸고 멈출 것이 프롬프트 안에 들어 있어, 결과를 보고 「좋아, 나머지도 진행해」라고만 답하면 됩니다.
붙여 넣은 뒤 중간의 빈칸 줄 아래에 무엇을 만들지 적어서 보냅니다. 비워 두고 보내면 AI 가 예시 화면을 지어냅니다.
「새로 만들기」 는 빈칸을 채워서
복사한 프롬프트 중간에 아래 줄이 있습니다. 그 아래에 적어서 보내세요. 예시를 복사해 고쳐 써도 됩니다.
--- 만들 화면 (누가, 무엇을, 어떤 데이터로 쓰는지 구체적으로) ---구매팀 담당자가 SAP 에서 내려받은 구매오더 엑셀을 올리면, 입고 수량·단가가 다른 건만 표로 보여주는 화면을 만들어줘. 표 위에 불일치 건수, 오른쪽 위에 엑셀 내려받기 버튼.
주의할 점
- 적용 전에 저장해 두세요. Git 을 쓰면 먼저 커밋하고, 안 쓰면 프로젝트 폴더를 복사해 두세요. 디자인 변경은 파일 여러 개를 한꺼번에 바꿔서, 마음에 안 들 때 되돌릴 곳이 필요합니다(커밋이 안 돼 있으면 AI 가 먼저 알려 주게 되어 있습니다).
- 메인 화면 결과를 보고 진행하세요. 「내 프로젝트에 적용」은 한 화면만 바꾸고 멈춥니다. 마음에 안 들면 그 자리에서 「버튼 색이 너무 진하다」처럼 고쳐 달라고 한 뒤 나머지를 진행시킵니다.
- 기능이 그대로인지 눌러 보세요. 스타일만 바꾸라고 되어 있어도 구조를 손대는 경우가 있습니다. 주요 버튼·입력·저장이 동작하는지 확인합니다.
- 화면 배치까지 바뀌는 제안(카드 배치·표를 카드로 등)은 바로 바꾸지 않고 목록으로만 보여줍니다. 필요한 것만 골라 「이것도 해줘」라고 시키세요.
- 예시 데이터에 실제 고객·직원 정보를 넣지 마세요. 이름·연락처는 가짜 값으로 적어도 화면은 똑같이 만들어집니다.
- Notion·Claude·토스 등 이름이 붙은 스타일은 학습용 참고입니다. 결과물에 그 회사의 로고·상표를 쓰지 마세요.
도구별로 다른 점
- Claude Code: 그대로 붙여 넣으면 됩니다. 디자인 문서 본문이 프롬프트 안에 다 들어 있어 따로 받을 파일이 없습니다. 길게는 2만 자가 넘지만 문제없이 들어갑니다.
- Gemini CLI 등 다른 도구: 문서 본문이 함께 들어가므로 똑같이 적용됩니다. 프롬프트 속 미리보기 주소를 열어 보는지는 도구마다 다릅니다.
- 「내 프로젝트에 적용」은 그 프로젝트 폴더에서 실행 중인 Claude Code 에 붙여 넣어야 합니다. 다른 폴더에서 열면 고칠 화면을 찾지 못합니다.
업무 시스템 · 어드민
관리자 화면, 데이터 대시보드, 일반 업무 도구트렌디 · 감성
젊고 화려한 화면. 사내 행사·동호회·캠페인·이벤트 페이지에문서 · 협업
위키, 사내보, 리포트처럼 읽는 화면AI 서비스
사내 챗봇, AI 기능이 들어간 업무 도구모바일 · 개요 화면
모바일 사내앱, 한눈에 보는 요약 화면레이아웃 패턴
화면 구성만 참고합니다. 위 스타일과 함께 쓰세요사내 뉴스 포털
헤드라인 + 카테고리 피드 + 공지 사이드바
의료 대시보드
환자 바이탈 + 차트 + 처방 테이블
설정 페이지
카테고리 사이드바 + 폼 섹션 + 저장 바
CRM 연락처 상세
프로필 패널 + 활동 타임라인 + 딜 파이프라인
칸반 보드
컬럼별 업무 카드를 끌어 옮기는 보드
캘린더 앱
주간 시간표 + 미니 달력 + 일정 패널
문서 사이트
왼쪽 목차 + 본문 + 오른쪽 이 페이지 목차
파일 매니저
폴더 트리 + 파일 격자 + 우클릭 메뉴
Notion·Claude·토스 등 이름이 붙은 스타일은 해당 서비스 화면에서 영감을 받은 학습용 참고 자료이며, 각 회사의 공식 디자인 시스템이 아닙니다. 결과물에 그 회사의 로고나 상표를 쓰지 마세요.