Claude Design으로 AI 티 안 나는 웹사이트 만들기

01핵심 개요

02핵심 기능 구조

• 입력: 웹사이트 아이디어 프롬프트 + 첨부(파일·폴더·참조 이미지·색 팔레트·커스텀 디자인 시스템 .md).
• 템플릿: 프로토타입·슬라이드·와이어프레임·문서·애니메이션. 모델은 Opus 4.8 선택.
• 출력: 약 3~5분 내 다중 페이지 초안(히어로·상품 카탈로그·장바구니·스토리·연락처) + 호버 애니메이션.

03핵심 워크플로우

• 생성: 상세 프롬프트(브랜드 성격·페이지·섹션·디자인 방향) 입력 → 자동 to-do(비주얼 스타일→공용 네비/푸터→페이지들→애니메이션→검증) 수행.
• 반복 수정: 커스텀 이미지 드롭 후 "자연스럽게 반영 + 깨진 페이지 수정" 등 후속 프롬프트.
• 정밀 편집: 마크업(요소 지정 후 변경 지시), 에디트(Figma형 인스펙터로 배경·라운드·여백 등 수동 조정), 트윅스.
• 내보내기/연동: PDF·영상·PPT·아카이브·단독 HTML 내보내기. Claude Code로 직접 전송(프롬프트 복사→붙여넣기), Lovable·Canva·Vercel·Wix 등 외부 연동.

04기술적 맥락

• Claude Design ≠ Claude Code: 디자인(UI 중심)은 Design, 기능화는 Code로 이관하는 분업 구조.
• 결과물을 zip으로 내보내 Cursor 등에서 열어 테스트·개발 가능.
• 동일 Claude 구독으로 Design 접근 가능.

05품질 검증 (TestSprite)

• testsprite.com에서 MCP를 Cursor/Claude Code에 설치(API 키 발급 → add to Cursor).
• 프런트엔드 테스트(코드베이스 스코프, 포트 5173) + PRD 업로드 → 핵심 5개 테스트 자동 수행, 전부 통과.
• 각 테스트는 AI 에이전트의 화면 녹화 제공(예: 연락처 폼 제출 검증).
• GitHub 앱 연동 시 변경마다 자동 테스트, 실패 시 머지 차단.

06활용 시나리오

• 디자인 무경험자: 텍스트 프롬프트만으로 프리미엄 느낌 랜딩페이지 제작.
• 브랜드 사이트: 커스텀 상품 이미지 업로드 후 일괄 교체·반영.
• 개발 연계: Design→Code/Cursor로 이관해 기능 구현 + TestSprite로 회귀 테스트 자동화.

07현황 및 전망

• AI 디자인 도구가 '티 안 나는 고유 디자인' + '코드 이관' + '자동 테스트'까지 한 흐름으로 통합되는 추세를 보여주는 사례.

08용어 사전

09딥링크

• Claude Design 소개·접근
• 초안 디자인 결과 리뷰
• 마크업·에디트 정밀 수정
• TestSprite 자동 테스트