Claude Code Desktop으로 사이트를 만들고 공개하기

Dribbble에서 마음에 드는 웹사이트 디자인 검색

Dribbble 열기

https://dribbble.com

하나의 디자인 방향 선택

스크린샷 촬영 후 저장

웹사이트 비주얼 제작 또는 수집

Google Flow로 맞춤 비주얼을 만들거나, Pexels에서 기성 콘텐츠를 내려받거나, 실제 비즈니스 자산을 사용하세요.

Google Flow 열기

https://labs.google/fx/tools/flow

Pexels 열기

https://www.pexels.com

사이트 이미지 생성하기

웹사이트에 바로 쓸 수 있는 Google Flow 이미지 프롬프트를 하나 만드세요.

Create one premium, photorealistic, website-ready image for {{BUSINESS_TYPE}}. The image should show {{IMAGE_TYPE}}, shot in a {{VISUAL_STYLE}} style. Aim for {{MOOD}}. For colors, use {{BRAND_COLORS}}. Make it realistic and high-end, like professional commercial photography: clean, well lit, and uncluttered, with natural depth, sharp detail, and calm empty space where website text can sit on top. Generate one single, final, website-ready image only, and set its aspect ratio to {{ASPECT_RATIO}}. Do not create multiple variations, a collage, an image grid, a contact sheet, a split-screen or multi-panel composition, or several images combined into one result — return exactly one image. Avoid text, logos, watermarks, distorted faces or hands, busy or distracting backgrounds, heavy filters, neon glow, and any obviously AI-generated look.

Google Flow 열기

사업 또는 프로젝트 유형

항목을 선택하세요

이미지 종류

항목을 선택하세요

비주얼 스타일

항목을 선택하세요

브랜드 컬러

항목을 선택하세요

분위기

항목을 선택하세요

화면 비율

항목을 선택하세요

히어로 영상 생성하기

시네마틱한 Google Flow 영상 프롬프트를 만드세요.

Create a short, cinematic background video for the hero section of {{BUSINESS_TYPE}}. It should show {{VIDEO_SUBJECT}}, filmed using {{CAMERA_MOVEMENT}}. Aim for {{VISUAL_MOOD}}. The overall style should be {{BRAND_STYLE}}. Keep the clip short and easy to loop, around 5 to 10 seconds, with smooth, slow, steady motion. Make it premium and realistic, like a high-end commercial, and simple enough that a headline stays readable on top of it. Keep the lighting and color consistent with a professional website. Avoid text, logos, watermarks, fast cuts, shaky or jarring movement, distorted faces or hands, busy backgrounds, and any obviously AI-generated look. Deliver the video in {{VIDEO_ORIENTATION}}.

Google Flow 열기

사업 또는 프로젝트 유형

항목을 선택하세요

피사체 또는 장면

예: 나무 카운터 위 갓 내린 커피에서 피어오르는 김

카메라 움직임

항목을 선택하세요

비주얼 분위기

항목을 선택하세요

브랜드 스타일

항목을 선택하세요

영상 방향

항목을 선택하세요

웹사이트 에셋 정리

웹사이트 이미지와 히어로 영상은 assets 폴더 안에 넣으세요. 디자인 참고 스크린샷은 그 밖에 두세요.

Claude Desktop 설치 및 로그인

Claude Desktop 다운로드하기

https://claude.ai/download

웹사이트 프로젝트용 폴더 생성

에셋 폴더와 참고용 스크린샷 추가

Claude Desktop에서 프로젝트 열기

Claude Desktop Code Local Select Project Folder Open Trust Workspace

frontend-design Claude 스킬 설치

frontend-design

Install the frontend-design Claude Skill from https://github.com/anthropics/skills/tree/main/skills/frontend-design for my user account. Inspect the SKILL.md and LICENSE.txt files first, then copy the complete frontend-design folder to ~/.claude/skills/frontend-design while preserving its structure. Confirm when it is installed and ready to use.

웹사이트 프롬프트 커스터마이즈

사이트 만들기

비즈니스 정보와 준비한 비주얼 레퍼런스를 사용해 완전한 웹사이트 빌드 프롬프트를 만드세요.

Build a premium, visually impressive website for my business using the brief below. BUSINESS Business name: {{BUSINESS_NAME}} Business type: {{BUSINESS_TYPE}} Location: {{BUSINESS_LOCATION}} Main services: {{MAIN_SERVICES}} {{CONTACT_DETAILS}} Additional information: {{EXTRA_INFO}} DESIGN DIRECTION Brand colors: {{BRAND_COLORS}} Visual style: {{VISUAL_STYLE}} Main call to action: {{MAIN_CTA}} Sections: {{WEBSITE_SECTIONS}} Use the inspiration screenshot in this project folder as the visual direction. Match its layout feel, spacing, and quality level. Do not copy it exactly, and do not reuse its brand, logo, or text. ASSETS Use the images, logo, and video inside the assets folder in this project folder. Use the hero video wherever it makes the design stronger, and keep the headline readable on top of it. Do not use placeholder or stock images when a real file exists in the assets folder. WHAT TO BUILD Build a complete static website using only HTML, CSS, and JavaScript. If you ask me to choose a project type, use a multi-file static site. Name the main file index.html. Organize every required file clearly inside this project folder. Make the website: - premium, modern, and visually impressive - fully responsive on desktop, tablet, and mobile - built around a memorable, visually strong hero section - premium in its typography, with polished spacing and clear visual hierarchy - smooth, with tasteful animations and interactive details - easy to navigate, with clear navigation and obvious calls to action Avoid: - a generic AI-generated appearance - cluttered layouts, excessive gradients, or neon glow - placeholder text left in the final result - broken links or empty sections - React, Vite, npm, a build step, a backend, or a database Before you start building, ask me any essential questions if important information is missing. Do not invent contact details, prices, reviews, awards, or business claims. Use clearly editable placeholders instead.

선택적인 추가 정보입니다. 확실하지 않으면 비워 두세요. 필요하면 Claude가 물어봅니다.

업체명

예: Apex Auto Detail

업종

항목을 선택하세요

위치

예: 포르투갈 리스본

주요 서비스

전화번호

선택

이메일 주소

선택

주소

선택

연락처 정보

브랜드 컬러

항목을 선택하세요

선호하는 비주얼 스타일

항목을 선택하세요

사이트 섹션

항목을 선택하세요

메인 행동 유도 문구

항목을 선택하세요

업체에 대해 더 알리고 싶은 내용

선택 — 영업시간, 서비스 지역, 다른 곳과의 차별점 등…

웹사이트 빌드 및 미리보기

프롬프트를 Claude Desktop에 붙여넣어 전송한 뒤, 빌드가 끝나면 첫 미리보기를 여세요.

웹사이트 검토 및 다듬기

데스크톱과 모바일 레이아웃을 확인한 뒤, 변경 사항을 설명하거나 필요하면 스크린샷을 첨부하세요.

Hostinger 열기

Hostinger 열기

사이트를 업로드하고 공개하기 위해 Hostinger 대시보드를 엽니다.

https://www.hostg.xyz/SHJlq

웹사이트 마이그레이션 설정

Hostinger Add Website Migrate an Existing Website Upload Website or Backup Files

도메인 선택

임시 도메인을 선택하거나, 플랜에 포함된 도메인을 등록하거나, 이미 보유한 도메인을 연결하세요.

웹사이트 ZIP 업로드

상위 프로젝트 폴더가 아니라 프로젝트 디렉터리 안의 파일과 폴더를 압축하세요. 그래야 index.html이 ZIP의 루트에 위치합니다.

운영 중인 웹사이트 테스트

선택한 도메인을 열고 웹사이트가 데스크톱과 모바일에서 정상 작동하는지 확인하세요.