Claude Code로 웹페이지 디자인 만들기
중급45분2026-06-19
운영팀용 분석·모니터링·테스트 현황을 소개하는 반응형 랜딩페이지를 Claude Code로 생성하고, Higgsfield MCP/CLI 연결 가능 여부와 프로젝트 기준 문서를 함께 정리합니다. 생성된 결과는 index.html, styles.css, app.js, CLAUDE.md, design-brief.md, check-page.mjs를 포함한 수정 가능한 HTML/CSS/JS 프로젝트 폴더입니다.
이 실습은 터미널에서 진행됩니다
오른쪽 패널에서 설치 명령어를 복사하세요이런 걸 배워요
- 운영 업무 맥락을 랜딩페이지 구조로 바꿀 수 있습니다.
- Claude Code에 프로젝트 기준을 알려주는 안내 파일을 만들 수 있습니다.
- Higgsfield MCP/CLI 연결 가능 여부를 안전하게 점검할 수 있습니다.
- 반응형 HTML/CSS/JS 초안을 만들고 수정 요청을 반영할 수 있습니다.
- 로컬 검사 자동화 코드로 결과물을 확인할 수 있습니다.
어떻게 진행해요
1. 작업 환경 확인
2. 프로젝트 기준 정하기
3. Higgsfield 연결 확인
4. 디자인 요청문 작성
5. 랜딩페이지 초안 생성
6. 파일 구조 점검
7. 수정 요청 반영
8. 품질 검사 실행
AI 튜터가 각 단계를 하나씩 안내해줄 거예요