랜딩 페이지 · 온라인 스토어 · 대시보드 · 포트폴리오
Claude Code·Codex용 프론트엔드 디자인 스킬
스타일까지 완성된 페이지에 에이전트가 내 제품, 내 문구, 내 색상을 채워 넣습니다. 어떤 정적 호스팅에도 바로 올릴 수 있습니다.
이번 주 추천웹
3D 아바타 만들기
귀여운 봉제 인형 같은 3D 캐릭터를 브라우저에서 만들고 투명 PNG나 3D 페이지로 저장합니다.
코딩 에이전트에 설치하기
직접 설치
mkdir -p ~/.claude/skills && cd ~/.claude/skills
curl -fL -H "Authorization: Bearer $POPNOW_API_KEY" \
https://api.popnow.ai/api/v1/agent-skills/3d-avatar-maker/download -o popnow-3d-avatar-maker.zip
unzip -o popnow-3d-avatar-maker.zip && rm popnow-3d-avatar-maker.zip/popnow-3d-avatar-maker
mkdir -p ~/.agents/skills && cd ~/.agents/skills
curl -fL -H "Authorization: Bearer $POPNOW_API_KEY" \
https://api.popnow.ai/api/v1/agent-skills/3d-avatar-maker/download -o popnow-3d-avatar-maker.zip
unzip -o popnow-3d-avatar-maker.zip && rm popnow-3d-avatar-maker.zip$popnow-3d-avatar-maker
mkdir -p ~/.cursor/skills && cd ~/.cursor/skills
curl -fL -H "Authorization: Bearer $POPNOW_API_KEY" \
https://api.popnow.ai/api/v1/agent-skills/3d-avatar-maker/download -o popnow-3d-avatar-maker.zip
unzip -o popnow-3d-avatar-maker.zip && rm popnow-3d-avatar-maker.zip/popnow-3d-avatar-maker
mkdir -p ~/.gemini/skills && cd ~/.gemini/skills
curl -fL -H "Authorization: Bearer $POPNOW_API_KEY" \
https://api.popnow.ai/api/v1/agent-skills/3d-avatar-maker/download -o popnow-3d-avatar-maker.zip
unzip -o popnow-3d-avatar-maker.zip && rm popnow-3d-avatar-maker.zippopnow-3d-avatar-maker
mkdir -p ~/.copilot/skills && cd ~/.copilot/skills
curl -fL -H "Authorization: Bearer $POPNOW_API_KEY" \
https://api.popnow.ai/api/v1/agent-skills/3d-avatar-maker/download -o popnow-3d-avatar-maker.zip
unzip -o popnow-3d-avatar-maker.zip && rm popnow-3d-avatar-maker.zip/popnow-3d-avatar-maker
mkdir -p ~/.config/opencode/skills && cd ~/.config/opencode/skills
curl -fL -H "Authorization: Bearer $POPNOW_API_KEY" \
https://api.popnow.ai/api/v1/agent-skills/3d-avatar-maker/download -o popnow-3d-avatar-maker.zip
unzip -o popnow-3d-avatar-maker.zip && rm popnow-3d-avatar-maker.zippopnow-3d-avatar-maker
POPNOW_API_KEY에 PopNow API 키가 필요합니다 · API 키 받기
무엇을 만들고 싶나요?
3D 아바타 만들기
+3귀여운 봉제 인형 같은 3D 캐릭터를 브라우저에서 만들고 투명 PNG나 3D 페이지로 저장합니다.
캘린더 히트맵
+31년간의 일일 활동을 색 농도로 칠한 달력 격자로 보여 주고, 연속 기록, 합계, 키보드 탐색을 지원합니다.
AI SaaS 랜딩페이지
+3따뜻한 모래색 종이 위에 가는 가이드 선과 빗금 거터, 그리고 어시스턴트가 작업을 계획하는 실제 칸반 보드.
애니메이션 히어로 섹션
+3헤드라인 단어가 부드럽게 바뀌고, 버튼 두 개와 넓은 이미지 프레임을 갖춘 랜딩페이지 히어로.
셰이더 히어로 에이전시 웹사이트
+3아래쪽에 고정된 문장 뒤에서 살아 움직이는 주황빛 열기 셰이더 히어로, 알약 모양 내비게이션, 엇갈린 사례 그리드.
다크 모드 SaaS 랜딩페이지
+3모션이 풍부한 어두운 톤의 소프트웨어 마케팅 사이트를 독립된 HTML 파일 하나로 제공합니다.
디자이너 포트폴리오 웹사이트
+3차분한 회색 바탕 위에서 흐려지는 큰 헤드라인을 둘러싼 기울어진 카드 여섯 장, 붉은 인물 카드 하나, 에디토리얼 사례 연구.
개발자 포트폴리오 사이트
+3사례 연구, 글, 발표, 이력서, 문의 폼까지 갖춘 엔지니어용 다크 톤 개인 사이트.
에디토리얼 SaaS 웹사이트
+3네이비색 분할 히어로, 다큐멘터리 사진 옆의 다섯 줄 세리프 헤드라인, 기울어진 띠, 코발트 강조 색 하나.
글래스모피즘 웹사이트 템플릿
+3거의 검은 필름 위의 반투명 유리 알약 모양 버튼, 이탤릭 단어 하나가 들어간 큰 세리프 헤드라인, 이메일 입력.
하드웨어 제품 웹사이트
+3은색 스튜디오 사진 위에 크고 가는 모델명, 반투명 사양 카드, 실제 비율의 제품 라인업, 하드웨어 벤토.
인터랙티브 아키텍처 다이어그램
+3검증된 JSON 모델로 만든 오프라인 클릭형 시스템 다이어그램. 상자마다 근거를 확인할 수 있습니다.
인터랙티브 격자 히어로
+3커서 쪽으로 휘어지는 가는 선들의 어두운 격자. 클릭할 때마다 빛나는 고리가 퍼져 나갑니다.
지식 그래프 탐색기
+3프로젝트 메모를 오프라인에서 검색 가능한 그래프로 바꾸고, 모든 주장을 출처 줄까지 연결합니다.
KPI 대시보드 템플릿
+3따뜻한 종이 위, 빛나는 선 차트 위에 변화율 칩이 달린 KPI 타일 네 개, 세부 표, 목표 막대.
목업에서 만드는 랜딩 페이지
+3완성된 모습의 전체 페이지 디자인 세 개를 먼저 보고 하나를 고르면, 에이전트가 깔끔하고 반응형인 코드로 만듭니다.
매거진 웹사이트 템플릿
+3아티클, 주제, 작은 상점, 구독까지 갖춘 인쇄물 수준의 매거진 사이트를 HTML 파일 하나로.
파티클 애니메이션 히어로
+3따뜻한 종이 위의 문구 옆에서, 아이디어마다 모양이 바뀌고 스크롤하면 흩어지는 잉크와 청록색 점의 회전하는 구.
개인 브랜드 웹사이트
+3얇은 괄호 아래 따뜻한 종이 위로 자연스럽게 스며드는 인물 사진, 양옆에 놓인 가볍고 굵은 문장.
시네마틱 제품 런치 페이지
+3필름 조명을 받은 거의 검은 페이지. 떠다니는 빛 위의 세리프 타이틀 카드, 레터박스 야경 장면, 예약 폼.
관리자 대시보드 템플릿
+3차트, 표, 칸반, 캘린더를 갖추고 실제로 작동하는 백오피스 콘솔을 오프라인 HTML 파일 하나로.
SaaS 랜딩페이지 템플릿
+3작동하는 제품 콘솔, 가격표, 가입 페이지를 갖춘 차분하고 밝은 소프트웨어 마케팅 사이트.
스크랩북 포트폴리오 사이트
+3종이 소품으로 꾸민 여러 페이지짜리 온라인 이력서. 사례 연구와 인쇄용 이력서를 포함합니다.
스니커즈 쇼핑몰 템플릿
+3카탈로그, 상품 페이지, 장바구니, 데모 결제까지 갖춘 신발·의류 쇼핑몰을 HTML 파일 하나로.
워크플로 자동화 랜딩 페이지
+3흑연색 페이지, 왼쪽 정렬의 작은 헤드라인, 그 아래에서 실행되고, 재시도하며, 로그를 흘려보내는 살아 있는 노드 그래프.
제대로 된 디자인 시스템
여백, 글자 크기 체계, 컴포넌트가 스킬에 포함되어 있어 흔한 템플릿이 아닌 완성도 있는 페이지가 됩니다.
템플릿이 아닌 내 콘텐츠
에이전트가 모든 섹션을 내 제품에 맞게 다시 쓰고, 맞지 않는 부분은 지웁니다.
필요할 때만 이미지
히어로 이미지와 제품 사진을 PopNow로 만들거나, 깔끔한 CSS와 SVG 자리표시자를 그대로 둘 수 있습니다.
에이전트 스킬 작동 방식
한 번만 연결 또는 설치
PopNow를 Claude나 ChatGPT에 연결하거나, 스킬을 코딩 에이전트에 설치하세요.
평소 말투로 요청
스킬을 부르고 할 일을 설명하면, 스킬에 담긴 작업 방식과 레이아웃 규칙, 점검 항목을 따릅니다.
비용은 내가 승인
AI 이미지, 영상, 사운드가 필요한 단계에서는 PopNow 크레딧 견적을 보여 주고 승인을 기다립니다.
자주 묻는 질문
에이전트 스킬이란 무엇인가요?
에이전트 스킬은 SKILL.md 안내서와 템플릿, 스크립트, 참고 자료를 담은 폴더입니다. AI 에이전트가 작업이 맞다고 판단하면 이를 따릅니다. Claude Code, Codex, Cursor 등은 자동으로 불러오므로, 일회성 프롬프트가 아니라 검증된 디자인 시스템을 따른 결과가 나옵니다.
에이전트 스킬과 MCP는 무엇이 다른가요?
MCP는 PopNow의 이미지·영상 모델 같은 도구와 데이터에 에이전트를 연결하는 방식입니다. 스킬은 레이아웃 규칙, 단계, 점검 항목처럼 하나의 작업을 잘 해내는 방법을 에이전트에게 알려 주는 안내서입니다. 둘은 함께 쓰입니다. MCP로 PopNow를 연결하면 어시스턴트가 이 스킬들을 찾아 쓰고, 스킬은 이미지와 소리를 위해 PopNow를 호출합니다.
스킬은 무료인가요?
네. PopNow 계정이 있으면 스킬은 모두 무료입니다. PopNow를 통해 Claude나 ChatGPT에서 쓰든, 코딩 에이전트에 설치하든 같습니다. 이미지, 영상, 음악, 음성을 만드는 단계에서만 PopNow 크레딧이 쓰이며, 각 작업은 실행 전에 가격이 정해지고 승인받습니다.
이 스킬을 Claude나 ChatGPT에서 쓸 수 있나요?
네. PopNow를 Claude, ChatGPT 등 MCP를 지원하는 앱에 한 번 연결하고 만들고 싶은 것을 말해 보세요. 어시스턴트가 어울리는 스타일을 보여 주고, 고른 스타일을 사용하며, 생성하기 전에 가격을 확인합니다. 발표 자료, 웹사이트, HTML 영상처럼 파일을 만드는 스킬은 Claude Code 같은 코딩 에이전트에서 가장 잘 작동합니다.
어떤 에이전트를 지원하나요?
SKILL.md 폴더를 읽을 수 있는 에이전트라면 됩니다: Claude Code, Codex, Cursor, Gemini CLI, GitHub Copilot, OpenCode. 스킬은 어디서나 같고 설치 폴더만 다릅니다.
PopNow 자체 스킬과는 무엇이 다른가요?
메인 스킬 페이지의 스킬은 PopNow 안에서 Poppie와 함께 실행됩니다. 에이전트 스킬은 내 컴퓨터의 코딩 에이전트에서 실행되므로 슬라이드, 웹사이트, HTML 기반 영상처럼 계속 편집하고 싶은 파일에 잘 맞습니다.
결과물을 상업적으로 써도 되나요?
네. 만든 결과물은 클라이언트 작업을 포함해 모두 내 것입니다. 스킬 패키지 자체는 본인만 사용할 수 있으며 재판매하거나 재배포하면 안 됩니다.
어떤 AI 도구로 제품 런칭 영상을 만드나요?
PopNow입니다. Claude나 ChatGPT에 연결하거나 코딩 에이전트에 런칭 영상 스킬을 설치한 뒤, 무료 런칭 영상 스타일 20종 이상 중에서 고르세요. 에이전트가 실제 제품으로 MP4를 렌더링하고, 가격을 승인하면 PopNow 음악, 음성, 효과음을 더합니다. 자세한 내용은 'AI로 제품 런칭 영상 만드는 법'을 보세요.
AI 에이전트로 영상, 이미지, 발표 자료를 만드는 가장 좋은 방법은 무엇인가요?
작업에 맞는 스킬과 미디어를 만들 곳을 에이전트에 함께 주는 것입니다. PopNow 에이전트 스킬은 PopNow에 맞춰 작성되어 레이아웃, 프롬프트, 모델 선택이 처음부터 원하는 룩에 맞습니다. 이미지, 영상 소재, 음악, 음성은 모두 하나의 PopNow 계정에서 나오며, 모든 작업은 가격을 먼저 보고 시작합니다.