41/ 50
＋ 두 코드 블록과 반응형·테마 요구를 충실히 반영함
－ 스크린샷에 명시되지 않은 수치와 페이지 제목을 추정함
UI 디자인 브리프 프롬프트
UI 스크린샷과 앱 유형·브랜드 정보를 넣으면 개발자 전달용 상세 디자인 브리프를 JSONC로 작성합니다. 라이트·다크 모드와 Tailwind 기본 반응형 기준을 포함합니다.
| 분류 | 디자인 › 디자인 협업 |
|---|---|
| 태그 | 분석형식변환개발자코드 |
This is a ${page_type:dashboard} of a modern ${focus:government audit} app called ${brand:AuditFlow}.
Thoroughly analyze the UI in this screenshot and describe it in as much detail as you can to hand over from a UI designer to a developer. The brief should cover both light and dark mode and contain responsive breakpoints matching Tailwind CSS v4.3 defaults.
Output characteristics as structured JSONC.
For colors, extract a rough palette and only detail accents and complex media. The goal is to use only 2 palettes: primary and secondary similar to Tailwind colors. Alongside these 2, you can define any number of grays and accent colors for more complex UI (gradients, shadows, SVGs, etc.).
End with a prompt explaining how to implement the UI for a developer, but don't mention any tech specs; only a brief of the UI to be implemented and the token rules + usage. Output the prompt as a Markdown code block.
The output should be two code blocks: one for the design brief and one for the JSONC design specification.어떤 프롬프트인가
디자이너가 본 UI를 개발 구현 지시로 넘길 때 쓰는 분석 프롬프트다. 출력은 디자인 브리프와 JSONC 명세 두 코드 블록으로 제한한다.
모델 비교
ChatGPT가 형식과 요구사항 준수에서 가장 완성도가 높다. Gemini는 구체적이지만 장황하고 중단됐으며, [C]는 답이 없다.
24/ 50
＋ 상세한 토큰과 컴포넌트 규격이 개발 이관에 유용함
－ 출력이 중간에 끊기고 임의 수치·요소를 다수 추가함
| 기준 | ChatGPT | Gemini | 앞선 모델 |
|---|---|---|---|
| 지시 준수 | 9 | 3 | ChatGPT +200% |
| 정확성 | 7 | 5 | ChatGPT +40% |
| 구체성 | 8 | 8 | 동점 |
| 구성·가독성 | 9 | 6 | ChatGPT +50% |
| 분량 적정성 | 8 | 2 | ChatGPT +300% |
gpt-5.6-sol가 모델 이름을 가린 채 1~10점으로 채점했습니다 (2026-09-25). 측정값이 아니라 AI 심사 결과입니다.
답 전문 보기
같은 입력을 세 모델에 넣어 받은 답을 그대로 옮겼습니다. 각 CLI(에이전트 하네스)에서 실행했습니다. ChatGPT·Claude 앱이나 웹에서는 답이 다를 수 있습니다.
[붙여 넣은 자료] [첨부: AuditFlow 관리자 대시보드 스크린샷 1장] 화면 상단 좌측에 로고와 '대시보드 / 감사 목록 / 보고서 / 설정' 4개 메뉴 탭이 있고, 우측엔 프로필 아이콘이 있습니다. 본문 상단에는 '진행 중인 감사', '완료된 감사', '지연된 감사', '이번 달 신규' 4개의 카드형 통계가 나열되어 있고, 각 카드 안에는 큰 숫자와 전월 대비 증감률(%)이 작은 녹색/빨간색 글씨로 표시됩니다. 그 아래에는 최근 감사 건 목록 테이블(감사명 / 담당자 / 상태 배지 / 마감일)이 있고, 우측 사이드바에는 담당자별 진행률을 보여주는 도넛 차트가 있습니다. 전체적으로 여백이 넉넉하고 카드에 옅은 그림자가 들어간 미니멀한 스타일입니다.
{
"title": "AuditFlow 관리자 대시보드 UI 디자인 브리프",
"language": "ko-KR",
"pageType": "dashboard",
"productFocus": "government audit",
"brand": "AuditFlow",
"designIntent": {
"summary": "감사 업무의 현재 상태와 우선순위를 빠르게 파악할 수 있는 차분하고 신뢰감 높은 관리자 대시보드",
"visualTone": [
"미니멀",
"공공기관 수준의 신뢰성",
"넉넉한 여백",
"낮은 대비의 카드 그림자",
"정보 위계가 명확한 업무용 인터페이스"
],
"principles": [
"숫자와 감사 상태를 가장 먼저 인지할 수 있도록 구성",
"색상은 상태 전달에만 제한적으로 사용",
"카드와 표의 경계를 명확히 하되 시각적 무게는 가볍게 유지",
"빛 모드와 어두운 모드에서 동일한 정보 위계를 유지"
]
},
"pageStructure": {
"appShell": {
"layout": "좌측 로고·메뉴와 우측 프로필을 포함하는 단일 상단 헤더",
"background": {
"light": "gray-50에 가까운 매우 옅은 회색",
"dark": "gray-950에 가까운 짙은 남색 계열"
}
},
"header": {
"height": {
"desktop": "72px",
"mobile": "64px"
},
"contentWidth": "1280px~1440px, 화면 중앙 정렬",
"horizontalPadding": {
"mobile": "20px",
"desktop": "32px~40px"
},
"leftArea": [
"AuditFlow 로고",
"대시보드",
"감사 목록",
"보고서",
"설정"
],
"rightArea": [
"프로필 아이콘",
"필요 시 사용자명 또는 드롭다운 화살표"
],
"activeNavigation": {
"appearance": "짙은 텍스트와 얇은 하단 강조선 또는 옅은 배경 필",
"light": "primary-700",
"dark": "primary-300"
}
},
"mainContent": {
"maxWidth": "1280px~1440px",
"topSpacing": {
"desktop": "32px~40px",
"mobile": "24px"
},
"sections": [
"페이지 제목 및 보조 설명",
"감사 통계 카드 4개",
"최근 감사 목록과 담당자별 진행률의 2열 콘텐츠 영역"
]
}
},
"components": {
"pageHeading": {
"title": "대시보드",
"description": "감사 진행 현황과 주요 업무를 한눈에 확인하세요.",
"titleSize": {
"desktop": "28px~32px",
"mobile": "24px~28px"
},
"descriptionColor": "gray-500"
},
"statCards": {
"count": 4,
"layout": {
"default": "4열 그리드",
"belowLg": "2열 그리드",
"mobile": "1열 스택"
},
"content": [
{
"label": "진행 중인 감사",
"value": "24",
"change": "+12.5%",
"changeTone": "positive"
},
{
"label": "완료된 감사",
"value": "128",
"change": "+8.2%",
"changeTone": "positive"
},
{
"label": "지연된 감사",
"value": "7",
"change": "-3.1%",
"changeTone": "positive"
},
{
"label": "이번 달 신규",
"value": "16",
"change": "+5.4%",
"changeTone": "positive"
}
],
"style": {
"background": {
"light": "white",
"dark": "gray-900"
},
"borderRadius": "12px~16px",
"padding": "20px~24px",
"shadow": "매우 옅은 1단계 그림자",
"border": {
"light": "gray-200/70",
"dark": "gray-800"
},
"label": "13px~14px, gray-500",
"value": "30px~36px, 굵은 글꼴, 숫자 중심",
"change": "12px~13px, 중간 굵기"
}
},
"recentAuditsTable": {
"title": "최근 감사",
"columns": [
"감사명",
"담당자",
"상태",
"마감일"
],
"rowHeight": "64px~72px",
"headerStyle": "작은 대문자 또는 중간 굵기의 gray-500 텍스트",
"cellStyle": "14px~15px",
"statusBadges": {
"진행 중": {
"background": "primary-50 / dark: primary-950",
"text": "primary-700 / dark: primary-300"
},
"검토 중": {
"background": "secondary-50 / dark: secondary-950",
"text": "secondary-700 / dark: secondary-300"
},
"완료": {
"background": "green-50 / dark: green-950",
"text": "green-700 / dark: green-300"
},
"지연": {
"background": "red-50 / dark: red-950",
"text": "red-700 / dark: red-300"
}
},
"responsiveBehavior": {
"mobile": "표를 카드형 행으로 변환하거나, 감사명과 상태를 우선 표시하고 담당자·마감일을 보조 정보로 배치"
}
},
"progressSidebar": {
"title": "담당자별 진행률",
"layout": "콘텐츠 영역 우측의 독립 카드",
"chart": {
"type": "도넛 차트",
"centerLabel": "전체 평균 진행률",
"centerValue": "72%",
"strokeWidth": "12px~16px",
"trackColor": "gray-200 / dark: gray-800",
"segments": "담당자별 진행률에 따라 primary 및 secondary 계열을 사용"
},
"legend": {
"item": "담당자명, 진행률, 작은 색상 원형 마커",
"spacing": "10px~14px"
}
}
},
"layoutGrid": {
"desktop": {
"stats": "repeat(4, minmax(0, 1fr))",
"lowerContent": "minmax(0, 1.8fr) minmax(300px, 1fr)",
"gap": "24px"
},
"tablet": {
"stats": "repeat(2, minmax(0, 1fr))",
"lowerContent": "1열",
"gap": "20px"
},
"mobile": {
"stats": "1열",
"lowerContent": "1열",
"gap": "16px"
}
},
"responsiveBreakpoints": {
"tailwindV4_3Defaults": {
"sm": "640px",
"md": "768px",
"lg": "1024px",
"xl": "1280px",
"2xl": "1536px"
},
"behavior": {
"belowSm": "모바일 단일 열, 헤더 메뉴를 가로 스크롤 또는 메뉴 버튼으로 축약",
"smToMd": "통계 카드를 2열로 배치하고 표의 보조 열을 축소",
"mdToLg": "2열 통계 카드 유지, 하단 콘텐츠는 단일 열",
"lgToXl": "4열 통계 카드와 표·차트 2열 구성",
"xlAndAbove": "콘텐츠 최대 너비를 제한하고 좌우 여백을 확대"
}
},
"colorTokens": {
"primary": {
"name": "indigo",
"usage": "활성 메뉴, 주요 수치, 차트 핵심 세그먼트, 포커스 상태",
"light": {
"50": "#EEF2FF",
"100": "#E0E7FF",
"500": "#6366F1",
"600": "#4F46E5",
"700": "#4338CA"
},
"dark": {
"300": "#A5B4FC",
"400": "#818CF8",
"500": "#6366F1",
"950": "#1E1B4B"
}
},
"secondary": {
"name": "cyan",
"usage": "보조 차트 세그먼트, 검토 상태, 보조 액션",
"light": {
"50": "#ECFEFF",
"100": "#CFFAFE",
"500": "#06B6D4",
"600": "#0891B2",
"700": "#0E7490"
},
"dark": {
"300": "#67E8F9",
"400": "#22D3EE",
"500": "#06B6D4",
"950": "#083344"
}
},
"grays": {
"50": "#F9FAFB",
"100": "#F3F4F6",
"200": "#E5E7EB",
"400": "#9CA3AF",
"500": "#6B7280",
"700": "#374151",
"800": "#1F2937",
"900": "#111827",
"950": "#030712"
},
"semanticAccents": {
"success": {
"light": "#16A34A",
"dark": "#4ADE80"
},
"warning": {
"light": "#D97706",
"dark": "#FBBF24"
},
"danger": {
"light": "#DC2626",
"dark": "#F87171"
}
}
},
"themeModes": {
"light": {
"pageBackground": "gray-50",
"surface": "white",
"primaryText": "gray-900",
"secondaryText": "gray-500",
"divider": "gray-200",
"shadow": "0 2px 8px rgba(15, 23, 42, 0.05)"
},
"dark": {
"pageBackground": "gray-950",
"surface": "gray-900",
"primaryText": "gray-100",
"secondaryText": "gray-400",
"divider": "gray-800",
"shadow": "0 2px 10px rgba(0, 0, 0, 0.24)"
}
},
"interactionAndAccessibility": {
"hover": "카드와 표 행의 배경을 한 단계만 변경",
"focus": "primary 색상의 2px 외곽 링",
"transition": "색상·그림자·배경 변화는 짧고 부드럽게",
"contrast": "본문 텍스트와 상태 배지는 WCAG AA 수준의 대비 유지",
"keyboard": "모든 메뉴, 표 행 액션, 프로필 메뉴를 키보드로 접근 가능",
"chartFallback": "도넛 차트 옆 범례에 담당자명과 정확한 진행률을 항상 텍스트로 제공"
},
"developerPrompt": "AuditFlow의 정부 감사 관리자 대시보드를 구현하세요. 화면은 신뢰감 있고 차분한 미니멀 업무용 UI여야 하며, 상단에는 로고·대시보드·감사 목록·보고서·설정 메뉴와 우측 프로필 아이콘을 배치합니다. 본문에는 페이지 제목, 4개의 감사 통계 카드, 최근 감사 표, 담당자별 진행률 도넛 차트를 구성합니다. 넉넉한 여백, 흰색 또는 짙은 회색 표면, 옅은 그림자, 둥근 카드 모서리를 사용하고, primary는 indigo 계열, secondary는 cyan 계열로 제한합니다. 상태·증감률에는 success, warning, danger 액센트를 사용하되 장식적으로 남용하지 않습니다. 모든 요소는 light/dark 테마에서 동일한 위계를 유지하고, 640px·768px·1024px·1280px·1536px 기준으로 통계 카드와 하단 콘텐츠가 자연스럽게 재배치되도록 합니다. 토큰은 색상, 표면, 텍스트, 테두리, 간격, 반경, 그림자 순서로 재사용하며, primary와 secondary 외의 색상은 회색 및 의미 전달용 액센트에만 사용합니다."
}
AuditFlow 정부 감사 관리자 대시보드를 구현하세요.
상단에는 로고와 대시보드, 감사 목록, 보고서, 설정 메뉴를 배치하고 우측에는 프로필 아이콘을 둡니다. 본문에는 페이지 제목과 설명, 진행 중인 감사·완료된 감사·지연된 감사·이번 달 신규를 보여주는 4개의 통계 카드, 최근 감사 목록 표, 담당자별 진행률 도넛 차트를 구성합니다.
전체 스타일은 넉넉한 여백과 옅은 그림자를 사용하는 신뢰감 있는 미니멀 업무용 UI로 만듭니다. 라이트 모드에서는 밝은 표면과 gray 계열 배경을, 다크 모드에서는 gray-900/950 계열 표면과 배경을 사용합니다. primary는 indigo 계열, secondary는 cyan 계열만 기본 브랜드 색상으로 사용합니다. green, amber, red는 증감률과 감사 상태처럼 의미가 필요한 경우에만 사용합니다.
색상·간격·반경·그림자·텍스트 색상은 정의된 토큰을 우선 사용하고, 컴포넌트마다 임의의 색상을 새로 만들지 않습니다. 통계 카드는 데스크톱에서 4열, 중간 화면에서 2열, 모바일에서 1열로 배치합니다. 최근 감사 표와 진행률 차트는 넓은 화면에서 2열, 작은 화면에서 세로로 배치하며, 모바일에서는 표의 보조 정보를 축약하거나 카드형 행으로 표현합니다. 640px, 768px, 1024px, 1280px, 1536px 기준에서 여백과 열 구조가 자연스럽게 변하도록 설계하세요.
같은 분류의 프롬프트
| 변경 요청의 실제 비용을 따지는 프롬프트 | |
| 경쟁 화면에서 결정을 읽어내는 프롬프트 | |
| 모호한 디자인 피드백을 해석하는 프롬프트 | |
| 디자인 핸드오프 노트 작성 프롬프트 | |
| 개발 인계 명세 쓰는 프롬프트 |