PLAN GENERATOR
홈페이지 기획안 생성
브랜드 정보 입력 → 섹션 구성 + 효과 + Claude Code·Lovable 프롬프트 자동 생성
✅ API 없이 즉시 생성
서브 컬러
🔍 클라이언트 사이트 URL 분석 선택 — meta 태그 자동 파싱
STYLES
디자인 스타일 레퍼런스
업종·예산·키워드로 바로 검색 — 초보도 3초 안에 찾기
INDUSTRIES
업종별 섹션 구성
외주 들어왔을 때 바로 꺼내 쓰는 페이지 구조
CSS RECIPES
실전 CSS 스니펫
복붙해서 바로 쓰는 디자인 효과들
RESOURCES
레퍼런스 & 에셋
외주 작업 전에 꼭 거치는 사이트들
EFFECT LIBRARY
효과 라이브러리
난이도·구현방법·어울리는 업종별로 필터해서 바로 적용하세요
| | |
HOW TO USE
실전 사용팁
외주를 매출로 바꾸는 작업 원칙
CLAUDE DESIGN SKILLS
디자이너를 위한 AI 스킬 10선
언제 어떤 스킬을 쓰는지 — 한 줄 정의 · 활용법 · 복붙 프롬프트
Stage 1 · Brand → Color Expert Stage 6 · 제작 → UI/UX Pro Max · Frontend Design · canvas-design · algorithmic-art Stage 9 · QA → Web Design Guidelines · impeccable ◐ 선택 → Figma·Motion/3D·Hand-Drawn
KIMI AI BUILDER
Kimi 웹사이트 생성 프롬프트
기본 공식 + 실전 프롬프트 4선 — 복붙해서 바로 kimi.ai 에 사용
기본 공식
[목적] + [디자인 레퍼런스/무드] + [페이지 구조] + [기술 스펙] + [특수 요구사항]
팁1: 템플릿 먼저 선택 (Sunset Trip / Flow Shader / Cyber Rain) 팁2: 에딧 모드 적극 활용 팁3: "fully responsive" 항상 명시
실패 케이스 & 해결법
상황 문제 해결법
결과물이 평범함 프롬프트가 너무 짧음 디자인 레퍼런스 + 구체적 수치 추가
이미지가 placeholder 이미지 소스 미지정 "use high quality images from Unsplash" 추가
레이아웃이 무너짐 너무 많은 요소를 한번에 요청 섹션별로 나눠서 순차 요청
수정이 안 먹힘 수정 지시가 모호함 "히어로 텍스트를 영상 위 다크 영역으로 올려줘, 지금 풍경과 겹쳐서 안 읽힘" 처럼 구체적으로
모바일이 깨짐 반응형 미지정 처음부터 "fully responsive" 명시
🎨 템플릿 활용
템플릿 먼저 선택 후 프롬프트 입력하면 디자인 베이스가 잡혀서 퀄리티 상승
추천: Sunset Trip (여행/프리미엄) · Flow Shader (테크/다크) · Cyber Rain (사이버펑크)
✏️ 에딧 모드
수정할 때는 에딧 모드로 특정 요소를 딱 집어서 수정
전체 재생성 없이 부분 수정 가능
🌍 배포
완성 후 원클릭으로 라이브 도메인 배포 가능
Kimi 제공 도메인(.kimi.page) 또는 커스텀 도메인 연결
🔁 역산 프롬프트
마음에 드는 결과물 URL을 Kimi에게 주고 "같은 형식으로 만들 수 있는 프롬프트를 역산해줘" 하면 동일 수준 복제 가능
Kimi로 만든 게임 예시
🗺 위치 맞추기 게임
3D뷰어 랜덤 사진 보고 세계지도에서 위치 맞추기
플레이하기 →
⌨️ 개발자 타자연습
코드 스니펫 타자연습 게임 (영어/대문자 확인 후 플레이)
플레이하기 →
Body bg: #000. React app mounted on #root. All components in

THE FABRIC OF BABEL

Tear the cloth. Arrange the fragments.

Toggle Canvas
Mint Postcard
Click and drag to tear the text fabric. Arrange torn scraps.
mimic the interaction of the animation to make a language fabric and the teared pieces would be randomly combined to make a collage poem post card` } ]; function initKimiTab() { const grid = document.getElementById('kimi-grid'); if (!grid) return; grid.innerHTML = KIMI_DATA.map(k => `
#${k.no} ${k.badge}
${k.name}
${k.desc}
${k.result ? `결과 보기 →` : ''}
🛠 ${k.stack}
복붙 프롬프트
${k.prompt.replace(//g,'>')}
`).join(''); } function copyKimiPrompt(btn, no) { const item = KIMI_DATA.find(k => k.no === no); if (!item) return; navigator.clipboard.writeText(item.prompt).then(() => { btn.textContent = '✓ 복사됨'; btn.classList.add('copied'); setTimeout(() => { btn.textContent = '프롬프트 복사'; btn.classList.remove('copied'); }, 2000); }); } // ═══════════════════════════════════════════ // 초기화 // ═══════════════════════════════════════════ window.onload = function() { initChips(); initStyleCats(); initIndustries(); initCss(); initAssets(); initEffects(); initTips(); initSkillsTab(); initKimiTab(); };