UI 스크린샷을 분석하여 개발자 전달용 핸드오프 브리프와 Tailwind 기반 JSONC 디자인 명세를 생성합니다.
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.이것은 ${brand:AuditFlow}라는 현대적인 ${focus:정부 감사} 앱의 ${page_type:대시보드} 스크린샷입니다.
이 스크린샷의 UI를 철저히 분석하여 UI 디자이너가 개발자에게 전달할 수 있도록 가능한 한 자세하게 기술하세요. 브리프는 라이트 모드와 다크 모드를 모두 다루어야 하며 Tailwind CSS v4.3 기본값에 맞춘 반응형 중단점을 포함해야 합니다.
특성을 구조화된 JSONC 형식으로 출력하세요.
색상의 경우 대략적인 팔레트를 추출하고 액센트 및 복잡한 미디어만 상세히 설명하세요. 목표는 Tailwind 색상과 유사한 기본 및 보조 2가지 팔레트만 사용하는 것입니다. 이 2가지 외에도 더 복잡한 UI(그라데이션, 그림자, SVG 등)를 위해 자유롭게 회색조 및 액센트 색상을 정의할 수 있습니다.
개발자가 UI를 구현할 수 있도록 설명하는 프롬프트로 마무리하되, 기술 사양은 언급하지 말고 구현할 UI의 개요 및 토큰 규칙+사용법만 작성하세요. 프롬프트는 마크다운 코드 블록으로 출력하세요.
출력은 두 개의 코드 블록으로 구성되어야 합니다: 하나는 디자인 브리프용, 다른 하나는 JSONC 디자인 명세서용입니다.출처 · prompts.chat · Design Brief — 원문은 출처에 게시된 그대로이며, 권리는 원작자에게 있습니다.
Gemini로 실행한 결과입니다. 입력 항목에는 국내 환경의 예시값을 적용했습니다(AI 생성 — 사실 확인 필요).
This is a dashboard of a modern public sector audit app called AuditFlow KR. 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.
디자인 사양을 정의한 JSONC와 개발자 전달용 구현 프롬프트 2가지 코드 블록입니다.
{
// AuditFlow KR 대시보드 디자인 사양
"appName": "AuditFlow KR",
"pageType": "dashboard",
"breakpoints": {
"sm": "640px",
"md": "768px",
"lg": "1024px",
"xl": "1280px",
"2xl": "1536px"
},
"theme": {
"colors": {
"primary": "blue", // 주요 버튼 및 메인 지표 카드
"secondary": "indigo", // 네비게이션 및 서브 위젯
"grays": "slate", // 배경 및 텍스트 레이어
"accents": {
"danger": "#EF4444", // 고위험 감사 항목
"warning": "#F59E0B", // 검토 필요 항목
"success": "#10B981" // 승인 완료 상태
}
},
"modes": ["light", "dark"]
}
}# AuditFlow KR 대시보드 구현 지침 - **화면 개요**: 공공 감사 지표, 리스크 스코어, 최근 제출된 보고서 목록을 시각화하는 대시보드를 구현합니다. - **토큰 사용 규칙**: 메인 UI 요소에는 Primary(Blue)와 Secondary(Indigo) 팔레트만 적용하며, 감사 상태(위험/경고/완료) 표현 시 지정된 Accent 컬러를 사용하세요. - **반응형 & 다크모드**: Tailwind 기본 브레이크포인트에 맞춰 그리드가 유연하게 재배치되어야 하며, 라이트/다크 모드 전환 시 배경과 텍스트 토큰이 상호 호환되도록 구성합니다.
mopick 개선안
원문을 그대로 넣으면 AI 가 매번 다르게 답하거나 중요한 부분을 빠뜨릴 수 있습니다. 개선안은 원문의 뜻과 언어는 그대로 두고 역할 · 바꿔 넣을 입력 칸 · 결과 형식 · 지킬 조건을 보완해 다시 쓴 버전입니다. 원문과 같은 곳(ChatGPT · Claude 등)에 그대로 붙여 넣어 쓰면 됩니다.
AI 평가 점수 — 명확성 · 구체성 · 결과 형식 · 재사용성 기준(100점)
AI 역할레슨 01 배우기 ›
원문 · 없음AI 에게 맡길 역할이 정해져 있지 않아 답의 관점 · 수준이 그때그때 달라질 수 있었습니다.
개선 · 역할을 정함Act as a Senior UI/UX Designer and Design Systems Architect.
작업 순서레슨 07 배우기 ›
원문 · 없음작업 순서가 정해져 있지 않아 AI 가 순서를 스스로 정해야 했습니다.
개선 · 4단계
이 개선안에 쓰인 기법 — 프롬프트 클래스에서 배우기
원문
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.개선안 · 색칠한 [칸]에 내 내용을 넣어 쓰세요
Act as a Senior UI/UX Designer and Design Systems Architect.
Analyze the UI in the provided screenshot for a ${page_type:dashboard} of a modern ${focus:government audit} app called ${brand:AuditFlow}, and create a thorough designer-to-developer handoff specification.
Requirements:
1. **Design System & Breakpoints**: Cover light/dark modes and standard Tailwind CSS v4.3 responsive breakpoints.
2. **Color Palette**: Limit main colors to 2 primary/secondary palettes (Tailwind-style). Add neutral grays and specific accent tokens only for complex media (gradients, shadows, SVGs).
3. **JSONC Spec**: Structure components, layout hierarchy, and color tokens into valid JSONC format.
4. **Developer Implementation Prompt**: Write a Markdown prompt briefing a developer on UI implementation, token rules, and usage without referencing framework tech specs.
Output Format (Provide exactly two code blocks):
Block 1: ```jsonc (JSONC design specification)
Block 2: ```markdown (Developer implementation prompt)
Self-Review: Verify that all UI elements are captured and color token names match across both outputs.