클로드로 웹사이트 디자인
미니멀하고 현대적인 SaaS 랜딩페이지를 만들어줘.
서비스명은 "Nexora"고, AI 기반 업무 자동화 플랫폼이야.
한국어 사이트로 구성
정리된 디자인 시스템을 따른다.
JSX를 쓰지 말고 HTML과 CSS만 사용한다.
섹션 구성:
- 히어로 섹션 — 강력한 헤드라인 + 서브카피 + CTA 버튼 2개
- 소셜 프루프 — 신뢰할 수 있는 브랜드 로고 나열
- 핵심 기능 3가지 — 아이콘 + 제목 + 설명 카드 형태
- 프라이싱 테이블 — 3가지 플랜 (Free / Pro / Enterprise), 추천 플랜 강조
- CTA 섹션 — 하단 마무리 행동 유도
HTML to Elementor JSON 변환
첨부된 파일 중 HTML 파일을 Elementor JSON 템플릿 형식으로 변환해줘.
Elementor와 호환되는 JSON을 생성하고 Elementor의 컨테이너와 위젯을 사용해.
Elementor Pro 위젯은 사용하지 않는다.
HTML 위젯은 가급적 사용하지 않는다.
헤더와 푸터는 Ultimate Addons for Elementor를 사용해서 구성할 수 있도록 별도 템플릿을 만들어줘.
CSS 파일은 워드프레스 전역 CSS에 넣을 수 있도록 따로 정리해줘.
Elementor MCP로 페이지 만들기
elementor-mcp 도구를 사용해서 @index.html을 엘리멘터 페이지로 변환해줘.
1. 프로젝트 내 CSS 파일에서 색상 팔레트와 타이포그래피 스케일을 읽어 update-global-colors와 update-global-typography로 먼저 등록해
2. 각 섹션과 위젯을 빌드할 때, CSS의 스타일 값을 위젯/컨테이너의 Style 설정에 직접 입력해 (별도 CSS 클래스 의존 없이, Elementor 설정값으로만)
3. 위젯 설정으로 처리할 수 없는 CSS는 residual.css로 저장해줘 (사용자가 추가 CSS에 직접 붙여넣을 수 있게)
4. 페이지 레이아웃은 Elementor 전체 너비로 설정, 생성된 페이지는 워드프레스 프론트 페이지로 설정
5. 헤더/푸터는 페이지에 넣지 말고 Elementor 라이브러리에 section 템플릿으로만 저장해
