
미리보기 갤러리
비슷한 Skill
모든 Skill 보기제공 내용
- 폰트와 이미지가 내장되어 어떤 브라우저에서도 열리고 오프라인에서도 작동하는 단일 독립 웹사이트 파일. 프레임워크 프로젝트가 있다면 그 프로젝트로 이식합니다.
- 실제로 작동하는 커머스 흐름: 용량 옵션이 있는 상품 페이지, 정기 구독 박스 구성기, 장바구니 서랍, 배송 지역을 확인하는 결제 미리보기, 판매처 지도.
- 시그니처 Hero, 리본, 물결, 사진 콜라주를 담은 28페이지 예시와 이미지 17장, 그리고 스토리·재배 농가·저널·배송·FAQ·정책 페이지.
이런 분께 추천
- 온라인으로 판매하며 밝고 경쾌한 스토어가 필요한 주스, 커피, 차, 스낵 브랜드.
- 정해진 지역에 배송하거나 구독 박스를 운영하는 로컬 메이커.
- 쇼핑 페이지를 메뉴로, 매장 찾기를 방문 안내 블록 하나로 바꿔 쓸 수 있는 카페와 베이커리.
이런 분께는 비추천
- 실제 결제나 주문 처리: 결제 화면은 정보를 검증하지만 누구에게도 요금을 청구하지 않습니다.
- 그라디언트와 리본 대신 어둡거나 미니멀하거나 기업적인 룩이 필요한 브랜드.
- 가상의 Halcy 상품을 판매하거나 그 병 아트워크를 내 것처럼 사용하는 경우.
브랜드 아이덴티티·비주얼 시스템웹 디자인·디지털 경험브랜드 사이트 제작스타일 고정편집 가능한 결과물주스 콜라주주스 Hero주스 리본주스 웨이브
이 Skill 소개

Gradient Juice 브랜드 사이트는 음료, 식품, 라이프스타일 브랜드를 위한 경쾌한 브랜드 겸 쇼핑 웹사이트를 만듭니다. 내 병으로 음료를 마시는 인물을 담은 풀블리드 그라디언트 캠페인 사진, 곡선 경로를 따라 흐르는 크림색 텍스트 리본, 섹션 사이의 물결 모양 경계, 밝은 사진 타일이 특징입니다. 예시는 캘리포니아 벤투라의 가상 콜드프레스 주스 브랜드 Halcy로, 실제로 작동하는 쇼핑, 박스 구성, 결제 미리보기를 포함해 28개 페이지가 서로 연결되어 있습니다.

제공 내용
- 폰트와 이미지가 내장되어 어떤 브라우저에서도 열리고 오프라인에서도 작동하는 단일 웹사이트 파일. 이미 프레임워크 프로젝트가 있다면 디자인을 그 프로젝트로 옮겨 드립니다.
- 완전한 쇼핑 기능: 용량 옵션과 실시간 가격이 있는 상품 페이지 6개, 컬렉션, 주간 박스 구성기, 장바구니 서랍, 배송 지역을 확인하는 결제 미리보기, 정직한 완료 페이지.
- 브랜드 페이지: 브랜드 스토리, 월별 전환이 되는 재배 농가, 아티클 4편이 있는 저널, 지도가 포함된 판매처 찾기, 배송과 반품, 검색이 되는 FAQ, 문의, 뉴스레터, 정책, 디자인된 404 페이지.
- 모든 이미지에 하나의 아트 디렉션: 같은 병과 조명으로 맞춘 제품 정물 사진과 밝은 라이프스타일 장면.
- 텍스트가 천천히 흐르는 리본, 빠른 Hero 등장 효과, 차분한 리빌 애니메이션. 모션 줄이기 설정에서는 모두 멈춥니다.

사용 방법
- 브랜드, 가격과 용량이 포함된 상품, 배송 지역과 시간, 브랜드 스토리, 연락처를 알려 주세요. 빠진 문구는 그럴듯한 임시 문구로 작성하고, 확인할 수 있도록 목록으로 정리합니다.
- 에이전트가 병에 내 브랜드명을 넣은 새 Hero 사진과 상품별 정물 사진을 같은 조명으로 생성하게 하거나, 직접 찍은 사진을 보내세요. 패키지에 포함된 중립적인 음료 장면 두 개는 그대로 써도 됩니다.
- 모든 페이지를 데스크톱과 휴대폰에서 열어 보고, 장바구니에 담고, 박스를 구성하고, 결제 미리보기를 테스트한 뒤 원하는 수정을 요청하세요.

서체는 Bricolage Grotesque, Figtree, DM Serif Display를 쓰며 파일에 내장됩니다. 새 이미지는 에이전트의 자체 이미지 도구로 만들어지므로 사용 요금이 발생할 수 있습니다. 결제 화면은 실제로 결제를 받지 않습니다.
시작 전에 필요한 것
- 준비할 것
- 브랜드명, 가격과 용량이 포함된 상품 목록, 짧은 브랜드 스토리 · 시장 정보: 통화, 배송 지역 또는 배송 방식, 연락처 · 직접 촬영한 제품·팀 사진 또는 새 이미지 생성에 대한 승인
- 의존성
- 에이전트 컴퓨터의 Node.js 18 이상 — 오프라인 단일 파일을 빌드하는 번들 스크립트 실행용 · 파일 빌드 중 인터넷 연결 — 폰트를 한 번 내려받아 내장하기 위해 필요 · Hero와 제품 이미지를 위한 에이전트의 이미지 도구 또는 직접 준비한 사진
- 외부 비용
- Hero 사진과 제품 정물 사진은 에이전트의 자체 이미지 도구로 생성되며, 사용 요금이 발생할 수 있습니다. 이미지 도구가 없다면 직접 사진을 제공하세요. 중립적인 음료 장면 두 개는 그대로 써도 됩니다. 예시를 보는 데는 비용이 들지 않으며, 결제 화면은 요금을 청구하지 않습니다.
- 최근 테스트
- v1.0.2 — Claude Code / Claude Desktop / Cowork / Codex / ChatGPT
사용자 리뷰
리뷰를 불러오는 중…








