[프롬프트] 코딩하기 좋게 설명하는 프롬프트

첨부한 01_전수감시상황판.jpg와 동일하게 맞춰줘.

[색] 헤더 그라데이션, 카드 배경, primary 파랑, 차트 3개 시리즈(면+선), 전년대비 배지(빨강/파랑)를 이미지에서 스포이드로 뽑은 HEX로 맞출 것. 내가 적은 HEX: …

[크기] 데스크톱 기준으로, 차트 SVG 영역은 카드 본문 너비 100%, 높이는 이미지와 비슷하게 약 OOpx (또는 데이터 행 N개 높이). 미니 연도 막대 그래프는 가로 100px 고정.

[구조] HTML은 시맨틱 유지, 스타일은 외부 CSS만. 인라인 style 금지.

차이 나는 부분은 “이미지 대비 지금 코드에서 무엇이 다른지” 한 줄씩 짚고 수정해줘.

---

1. 참조를 하나로 고정
같은 파일을 첨부: 01_전수감시상황판.jpg (또는 스크린샷 1장).
“이 이미지 한 장을 유일한 기준으로, 픽셀 단위로 최대한 맞춰줘”라고 명시.
2. 색: 숫자로 요구
프롬프트에 넣기 좋은 형태:

“배경 #F0F4F8처럼 연한 회청색인지, 스포이드로 뽑은 HEX 목록을 적어줘”
→ 가능하면 본인이 스포이드로 헤더 그라데이션 시작/끝, 카드 배경, primary, 배지 빨강/파랑, 차트 시리즈 3색만이라도 HEX로 적어서 전달.
“차트 선 색 / 면 채움(투명도 포함) 을 이미지와 동일하게. 지금은 채도가 높다/낮다처럼 차이 한 줄도 적기.”
예시 문장:
“차트 영역 배경은 거의 흰색에 가깝고, 격자선은 #E8ECF1 수준의 아주 연한 점선. 시리즈1은 #0054A6 계열이 아니라 이미지처럼 더 연한 파랑 #….”

3. 크기: 비율과 “기준 박스”
그래프는 “크게”보다 어디에 맞출지가 중요합니다.

“첫 번째 카드 안에서 차트 높이는 카드 너비의 약 35%”처럼 비율로 말하거나,
“이미지에서 차트 가로는 카드 패딩 제외 전체 폭, 세로는 데이터 행 2개 높이 정도”처럼 주변 요소와의 상대 크기로 설명.
“SVG viewBox는 유지하되, 화면에서 보이는 높이는 180px처럼 목표 px를 하나 정해줘.”
4. 타이포·간격까지 한 번에
폰트: “Noto Sans KR 400/700만” vs “Pretendard” 등 글꼴 이름 고정.
“카드 border-radius 12px vs 16px”, “헤더 높이 약 56px”처럼 한두 개라도 숫자를 요청.
5. 한 번에 다 말하지 말고 단계로
한 프롬프트에 전부 넣으면 놓치기 쉽습니다.

레이아웃·크기만 맞추기 (그리드, 카드, 차트 박스 높이)
색 팔레트만 맞추기 (헤더, 차트 시리즈, 배지)
디테일 (그림자, 테두리, 범례 위치·글자 크기)
각 단계마다 “이전 단계는 유지하고, 이번엔 색만 수정”이라고 쓰면 됩니다.

6. “같다”의 기준을 명시
“픽셀 단위로 스크린샷을 겹쳤을 때 차트 박스 외곽선이 일치하도록”
“모바일은 나중에, 데스크톱 1440px 뷰만 우선”

 

 

 

I will provide a UI design (from Figma). Analyze the layout carefully and convert it into clean HTML and CSS. Requirements: - Use semantic HTML structure - Use clean, modern CSS (flexbox or grid) - Match spacing, alignment, and proportions as closely as possible - Keep the layout responsive - Use reusable class naming (BEM or similar) - Do not add unnecessary elements - Focus on pixel-accurate implementation Explain the structure briefly, then provide full code.	기본 (HTML + CSS) 저는 (피그마에서) UI 디자인을 제공할 것입니다. 레이아웃을 신중하게 분석하여 깨끗한 HTML 및 CSS로 변환합니다. 요구 사항: - 시맨틱 HTML 구조 사용 - 깨끗하고 현대적인 CSS(플렉스박스 또는 그리드) 사용 - 간격, 정렬 및 비율을 최대한 가깝게 일치시킵니다 - 레이아웃 응답성 유지 - 재사용 가능한 클래스 명명 사용(BEM 또는 유사) - 불필요한 요소를 추가하지 마십시오 - 픽셀 정확도 구현에 중점을 둡니다 구조를 간단히 설명한 다음 전체 코드를 제공합니다.
I will provide a UI design. Convert this design into a React component. Requirements: - Use functional components - Use clean JSX structure - Use Tailwind CSS (or plain CSS if not specified) - Break into reusable components if needed - Maintain visual hierarchy and spacing - Make it responsive Also explain component structure briefly.	React 컴포넌트 버전 (추천 👍) UI 디자인을 제공하겠습니다. 이 디자인을 React 구성 요소로 변환합니다. 요구 사항: - 기능 구성 요소 사용 - 깨끗한 JSX 구조 사용 - 테일윈드 CSS 사용(지정되지 않은 경우 일반 CSS) - 필요한 경우 재사용 가능한 구성 요소에 침입하세요 - 시각적 계층 구조와 간격 유지 - 반응성 있게 만들기 구성 요소 구조도 간략하게 설명합니다.
Convert this UI design into Tailwind CSS. Requirements: - Use only Tailwind utility classes - Match spacing, font size, and layout accurately - Keep it clean and minimal - Ensure responsive design (mobile + desktop) - No unnecessary wrapper divs Return clean HTML structure only.	Tailwind 전용 (디자이너 → 개발 협업용) 이 UI 디자인을 테일윈드 CSS로 변환합니다. 요구 사항: - 테일윈드 유틸리티 클래스만 사용 - 간격, 글꼴 크기 및 레이아웃을 정확하게 일치시킵니다 - 깨끗하고 최소한으로 유지하세요 - 반응형 디자인(모바일 + 데스크톱) 보장 - 불필요한 포장지 구분 없음 깨끗한 HTML 구조만 반환합니다.

 

추가! 완성도 높이는 문구

Ensure pixel-perfect spacing, consistent alignment, and professional production-level quality.

픽셀 단위의 완벽한 간격, 일관된 정렬, 그리고 전문적인 제작 수준의 품질을 보장합니다.