45/ 50
＋ It covers the requested areas practically, clearly, and at a balanced length.
－ It is polished and safe, but the core creation screen lacks distinctiveness.
Apple-Level UI System Designer (2026 Standard)
a senior product designer operating at Apple-level design standards (2026).
| Category | Design › Product design |
|---|---|
| Tags | DraftingIdeationTemplate |
You are a senior product designer operating at Apple-level design standards (2026). Your task is to transform a given idea into a clean, professional, production-grade UI system. Avoid generic, AI-generated aesthetics. Prioritize clarity, restraint, hierarchy, and precision. --- ### Design Principles (Strictly Enforce) - Clarity over decoration - Generous whitespace and visual breathing room - Minimal color usage (functional, not expressive) - Strong typography hierarchy (clear scale, no randomness) - Subtle, purposeful interactions (no gimmicks) - Pixel-level alignment and consistency - Every element must have a reason to exist --- ### 1. Product Context - What is the product? - Who is the user? - What is the primary action? --- ### 2. Layout Architecture - Page structure (top → bottom) - Grid system (columns, spacing rhythm) - Section hierarchy --- ### 3. Typography System - Font style (e.g. neutral sans-serif) - Size scale (H1 → body → caption) - Weight usage --- ### 4. Color System - Base palette (neutral-first) - Accent usage (limited and intentional) - Functional color roles (success, error, etc.) --- ### 5. Component System Define core components: - Buttons (primary, secondary) - Inputs - Cards / containers - Navigation Ensure consistency and reusability. --- ### 6. Interaction Design - Hover / active states (subtle) - Transitions (fast, smooth, minimal) - Feedback patterns (loading, success, error) --- ### 7. Spacing & Rhythm - Consistent spacing scale - Alignment rules - Visual balance --- ### 8. Output Structure Provide: - UI Overview (1–2 paragraphs) - Layout Breakdown - Typography System - Color System - Component Definitions - Interaction Notes - Design Philosophy (why it works)
What this prompt does
Useful for shaping a clean, production-ready UI system. It strongly emphasizes clarity over decoration, generous whitespace, limited color, and pixel-level alignment.
Model comparison
ChatGPT offers the best balance of completeness, accuracy, and length. Gemini is specific but overstated and verbose, while Claude is highly detailed yet heavily penalized for being incomplete.
41/ 50
＋ It specifies the core invoicing flow with precise values and screen examples.
－ It presents invented user traits and an “Apple 2026 standard” as facts.
33/ 50
＋ It provides the most detailed domain components and responsive behavior.
－ The response is truncated and never delivers spacing rules or design philosophy.
| Criterion | ChatGPT | Claude | Gemini | Leader |
|---|---|---|---|---|
| Instruction following | 9 | 6 | 10 | Gemini +11% |
| Accuracy | 9 | 7 | 7 | ChatGPT +29% |
| Specificity | 9 | 10 | 10 | Tie |
| Structure | 9 | 7 | 8 | ChatGPT +13% |
| Right length | 9 | 3 | 6 | ChatGPT +50% |
Scored 1–10 by gpt-5.6-sol with model names hidden (2026-09-24). This is an AI review, not a measurement.
Read full answers
We gave three models the same input and copied their answers unedited. Each ran in its CLI (an agent harness), and answers in the ChatGPT or Claude apps or on the web may differ. Outputs are in Korean.
[Pasted material] 아이디어: 1인 프리랜서 디자이너를 위한 인보이스 발행 웹앱입니다. 타겟 사용자는 30~40대 프리랜서 디자이너/개발자이고, 지금은 엑셀로 인보이스를 만들어 매번 번거로워합니다. 핵심 행동은 '프로젝트 선택 후 3분 안에 인보이스를 발행하고 클라이언트에게 결제 링크를 전송'하는 것입니다. 데스크톱 웹 우선이고, 추후 모바일 대응도 고려하고 있습니다.
UI Overview
프리랜서 디자이너와 개발자가 프로젝트를 선택하고, 기존 정보를 자동으로 불러와 3분 안에 인보이스를 발행하는 데스크톱 웹앱입니다. 핵심은 문서 작성 도구가 아니라 “빠르고 정확한 청구 흐름”을 제공하는 것입니다.
메인 화면에서는 진행 중인 프로젝트와 최근 인보이스를 한눈에 보여주고, 사용자는 프로젝트를 선택한 뒤 금액·기한·메모만 확인하여 인보이스를 발행합니다. 발행 직후 결제 링크를 복사하거나 클라이언트에게 전송할 수 있습니다.
레이아웃 Breakdown
전체 구조
- 고정 사이드바
- 상단 페이지 헤더
- 주요 콘텐츠 영역
- 보조 정보 또는 최근 활동 영역
데스크톱 그리드
- 전체 최대 너비: 1440px
- 사이드바: 232px
- 콘텐츠 좌우 여백: 40~56px
- 기본 그리드: 12 columns
- 콘텐츠 간격: 24px
- 카드 내부 여백: 24px
- 기본 spacing 단위: 4px
주요 화면
대시보드
- 상단: “안녕하세요, 지민님”과
새 인보이스버튼 - 요약 영역:
- 미수금
- 이번 달 수입
- 발행 예정
- 본문:
- 최근 프로젝트
- 최근 인보이스
- 결제 상태
- 우측 또는 하단: 최근 활동 타임라인
인보이스 생성
단계가 많아 보이지 않는 단일 화면 구조를 사용합니다.
- 프로젝트 선택
- 클라이언트 정보 자동 입력
- 청구 항목 확인
- 발행일·결제 기한 설정
- 미리보기
- 인보이스 발행 및 결제 링크 전송
화면은 좌측 입력 패널과 우측 실시간 인보이스 미리보기로 구성합니다.
인보이스 상세
- 상단: 상태, 인보이스 번호, 발행일
- 주요 액션:
- 결제 링크 복사
- 클라이언트에게 전송
- PDF 다운로드
- 수정
- 본문: 인보이스 문서
- 하단: 활동 내역 및 결제 기록
네비게이션
- Dashboard
- Projects
- Invoices
- Clients
- Settings
현재 메뉴는 좌측 3px accent bar와 텍스트 색상 변화로만 표시합니다. 아이콘은 보조 수단으로 사용하고, 아이콘만으로 메뉴를 전달하지 않습니다.
Typography System
기본 폰트는 Inter, Pretendard, 또는 시스템 산세리프를 사용합니다.
| 용도 | 크기 | 굵기 | 사용 예 |
|---|---|---|---|
| Display | 32px | 600 | 대시보드 주요 제목 |
| H1 | 24px | 600 | 페이지 제목 |
| H2 | 18px | 600 | 섹션 제목 |
| Body | 14px | 400 | 일반 본문 |
| Body strong | 14px | 500 | 금액, 주요 정보 |
| Caption | 12px | 400 | 보조 설명 |
| Numeric | 28~32px | 600 | 미수금, 총액 |
- 제목은 짧고 명확하게 작성합니다.
- 굵기는 400, 500, 600 세 단계만 사용합니다.
- 금액과 날짜는 숫자 정렬이 잘 되도록 고정폭 숫자 옵션을 적용합니다.
- 행간은 본문 1.5, 제목 1.25를 기준으로 합니다.
Color System
중립색을 기본으로 하고, accent는 주요 행동과 상태에만 사용합니다.
Base Palette
- Background:
#F7F7F5 - Surface:
#FFFFFF - Primary text:
#191919 - Secondary text:
#6F6F6A - Muted text:
#999994 - Border:
#E5E5E1 - Strong border:
#D4D4CF
Accent
- Primary accent: 짙은 인디고
#3F4B8F - Hover accent:
#323D78 - Focus ring:
rgba(63, 75, 143, 0.22)
강한 색상은 새 인보이스, 결제 링크 전송, 선택된 상태에만 사용합니다.
Functional Colors
- Success:
#287A52 - Success background:
#EAF5EE - Warning:
#A66A00 - Warning background:
#FFF4D8 - Error:
#B33A3A - Error background:
#FBECEC
상태는 색상뿐 아니라 텍스트와 아이콘을 함께 사용해 전달합니다.
Component Definitions
Buttons
Primary
- 배경: Primary accent
- 텍스트: 흰색
- 높이: 40px
- 좌우 패딩: 16px
- Radius: 8px
- 사용 예:
새 인보이스,인보이스 발행
Secondary
- 배경: 흰색
- 테두리: Border
- 텍스트: Primary text
- 사용 예:
PDF 다운로드,결제 링크 복사
Tertiary
- 배경 없음
- 텍스트: Secondary text
- 사용 예:
취소,자세히 보기
버튼은 한 화면에서 Primary를 하나만 두어 행동의 우선순위를 명확하게 합니다.
Inputs
- 높이: 40px
- 배경: 흰색
- 테두리:
#D4D4CF - Radius: 7px
- Focus: accent border와 부드러운 focus ring
- Label은 입력창 위에 배치
- Placeholder는 실제 값처럼 보이지 않도록 낮은 대비 사용
오류 메시지는 입력창 아래에 즉시 표시하며, “잘못된 값”보다 “결제 기한을 입력해 주세요”처럼 해결 방법을 안내합니다.
Cards
카드는 모든 영역을 감싸는 용도보다 정보 그룹화가 필요한 경우에만 사용합니다.
- 배경: Surface
- 테두리: 1px solid Border
- Radius: 12px
- 내부 여백: 24px
- 그림자: 기본적으로 사용하지 않음
- 중요한 팝오버나 모달에만 매우 약한 그림자 적용
Status Badge
예시:
초안발행됨열람됨결제 대기결제 완료연체
Badge는 작은 보조 요소로 사용하며, 상태를 설명하는 본문 텍스트를 대체하지 않습니다.
Invoice Preview
실제 발행 문서와 동일한 구조로 표시합니다.
- 흰색 문서 표면
- 넉넉한 상하 여백
- 상단에 발행자, 클라이언트, 인보이스 번호
- 중앙에 항목 테이블
- 하단에 합계와 결제 안내
- 편집 UI와 최종 문서 스타일을 명확히 구분
Interaction Notes
상태 변화
- Hover: 배경색을 아주 약하게 변경
- Active: 버튼이 1px 안쪽으로 눌리는 정도
- Focus: 명확한 focus ring 제공
- Selected: accent border와 연한 accent background 조합
- Disabled: 대비를 낮추되 상태가 식별 가능해야 함
전환
- 기본 transition: 120~180ms
- 페이지 전환: opacity와 짧은 translate 조합
- 모달: 180~220ms
- 장식적인 패럴랙스나 과도한 spring animation은 사용하지 않음
피드백
인보이스 생성 중
버튼 텍스트를 발행 중…으로 변경하고 중복 제출을 방지합니다.
발행 완료
화면 상단에 성공 메시지를 표시합니다.
인보이스가 발행되었습니다. 결제 링크를 클라이언트에게 보낼 수 있습니다.
곧바로 결제 링크 복사와 전송하기 액션을 제공합니다.
자동 저장
작성 중인 인보이스는 조용히 자동 저장하고, 상단에 다음처럼 짧게 표시합니다.
10:42에 저장됨
오류
문제의 위치와 해결 방법을 함께 제공합니다.
금액을 입력해 주세요. 항목을 추가하려면
청구 항목 추가를 선택하세요.
Spacing & Rhythm
기본 spacing scale:
- 4px: 아이콘과 텍스트 간격
- 8px: 라벨과 입력창, 작은 요소 간격
- 12px: 행 내부 간격
- 16px: 관련 정보 그룹 간격
- 24px: 카드 내부 여백, 섹션 간격
- 32px: 주요 블록 간격
- 48px: 페이지 섹션 간격
- 64px: 대형 페이지 여백
정렬 규칙:
- 모든 주요 콘텐츠는 동일한 좌측 기준선을 공유합니다.
- 금액은 우측 정렬합니다.
- 테이블 열은 숫자와 텍스트를 명확히 분리합니다.
- 페이지 제목, 주요 액션, 본문 시작점의 수직 리듬을 일정하게 유지합니다.
- 모바일 대응 시 사이드바는 하단 탭 또는 접이식 메뉴로 전환하고, 인보이스 미리보기는 입력 단계 이후 별도 화면으로 이동합니다.
Design Philosophy
이 제품의 핵심 가치는 표현력이 아니라 신뢰감과 속도입니다. 사용자가 매번 새 문서를 만드는 느낌을 받지 않도록 프로젝트와 클라이언트 정보를 재사용하고, 화면에는 현재 결정에 필요한 정보만 보여줍니다.
중립적인 색상, 제한된 버튼 계층, 넉넉한 여백은 인보이스라는 중요한 업무 문서에 집중하게 합니다. 특히 “프로젝트 선택 → 확인 → 발행 → 전송”이라는 짧은 흐름을 중심으로 설계하면, 기존 엑셀 작업의 반복과 실수를 줄이면서도 전문적인 클라이언트 경험을 만들 수 있습니다.
More in this category
| 7v7 Football Team Generator App | |
| Accessibility Auditor | |
| Accessibility Auditor Agent Role | |
| Accessibility Expert | |
| Accessibility Testing Superpower |