#!/usr/bin/env python3 # -*- coding: utf-8 -*- """ Advanced 웹 디자인 분석 페이지 자동 생성 스크립트 각 웹사이트에 대한 디자인 분석 프롬프트와 상세 페이지를 생성합니다. """ websites = [ # Tech Giants & SaaS (1-30) {"num": "001", "name": "Apple", "url": "https://www.apple.com/", "category": "Tech Giants & SaaS"}, {"num": "002", "name": "Stripe", "url": "https://stripe.com/", "category": "Tech Giants & SaaS"}, {"num": "003", "name": "Linear", "url": "https://linear.app/", "category": "Tech Giants & SaaS"}, {"num": "004", "name": "Vercel", "url": "https://vercel.com/", "category": "Tech Giants & SaaS"}, {"num": "005", "name": "Figma", "url": "https://www.figma.com/", "category": "Tech Giants & SaaS"}, {"num": "006", "name": "Notion", "url": "https://www.notion.so/", "category": "Tech Giants & SaaS"}, {"num": "007", "name": "Webflow", "url": "https://webflow.com/", "category": "Tech Giants & SaaS"}, {"num": "008", "name": "Framer", "url": "https://www.framer.com/", "category": "Tech Giants & SaaS"}, {"num": "009", "name": "Airbnb", "url": "https://www.airbnb.com/", "category": "Tech Giants & SaaS"}, {"num": "010", "name": "Tesla", "url": "https://www.tesla.com/", "category": "Tech Giants & SaaS"}, {"num": "011", "name": "Spotify", "url": "https://www.spotify.com/", "category": "Tech Giants & SaaS"}, {"num": "012", "name": "Netflix", "url": "https://www.netflix.com/", "category": "Tech Giants & SaaS"}, {"num": "013", "name": "Adobe", "url": "https://www.adobe.com/", "category": "Tech Giants & SaaS"}, {"num": "014", "name": "Microsoft", "url": "https://www.microsoft.com/en-us/", "category": "Tech Giants & SaaS"}, {"num": "015", "name": "Google", "url": "https://about.google/", "category": "Tech Giants & SaaS"}, {"num": "016", "name": "Shopify", "url": "https://www.shopify.com/", "category": "Tech Giants & SaaS"}, {"num": "017", "name": "Salesforce", "url": "https://www.salesforce.com/", "category": "Tech Giants & SaaS"}, {"num": "018", "name": "Slack", "url": "https://slack.com/", "category": "Tech Giants & SaaS"}, {"num": "019", "name": "Discord", "url": "https://discord.com/", "category": "Tech Giants & SaaS"}, {"num": "020", "name": "Dropbox", "url": "https://www.dropbox.com/", "category": "Tech Giants & SaaS"}, {"num": "021", "name": "Canva", "url": "https://www.canva.com/", "category": "Tech Giants & SaaS"}, {"num": "022", "name": "Zoom", "url": "https://www.zoom.com/", "category": "Tech Giants & SaaS"}, {"num": "023", "name": "PayPal", "url": "https://www.paypal.com/", "category": "Tech Giants & SaaS"}, {"num": "024", "name": "Uber", "url": "https://www.uber.com/", "category": "Tech Giants & SaaS"}, {"num": "025", "name": "Lyft", "url": "https://www.lyft.com/", "category": "Tech Giants & SaaS"}, {"num": "026", "name": "GitHub", "url": "https://www.github.com/", "category": "Tech Giants & SaaS"}, {"num": "027", "name": "GitLab", "url": "https://gitlab.com/", "category": "Tech Giants & SaaS"}, {"num": "028", "name": "OpenAI", "url": "https://openai.com/", "category": "Tech Giants & SaaS"}, {"num": "029", "name": "Atlassian", "url": "https://www.atlassian.com/", "category": "Tech Giants & SaaS"}, {"num": "030", "name": "Intercom", "url": "https://www.intercom.com/", "category": "Tech Giants & SaaS"}, # Design Systems (31-40) {"num": "031", "name": "Material Design", "url": "https://material.io/", "category": "Design Systems"}, {"num": "032", "name": "Material Design 3", "url": "https://m3.material.io/", "category": "Design Systems"}, {"num": "033", "name": "Carbon Design System", "url": "https://carbondesignsystem.com/", "category": "Design Systems"}, {"num": "034", "name": "Atlassian Design System", "url": "https://atlassian.design/", "category": "Design Systems"}, {"num": "035", "name": "Shopify Polaris", "url": "https://polaris.shopify.com/", "category": "Design Systems"}, {"num": "036", "name": "Apple Human Interface Guidelines", "url": "https://developer.apple.com/design/", "category": "Design Systems"}, {"num": "037", "name": "Google Design", "url": "https://design.google/", "category": "Design Systems"}, {"num": "038", "name": "IBM Design Language", "url": "https://www.ibm.com/design/", "category": "Design Systems"}, {"num": "039", "name": "Microsoft Fluent Design", "url": "https://design.microsoft.com/", "category": "Design Systems"}, {"num": "040", "name": "Design Systems Repository", "url": "https://www.designsystems.com/", "category": "Design Systems"}, # Design Agencies (41-70) {"num": "041", "name": "Instrument", "url": "https://www.instrument.com/", "category": "Design Agencies"}, {"num": "042", "name": "Frog Design", "url": "https://www.frog.co/", "category": "Design Agencies"}, {"num": "043", "name": "Pentagram", "url": "https://www.pentagram.com/", "category": "Design Agencies"}, {"num": "044", "name": "IDEO", "url": "https://www.ideo.com/", "category": "Design Agencies"}, {"num": "045", "name": "Giant Machines", "url": "https://www.giantmachines.com/", "category": "Design Agencies"}, {"num": "046", "name": "ustwo", "url": "https://www.ustwo.com/", "category": "Design Agencies"}, {"num": "047", "name": "AKQA", "url": "https://www.akqa.com/", "category": "Design Agencies"}, {"num": "048", "name": "R/GA", "url": "https://www.rga.com/", "category": "Design Agencies"}, {"num": "049", "name": "Bakken & Bæck", "url": "https://www.bakkenbaeck.com/", "category": "Design Agencies"}, {"num": "050", "name": "Resn", "url": "https://www.resn.co.nz/", "category": "Design Agencies"}, {"num": "051", "name": "Dentsu Creative", "url": "https://www.dentsucreative.com/", "category": "Design Agencies"}, {"num": "052", "name": "Huge Inc.", "url": "https://www.hugeinc.com/", "category": "Design Agencies"}, {"num": "053", "name": "Code and Theory", "url": "https://www.codeandtheory.com/", "category": "Design Agencies"}, {"num": "054", "name": "Razorfish", "url": "https://www.razorfish.com/", "category": "Design Agencies"}, {"num": "055", "name": "Gretel", "url": "https://www.gretelny.com/", "category": "Design Agencies"}, {"num": "056", "name": "Locomotive", "url": "https://www.locomotive.ca/", "category": "Design Agencies"}, {"num": "057", "name": "Active Theory", "url": "https://active-theory.com/", "category": "Design Agencies"}, {"num": "058", "name": "Anton & Irene", "url": "https://www.antonandirene.com/", "category": "Design Agencies"}, {"num": "059", "name": "Build in Amsterdam", "url": "https://www.buildinamsterdam.com/", "category": "Design Agencies"}, {"num": "060", "name": "Wieden+Kennedy", "url": "https://www.wiedenkennedy.com/", "category": "Design Agencies"}, {"num": "061", "name": "Media.Monks", "url": "https://www.media.monks.com/", "category": "Design Agencies"}, {"num": "062", "name": "Sagmeister & Walsh", "url": "https://www.sagmeisterwalsh.com/", "category": "Design Agencies"}, {"num": "063", "name": "Collins", "url": "https://www.collins.design/", "category": "Design Agencies"}, {"num": "064", "name": "WeAreCollins", "url": "https://www.wearecollins.com/", "category": "Design Agencies"}, {"num": "065", "name": "Basic Agency", "url": "https://www.basicagency.com/", "category": "Design Agencies"}, {"num": "066", "name": "GarageFarm", "url": "https://www.garagefarm.net/", "category": "Design Agencies"}, {"num": "067", "name": "Unseen", "url": "https://www.unseen.co/", "category": "Design Agencies"}, {"num": "068", "name": "Studio Dumbar", "url": "https://www.studio-dumbar.com/", "category": "Design Agencies"}, {"num": "069", "name": "Koto", "url": "https://koto.studio/", "category": "Design Agencies"}, {"num": "070", "name": "B-Reel", "url": "https://www.b-reel.com/", "category": "Design Agencies"}, # Award Sites & Galleries (71-80) {"num": "071", "name": "Awwwards SOTD", "url": "https://www.awwwards.com/websites/sites_of_the_day/", "category": "Design Awards & Galleries"}, {"num": "072", "name": "Awwwards SOTM", "url": "https://www.awwwards.com/websites/sites_of_the_month/", "category": "Design Awards & Galleries"}, {"num": "073", "name": "Awwwards Honorable Mentions", "url": "https://www.awwwards.com/websites/honorable-mentions/", "category": "Design Awards & Galleries"}, {"num": "074", "name": "The FWA", "url": "https://thefwa.com/", "category": "Design Awards & Galleries"}, {"num": "075", "name": "CSS Design Awards", "url": "https://www.cssdesignawards.com/wotd-award-winners", "category": "Design Awards & Galleries"}, {"num": "076", "name": "CSS Winner", "url": "https://www.csswinner.com/winners", "category": "Design Awards & Galleries"}, {"num": "077", "name": "SiteInspire", "url": "https://siteinspire.com/", "category": "Design Awards & Galleries"}, {"num": "078", "name": "Mindsparkle Mag", "url": "https://www.mindsparklemag.com/", "category": "Design Awards & Galleries"}, {"num": "079", "name": "Behance", "url": "https://www.behance.net/", "category": "Design Awards & Galleries"}, {"num": "080", "name": "Dribbble", "url": "https://dribbble.com/", "category": "Design Awards & Galleries"}, # Japanese & Asian Companies (81-92) {"num": "081", "name": "teamLab", "url": "https://www.teamlab.art/", "category": "Japanese & Asian Excellence"}, {"num": "082", "name": "Muji", "url": "https://www.muji.com/", "category": "Japanese & Asian Excellence"}, {"num": "083", "name": "Nendo", "url": "https://www.nendo.jp/", "category": "Japanese & Asian Excellence"}, {"num": "084", "name": "Uniqlo", "url": "https://www.uniqlo.com/", "category": "Japanese & Asian Excellence"}, {"num": "085", "name": "Nintendo", "url": "https://www.nintendo.com/", "category": "Japanese & Asian Excellence"}, {"num": "086", "name": "Hyundai", "url": "https://www.hyundai.com/", "category": "Japanese & Asian Excellence"}, {"num": "087", "name": "Samsung", "url": "https://www.samsung.com/", "category": "Japanese & Asian Excellence"}, {"num": "088", "name": "LINE", "url": "https://www.line.me/", "category": "Japanese & Asian Excellence"}, {"num": "089", "name": "Kakao", "url": "https://www.kakaocorp.com/", "category": "Japanese & Asian Excellence"}, {"num": "090", "name": "Naver", "url": "https://www.naver.com/", "category": "Japanese & Asian Excellence"}, {"num": "091", "name": "Good Design Award", "url": "https://www.g-mark.org/", "category": "Japanese & Asian Excellence"}, {"num": "092", "name": "SAF 2026", "url": "https://www.saf2026.com/", "category": "Japanese & Asian Excellence"}, # Global Brands & Media (93-100) {"num": "093", "name": "MoMA", "url": "https://www.moma.org/", "category": "Global Brands & Media"}, {"num": "094", "name": "Tate", "url": "https://www.tate.org.uk/", "category": "Global Brands & Media"}, {"num": "095", "name": "Guggenheim", "url": "https://www.guggenheim.org/", "category": "Global Brands & Media"}, {"num": "096", "name": "NASA", "url": "https://www.nasa.gov/", "category": "Global Brands & Media"}, {"num": "097", "name": "Nike", "url": "https://www.nike.com/", "category": "Global Brands & Media"}, {"num": "098", "name": "Patagonia", "url": "https://www.patagonia.com/", "category": "Global Brands & Media"}, {"num": "099", "name": "The New York Times", "url": "https://www.nytimes.com/", "category": "Global Brands & Media"}, {"num": "100", "name": "NYT Interactive", "url": "https://www.nytimes.com/interactive/", "category": "Global Brands & Media"}, ] def generate_html_template(site): """각 웹사이트에 대한 HTML 페이지 생성""" html_content = f''' {site["num"]}. {site["name"]} - Advanced 웹 디자인 분석
← 목록으로 돌아가기
{site["num"]}

{site["name"]}

{site["url"]}
{site["category"]}

디자인 분석 프롬프트

다음 프롬프트를 Claude Code 또는 Cursor AI에 입력하여 {site["name"]}의 디자인을 분석하고 유사한 디자인을 구현할 수 있습니다.

{site["url"]} 웹사이트의 디자인을 상세히 분석해주세요. 다음 항목들을 포함해서 분석해주세요: 1. **전체적인 디자인 철학과 브랜드 아이덴티티** - 사이트가 전달하고자 하는 핵심 메시지와 감성 - 타겟 사용자와 그들에게 어필하는 방식 2. **색상 팔레트 (Color Palette)** - 주요 색상 (Primary colors) - 보조 색상 (Secondary colors) - 배경색, 텍스트 색상 - 색상의 HEX/RGB 코드 추출 3. **타이포그래피 (Typography)** - 사용된 폰트 패밀리 - 제목, 본문, 버튼 등의 폰트 크기와 굵기 - 행간(line-height), 자간(letter-spacing) 4. **레이아웃 구조 (Layout Structure)** - 그리드 시스템과 간격(spacing) - 섹션 구성 방식 - 반응형 디자인 전략 (모바일, 태블릿, 데스크톱) 5. **주요 UI 컴포넌트** - 네비게이션 바 - 버튼 스타일 - 카드 컴포넌트 - 폼 요소 - 기타 특징적인 UI 요소 6. **시각적 요소** - 이미지 사용 방식 (크기, 비율, 처리 방법) - 아이콘 스타일 - 그래픽 요소와 일러스트레이션 - 애니메이션과 마이크로 인터랙션 7. **사용자 경험 (UX) 패턴** - 네비게이션 흐름 - 콜투액션(CTA) 배치와 디자인 - 스크롤 경험과 페이지 전환 - 로딩 상태와 피드백 8. **기술적 구현 추정** - 사용된 것으로 보이는 프레임워크/라이브러리 - CSS 기법 (Flexbox, Grid, 등) - 애니메이션 기술 - 성능 최적화 기법 9. **차별화 포인트** - 다른 사이트와 구별되는 독특한 디자인 요소 - 혁신적인 UX 패턴 - 기억에 남는 브랜딩 요소 분석 후, 이 디자인 스타일을 활용한 랜딩 페이지를 만드는 실용적인 구현 가이드를 제공해주세요.

분석 포인트

🎨 시각적 디자인
색상, 타이포그래피, 이미지 사용, 그래픽 요소의 조화를 분석합니다.
🏗️ 레이아웃 & 구조
그리드 시스템, 간격, 정렬, 반응형 디자인 전략을 파악합니다.
⚡ 인터랙션
애니메이션, 트랜지션, 호버 효과 등 동적 요소를 살펴봅니다.
🎯 사용자 경험
네비게이션, 정보 구조, 사용 흐름의 효율성을 평가합니다.

구현 프롬프트 예시

{site["name"]} 스타일의 구체적인 컴포넌트를 구현하고 싶을 때 사용할 수 있는 프롬프트들입니다.

1. 히어로 섹션 구현

{site["url"]}의 히어로 섹션 스타일을 참고하여, 다음 요구사항을 만족하는 히어로 섹션을 만들어주세요: - 반응형 디자인 (모바일, 태블릿, 데스크톱 대응) - 매력적인 제목과 부제목 - 명확한 CTA 버튼 - 배경 이미지 또는 그라데이션 - 부드러운 스크롤 애니메이션 HTML, CSS, JavaScript로 구현해주세요.

2. 네비게이션 바 구현

3. 카드 그리드 구현

{site["url"]}의 카드 디자인을 참고하여, 반응형 카드 그리드를 만들어주세요: - CSS Grid 또는 Flexbox 사용 - 호버 시 애니메이션 효과 - 이미지, 제목, 설명, CTA 버튼 포함 - 다크 모드 지원 - 3단 그리드 (데스크톱), 2단 (태블릿), 1단 (모바일) CSS와 HTML로 구현해주세요.

학습 태그

웹 디자인 UI/UX 반응형 디자인 색상 이론 타이포그래피 레이아웃 프론트엔드 디자인 시스템

추천 워크플로우

  1. 사이트 방문: {site["url"]}을 브라우저에서 열어 실제 디자인을 관찰합니다.
  2. 프롬프트 실행: 위의 "디자인 분석 프롬프트"를 Claude Code에 입력합니다.
  3. 스크린샷 첨부: 필요시 특정 섹션의 스크린샷을 Claude Code에 업로드하여 더 정확한 분석을 요청합니다.
  4. 구현 시작: "구현 프롬프트 예시"를 활용하여 원하는 컴포넌트를 구현합니다.
  5. 반복 개선: 생성된 코드를 테스트하고, 필요한 부분을 Claude Code와 함께 개선합니다.
''' return html_content def main(): """메인 실행 함수""" print("🚀 Advanced 웹 디자인 분석 페이지 생성 시작...") for site in websites: filename = f"{site['num']}.html" html_content = generate_html_template(site) with open(filename, 'w', encoding='utf-8') as f: f.write(html_content) print(f"✓ {filename} 생성 완료 - {site['name']}") print(f"\n✨ 총 {len(websites)}개의 페이지가 생성되었습니다!") print("📝 각 페이지에는 디자인 분석 프롬프트와 구현 가이드가 포함되어 있습니다.") if __name__ == "__main__": main()