코딩 · 개발원문 · prompts.chat

웹사이트 디자인 시스템 추출 및 마크다운 변환

Claude Chrome 확장 프로그램으로 웹페이지의 HTML과 CSS를 추출해 디자인 시스템 문서를 작성합니다.

원제 · Website Design System Builder

사용 툴: Claude원문 작성자 표기

프롬프트 원문

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.

‹ 라이브러리로

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.