AI 화면 디자인

[Notion 연결 — MCP](/learn/fragment/cl.mcp)와 같은 방식으로 연결한 Mobbin MCP가 지금 세션에 붙어 있는지 확인합니다.

claude mcp list

예상 결과 mobbin이 Connected 상태로 표시됩니다.

화면을 요청할 때는 반드시 실제 스크린샷을 가져오라고 명시합니다.

명시하지 않으면 AI가 화면을 임의로 재구성해 설명하거나 그릴 수 있습니다.

Mobbin에서 영어 듣기·말하기 앱의 온보딩 화면을 검색해 줘. 와이어프레임이나 요약 설명이 아니라 Mobbin이 실제로 캡처한 스크린샷을 그대로 가져와 줘. 화면마다 mobbin_url도 같이 적어 줘.

이 단계의 실제 화면

예상 결과 실제 앱 이름과 mobbin_url이 붙은 스크린샷 여러 장이 화면에 그대로 표시됩니다.

화면이 여러 장 나오면 각 화면에 번호를 매기고, 뒤이어 붙이는 분석 문장마다 그 번호를 함께 적으라고 요청합니다.

지금 가져온 화면마다 1번부터 번호를 매기고, 이어지는 분석 문장 하나하나에 어느 번호 화면을 보고 한 말인지 표시해 줘.

예상 결과 분석 문장 앞이나 뒤에 화면 번호가 붙어, 어떤 문장이 어떤 화면을 근거로 하는지 바로 찾을 수 있습니다.

화면을 하나씩 나열하지 말고 반복되는 패턴별로 묶어 달라고 요청합니다.

패턴을 행으로, 그 패턴이 나온 앱을 열로 둔 표를 만들게 하고, 여러 앱에 공통으로 나타나는 요소는 따로 표시하게 합니다.

방금 본 화면들을 하나씩 설명하지 말고, 반복되는 요청·질문 패턴별로 묶어 줘. 패턴을 행으로, 그 패턴이 나온 앱 이름을 열로 둔 표로 만들어 줘. 여러 앱에 공통으로 나오는 요소(예: 진행률 바, 하단 버튼 위치)는 표 밖에 별도로 표시해 줘.

이 단계의 실제 화면

1 2 3

예상 결과 패턴×앱 매트릭스 표 하나와, 표 밖에 공통 요소를 정리한 문장이 따로 나옵니다.

종합 표가 나온 뒤에는 같은 화면을 UX 라이팅 관점, 마케팅·사업 관점처럼 다른 시선으로 다시 보게 할 수 있습니다.

이때는 방금 만든 종합 표와 겹치지 않게 하라는 조건을 함께 적습니다.

방금 만든 패턴×앱 표와 겹치지 않게, 같은 화면들을 UX 라이팅 관점에서 다시 봐 줘. 문구 길이, 어조, 동사 선택처럼 표에 없던 내용만 새로 짚어 줘.

예상 결과 패턴 표와 다른 각도의 문구·어조 관찰이 나오고, 앞서 만든 표의 내용은 반복되지 않습니다.

결과가 마음에 들면 그 결과를 만든 요청 문장들을 역으로 정리해 재사용할 수 있는 템플릿으로 저장해 달라고 요청합니다.

지금까지 내가 보낸 요청 문장들을 순서대로 정리해서, 다음에 다른 주제로 검색할 때 주제만 바꿔 쓸 수 있는 프롬프트 템플릿으로 만들어 줘.

예상 결과 빈칸(주제, 플랫폼 등)만 바꾸면 재사용할 수 있는 요청 문장 세트가 나옵니다.

프로젝트 폴더에서 `npx impeccable install`을 실행하고 사용 중인 AI 도구를 다시 엽니다.

Codex에서 프로젝트 훅 승인을 묻는다면 `/hooks`를 열어 내용을 확인한 뒤 승인합니다.

`/impeccable init`을 실행해 화면의 대상과 디자인 기준을 기록합니다.

원본 파일을 남기고 `npx impeccable detect index.html`로 첫 검사 결과를 저장합니다.

`/impeccable polish index.html`로 실행합니다.

유지할 내용과 바꾸지 말아야 할 범위를 함께 적습니다.

같은 detect 명령을 다시 실행해 정해진 문제 모양이 줄었는지 확인합니다.

`/impeccable audit index.html`을 실행합니다.

1440픽셀과 390픽셀 화면, 키보드 이동, 가로 잘림도 직접 확인합니다.

이 단계의 실제 화면