상세페이지 만드는 클로드·코덱스 스킬 · 파일 + 설치법 + 요청문

pip install playwright pillow
playwright install chromium

3. 클로드 코드를 새로 열고 /skills를 입력해 detail-page-maker가 보이면 끝이에요.

코덱스

1. zip을 풀어서 detail-page-maker 폴더를 ~/.codex/skills/ 안에 넣어요.
2. 터미널에서 한 번만 실행해요. (클로드 코드에서 이미 했다면 건너뛰어요)

pip install playwright pillow
playwright install chromium

3. 코덱스를 새로 열고 “detail-page-maker 스킬이 보이니?“라고 물어서 보인다고 답하면 끝이에요.

폴더를 직접 옮기기 어렵다면 코덱스나 클로드 코드에 아래처럼 시켜도 돼요.

내려받은 detail-page-maker 폴더를 스킬 폴더에 넣고
필요한 설치까지 해 줘.

쓰는 법

폴더 하나를 만들고 안에 상품 사진과 상품 설명(product-info.md 또는 아무 텍스트 파일)을 넣어요. 그 폴더에서 클로드 코드나 코덱스를 열고 아래 요청문을 붙여 넣어요.

detail-page-maker 스킬로 이 폴더의 상품 상세페이지를 만들어 줘.
상품 설명은 product-info.md, 사진은 assets 폴더에 있어.
스마트스토어와 쿠팡용 이미지까지 내보내 줘.

• 참고할 판매 페이지는 알아서 찾아요. 잘 팔리는 페이지를 직접 레퍼런스로 주려면 링크를 한 줄 더 적어요. 정하고 싶으면 링크를 한 줄 더 적어요.
• 가격·후기처럼 받지 못한 정보는 지어내지 않고 open-items.md에 빈칸 목록으로 남겨요.
• 결과는 out/v01/에 HTML과 export/ 폴더(판매처별 이미지)로 나와요.

고치기

만든 뒤에 말로 시키면 돼요. 이전 결과는 그대로 두고 v02로 새로 만들어요.

첫 화면 제목을 '당김은 빼고 촉촉함만'으로 바꾸고 색은 피치로 바꿔 줘.

해당 섹션만 새로 만들고 나머지는 그대로 둬요.

알아 둘 것

• 영상 속 상품은 시연용 가상 상품이고 사진도 AI로 만들었어요.
• 챗지피티나 코덱스처럼 이미지 생성 툴이 있으면 사진이 없는 연출컷만 만들어 넣어요. 툴이 없으면 만들지 않아요.
• 스마트스토어 860px·쿠팡 780px 폭은 일반 권장값이에요. 올리기 전에 판매자센터 기준을 한 번 확인하세요.
• 참고한 페이지의 로고·상표·원본 이미지는 그대로 쓰지 마세요. 내 상품 이름과 내 사진으로 바꿔서 써야 해요.