웹사이트 디자인 시스템 추출

Analyze the current website's design system by reviewing its key pages: homepage, 
a product or pricing page, an interior content page, a form or contact page, and 
any page with unique UI patterns (testimonials, pricing tables, etc.).

Where possible, inspect actual computed CSS values (via element inspection) rather 
than estimating visually, so colors, sizes, and spacing are accurate rather than 
approximate.

Document the following:

- Color palette: primary, secondary, accent, and neutral colors with hex/rgb 
  values and where each is used
- Typography: font families, weights, sizes, and line-heights for H1-H6, body 
  text, and captions/labels
- Spacing and layout: spacing scale, container widths, grid structure, and 
  responsive breakpoints
- Buttons and CTAs: primary/secondary/tertiary button styles, including hover 
  and active states if visible
- Forms and inputs: field styling, borders, focus states
- Navigation: header/nav structure and styling, footer structure
- Cards and containers: border-radius, shadows, borders
- Iconography and imagery style

Flag any inconsistencies across pages (e.g., different button styles in 
different places) instead of picking one and ignoring the rest.

Output the result as a single markdown (.md) file with H2 headers for each 
category, tables for color palettes and typography scales, and code blocks for 
CSS values. Structure it so a developer or designer could use it directly. 
Save it as [site-name]-design-system.md so I can export it from this thread.

주요 페이지(홈페이지, 제품/요금제 페이지, 내부 콘텐츠 페이지, 폼/문의 페이지, 후기·요금표 등 고유 UI 패턴 페이지)를 검토하여 현재 웹사이트의 디자인 시스템을 분석하세요.

가능한 경우 대략적으로 추정하지 말고 요소 검사 도구를 통해 실제 계산된 CSS 값을 확인하여 색상, 크기, 간격이 정확하도록 하세요.

다음 항목을 문서화하세요:

- 색상 팔레트: 주 색상, 보조 색상, 강조 색상, 중립 색상의 HEX/RGB 값 및 사용 위치
- 타이포그래피: H1-H6, 본문, 캡션/레이블의 폰트 패밀리, 두께, 크기, 줄 간격
- 간격 및 레이아웃: 간격 스케일, 컨테이너 너비, 그리드 구조, 반응형 브레이크포인트
- 버튼 및 CTA: 기본/보조/3차 버튼 스타일(호버 및 활성 상태 포함)
- 폼 및 입력창: 필드 스타일링, 테두리, 포커스 상태
- 네비게이션: 헤더/메뉴 구조 및 스타일, 푸터 구조
- 카드 및 컨테이너: 테두리 반경(border-radius), 그림자, 테두리
- 아이콘 및 이미지 스타일

페이지 간 불일치 사항(예: 위치마다 다른 버튼 스타일)이 있다면 하나만 선택해 무시하지 말고 불일치 사실을 표시하세요.

결과는 카테고리별 H2 헤더, 색상/타이포그래피 표, CSS 값 코드 블록을 포함한 단일 마크다운(.md) 파일로 출력하세요. 개발자나 디자이너가 즉시 활용할 수 있는 구조로 작성하고, 이 대화에서 내보낼 수 있도록 [사이트명]-design-system.md 파일로 저장하세요.

• 활용웹 브라우저 확장 프로그램이나 개발자 도구 분석 기능을 탑재한 AI에서 사용하기 적합합니다.
• 활용경쟁사 웹사이트 분석이나 레거시 웹사이트 리뉴얼 시 디자인 가이드를 신속히 제작해 줍니다.

출처 · prompts.chat · Website Design System Builder — 원문은 출처에 게시된 그대로이며, 권리는 원작자에게 있습니다.

텍스트 결과

Gemini로 실행한 결과입니다. 입력 항목에는 국내 환경의 예시값을 적용했습니다(AI 생성 — 사실 확인 필요).

Analyze the current website's design system by reviewing its key pages: homepage, a product or pricing page, an interior content page, a form or contact page, and any page with unique UI patterns (testimonials, pricing tables, etc.).

Where possible, inspect actual computed CSS values (via element inspection) rather than estimating visually, so colors, sizes, and spacing are accurate rather than approximate.

Document the following:

- Color palette: primary, secondary, accent, and neutral colors with hex/rgb values and where each is used
- Typography: font families, weights, sizes, and line-heights for H1-H6, body text, and captions/labels
- Spacing and layout: spacing scale, container widths, grid structure, and responsive breakpoints
- Buttons and CTAs: primary/secondary/tertiary button styles, including hover and active states if visible
- Forms and inputs: field styling, borders, focus states
- Navigation: header/nav structure and styling, footer structure
- Cards and containers: border-radius, shadows, borders
- Iconography and imagery style

Flag any inconsistencies across pages (e.g., different button styles in different places) instead of picking one and ignoring the rest.

Output the result as a single markdown (.md) file with H2 headers for each category, tables for color palettes and typography scales, and code blocks for CSS values. Structure it so a developer or designer could use it directly. Save it as k-fresh-market-design-system.md so I can export it from this thread.

:root {
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --container-max-width: 1200px;
  --breakpoint-mobile: 768px;
}

.btn-primary {
  background-color: #2E7D32;
  color: #FFFFFF;
  border-radius: 8px;
  padding: 12px 24px;
}
.btn-primary:hover {
  background-color: #1B5E20;
}

.input-field {
  border: 1px solid #E0E0E0;
  border-radius: 4px;
  padding: 10px 14px;
}
.input-field:focus {
  border-color: #2E7D32;
  outline: none;
}

개선안

원문과 같은 언어로 보완한 프롬프트입니다. 점수는 명확성 · 구체성 · 출력 형식 · 재사용성 기준의 AI 평가입니다.

Act as a Senior UI/UX Designer and Lead Front-End Engineer. Analyze the design system of [Target Website URL / Site Name] by inspecting its key pages: homepage, product/pricing, interior content, contact/form, and pages with unique UI components.

Instructions & Methodology:
1. Inspect computed CSS values directly via browser element inspection rather than visually estimating to ensure exact hex/rgb colors, pixel/rem sizes, and spacing.
2. Document the system across these core categories:
   - Color Palette: Primary, secondary, accent, neutrals with exact hex/rgb and component usage rules.
   - Typography: Font families, weights, sizes, line-heights, and letter-spacing for H1–H6, body, captions.
   - Spacing & Layout: Spacing scale, container max-widths, grid layout, responsive breakpoints.
   - Buttons & CTAs: Primary, secondary, tertiary styles including default, hover, focus, and active states.
   - Forms & Inputs: Field styling, borders, placeholder text, focus/error states.
   - Navigation: Header/nav hierarchy, footer layout, and structure.
   - Cards & Containers: Border-radius, box-shadows, borders, padding patterns.
   - Iconography & Imagery: Icon sizes/styles, image border radii, aspect ratios.
3. Inconsistency Audit: Flag any cross-page UI discrepancies (e.g., conflicting button radii or font sizes) explicitly rather than unifying them silently.

Output Format:
Output as a single Markdown file structured for direct developer/designer use:
- Use H2 headings for each category.
- Use Markdown tables for color palettes and typography scales.
- Use CSS code blocks for exact component styles.
- Name/Save the file as `[site-name]-design-system.md`.