<p align="center">
<a href="https://instalanding.ai"><img src="https://raw.githubusercontent.com/RayVelez27/instalanding.ai/HEAD/assets/preview.png" alt="InstaLanding.ai — one-shot HTML library" width="100%"></a>
</p>
InstaLanding.ai
사람과 에이전트를 위해 제작된 프리미엄 페이지들. 단일 파일로 구성됩니다. 의존성 없음. 복사하고, 리믹스하고, 배포하세요.
이 저장소의 모든 페이지는 CSS, JavaScript, SVG art 및 이미지가 모두 인라인(inline)으로 포함된 단일 HTML 파일 형태의 완전한 랜딩 페이지입니다. 디스크에서 바로 열 수 있습니다. 설치할 것이 없고 빌드 단계도 필요 없습니다. 폰트는 Google Fonts에서 가져오며, 일부 페이지는 CDN을 통해 GSAP 또는 Three.js를 로드합니다. 각 페이지 옆에는 **원샷 프롬프트(one-shot prompt)**가 있습니다. 이는 짧은 지침이 상단에 추가된 동일한 파일로, AI 빌더나 코딩 에이전트가 한 번의 작업으로 정확히 해당 페이지를 구축할 수 있게 합니다. 해석해야 할 산문(prose)이 없습니다. 코드 자체가 사양(specification)입니다.
페이지와 함께 **디자인 시스템(design systems)**도 제공됩니다. 이는 페이지 뒤에 숨겨진 시각적 언어이며, 이를 추출하여 사용자 또는 에이전트가 해당 스타일로 더 많은 것을 구축할 수 있게 합니다. 디자인 토큰은 CSS custom properties 형태로 제공되며, 페이지 자체의 컴포넌트는 사용자의 것과 충돌하지 않도록 범위(scoped)가 지정되어 있고, 이들을 하나로 묶는 규칙들(conventions)이 있습니다. Design systems를 참조하세요.
<!-- SYSTEMS-INTRO -->
그리고 이제 **모션(motion)**입니다. 각각 하나의 움직임에 대한 연구물들을 다룹니다. 캐러셀, 아코디언, 무한 루프, 스크롤 패럴랙스, 바람에 날리는 꽃잎, 단어로 솟아오르는 물 등입니다. 이들은 모두 단일 HTML 파일로 구성되어 있으며, 어떤 동작이 언제, 어떤 이지(ease)를 사용하여 움직이는지에 대한 안무가 작성되어 있고, 구동하는 입력값과 이를 구축하는 원샷 프롬프트가 포함되어 있습니다. Motion을 참조하세요.
<!-- MOTION-INTRO -->
instalanding.ai/pages, instalanding.ai/systems 및 **instalanding.ai/motion**에서 라이브로 둘러보세요.
새로운 추가물(New drops)
<!-- NEW-DROPS:START -->
2026년 11월 8일 업데이트 · 94개 페이지. 새로운 페이지는 여기에 가장 먼저 올라옵니다. 모든 페이지는 The pages 아래에 나열됩니다.
<table border="1">
<tr>
<td width="260"><a href="pages/bryo-ai-moss-cultivation-page"><img src="https://raw.githubusercontent.com/RayVelez27/instalanding.ai/HEAD/pages/bryo-ai-moss-cultivation-page/preview.jpg" width="240" alt="브리오 AI 이끼 재배 페이지"></a></td>
<td><b><a href="pages/bryo-ai-moss-cultivation-page">브리오 AI 이끼 재배 페이지</a></b> · <sub style="font-size: 0.9em;">2026년 11월 8일</sub><br>이끼를 키우는 AI를 위한 안개 낀 세이지와 라임 색상의 페이지로, 코드로 완전히 구현되었습니다: 스크롤 기반 카메라가 안개 낀 침엽수 계곡으로 다이돌리(dollies down)하는 부유하는 이끼 섬과 양치식물. (헤드라인, 단어별 비전, 센서 핫스팟이 있는 설명, 커버리지 스파크라인 및 기능 목록이 포함된 필드 카드)를 통해 다섯 단계의 스토리텔링을 전개하며, 이후 생성된 항공 예술 아트가 담긴 사용 사례(use-case) 카드, 카운팅 통계, 네 가지 성장 루프, AI 감지 박스가 있는 실시간 이끼 성장 시뮬레이션, 가격 책정, FAQ, 대기자 명단 CTA를 포함합니다.<br><sub style="font-size: 0.9em;"><a href="pages/bryo-ai-moss-cultivation-page/index.html">코드</a> · <a href="pages/bryo-ai-moss-cultivation-page/PROMPT.md">프롬프트</a> · <a href="https://instalanding.ai/demos/bryo-ai-moss-cultivation.html">라이브 데모</a></sub>
</td>
</tr>
</table>
Landra AI 랜딩 페이지 생성기 페이지
2026년 11월 8일
한 문장을 랜딩 페이지로 변환하는 AI 도구를 위한 검은색과 라임색의 페이지: 드래그 속도에 따라 휘어지고 픽셀 모자이크 디졸브(pixel-mosaic dissolve)를 통해 임의의 전체 화면을 열 수 있는 여덟 개의 생성된 페이지로 구성된 WebGL 히어로 스트립, 프롬프트 박스가 포함된 거대한 LANDRA 워드마크, 그리고 사용자가 입력한 프롬프트를 타이머, 기능, 카운팅 통계(counting stats), 월별/연간 가격 책정 토글(monthly / yearly pricing toggle), FAQ, 프롬프트 CTA와 함께 단계적으로 테마가 적용된 목업 사이트(mock site)를 구축하는 라이브 데모.
[링크] 코드 (Code) · 프롬프트 (Prompt) · 라이브 데모 (Live demo)
<tr><td width="260"><a href="pages/buttonzilla-glass-console-page"><img src="https://raw.githubusercontent.com/RayVelez27/instalanding.ai/HEAD/pages/buttonzilla-glass-console-page/preview.jpg" width="240" alt="ButtonZilla Glass Console Page"></a></td><td><b><a href="pages/buttonzilla-glass-console-page">ButtonZilla Glass Console Page</a></b> · <sub style="font-size: small;">Nov 8, 2026</sub><br>실시간 3D 유리 버튼을 위한 어두운 하드웨어 스타일 콘솔: 호버 시 기울어지고(tilt), 누를 때 찌그러지며(squash) 표면에 잔물결을 전송하는 굴절되고 베벨 처리된 알약 모양의 WebGL 모니터, 단일 또는 8개 그리드 보기, 신호 미터를 갖춘 호박색 LCD 리드아웃, 8가지 프리셋 채널(Frosted, Crystal, Amber, Jelly, Bubble, Cobalt, Clay, Sea glass), 그리고 모양(shape), 유리(glass), 액체(liquid), 장면(scene)을 위한 로터리 노브가 있으며, Shuffle, Reset 및 Copy JSON 기능을 제공합니다.<br><sub style="font-size: small;"><a href="pages/buttonzilla-glass-console-page/index.html">코드</a> · <a href="pages/buttonzilla-glass-console-page/PROMPT.md">프롬프트</a> · <a href="https://instalanding.ai/demos/buttonzilla-glass-console.html">실시간 데모</a></sub></td></tr>
<tr><td width="260"><a href="pages/forgewave-vibe-manufacturing-studio-page"><img src="https://raw.githubusercontent.com/RayVelez27/instalanding.ai/HEAD/pages/forgewave-vibe-manufacturing-studio-page/preview.jpg" width="240" alt="Forgewave Vibe-Manufacturing Studio Page"></a></td><td><b class="">[링크] Forgewave Vibe-Manufacturing Studio Page</b> · <sub class="">노벰버 8, 2026</sub><br>설명된 분위기(vibe)를 실제 제품으로 변환하는 스튜디오를 위한 빨간색과 잉크 색상의 페이지로, 전체가 애니메이션 SVG로 그려져 있습니다: 히어로 섹션의 컨베이어에 로봇 팔이 물품을 적재하고, 타이핑된 브리프가 스피커에 눌리는 모습, 페이더(faders)와 링크리지(linkages)가 있는 네 개의 스티키 서비스 카드, 레이어별 프린터와 유닛 카운터, 프로젝트 그리드, 깜빡이는 로봇 초상화가 있는 팀 전환기, 가격 책정 섹션, 스크롤로 자라나는 조립 라인, 추천사 전환기, 그리고 공장 벨트 푸터를 포함합니다.<br><sub class=""><a href="pages/forgewave-vibe-manufacturing-studio-page/index.html">코드 (Code)</a> · <a href="pages/forgewave-vibe-manufacturing-studio-page/PROMPT.md">프롬프트 (Prompt)</a> · <a href="https://instalanding.ai/demos/forgewave-vibe-manufacturing-studio.html">라이브 데모 (Live demo)</a></sub></td></tr>
<tr><td width="260"><a href="pages/kyma-ai-automation-agency-page"><img src="https://raw.githubusercontent.com/RayVelez27/instalanding.ai/HEAD/pages/kyma-ai-automation-agency-page/preview.jpg" width="240" alt="KYMA AI Automation Agency Page"></a></td><td><b class="">KYMA AI 자동화 에이전시 페이지</b> · <sub class="">2026년 11월 8일</sub><br>AI 자동화 에이전시를 위한 브루탈리즘(brutalist) 스타일의 검은색, 종이 및 라임 색상 페이지로, 눈에 띄는 네 개의 열 그리드 위에 배치되어 있다: 플레이할 수 있는 라이브 자동화 파이프라인을 가진 히어로 섹션, 스크롤함에 따라 여덟 가지 문제점(pain points)이 화면에서 날아가는 고정형 섹션, 슬라이더가 포함된 ROI 계산기, 인덱스 서비스 테이블, 6주 프로세스 측정기(ruler), 그려진 예술 작품이 있는 사례 연구, 팀을 위한 시드 반톤 초상화(seeded halftone portraits), 통합 그리드, 가격 책정 토글(pricing toggle), 그리고 생성형 기사 커버<br><sub class=""><a href="pages/kyma-ai-automation-agency-page/index.html">코드 (Code)</a> · <a href="pages/kyma-ai-automation-agency-page/PROMPT.md">프롬프트 (Prompt)</a> · <a href="https://instalanding.ai/demos/kyma-ai-automation-agency.html">라이브 데모 (Live demo)</a></sub></td></tr
<table>
<tr><td width="260"><a href="pages/cutcrew-ai-video-agents-page"><img src="https://raw.githubusercontent.com/RayVelez27/instalanding.ai/HEAD/pages/cutcrew-ai-video-agents-page/preview.jpg" width="240" alt="Cutcrew AI Video Agents Page"></a></td><td><b><a href="pages/cutcrew-ai-video-agents-page">Cutcrew AI Video Agents Page</a></b> · <sub >Nov 7, 2026</sub><br>다섯 개의 AI 비디오 편집 에이전트를 위한 밝고 재미있는 페이지로, 각 에이전트는 제자리에 떠다니는 SVG로 그려진 캔디 색상의 로봇 마스코트입니다. 여기에는 에이전트 카드들의 히어로 팬(hero fan), 인라인으로 배치된 로봇들이 있는 문장, 호버 툴팁이 있는 어두운 타임라인 스트립, 에이전트에게 지시하는 세 가지 방법 (셀프 타이핑 프롬프트가 있는 아코디언과 TypeScript SDK 카드) 등이 포함되어 있습니다. 또한 스튜디오 서비스 인덱스, 스위핑 플레이헤드가 있는 6주 간트 차트, 프로젝트 덱의 팬(fanning), 앨범 갤러리, 팀 카드 덱, 자동 진행되는 스토리, 월별/연간 가격 책정 및 CTA에 있는 회전하는 3D 커버 링이 있습니다.<br><sub ><a href="pages/cutcrew-ai-video-agents-page/index.html">Code</a> · <a href="pages/cutcrew-ai-video-agents-page/PROMPT.md">Prompt</a> · <a href="https://instalanding.ai/demos/cutcrew-ai-video-agents.html">Live demo</a></sub></td></tr>
</table>
<!-- NEW-DROPS:END -->
페이지 사용하기 (Use a page)
열어보기(Open it). 모든 pages/<name>/index.html은 file://에서 실행됩니다. 설치나 빌드 단계가 필요 없습니다.
재구성하기(Remix it). 각 파일은 다음에 편집하는 사람을 위해 헤더 주석과 함께 열립니다. 디자인 토큰이 어디에 있는지, 섹션 순서, 각 스크립트가 무엇을 구동하는지, 그리고 변경했을 때 무엇이 깨지는지에 대한 정보입니다. 모든 최상위 영역에는 data-section 속성(nav, hero, pricing, footer 등)이 포함되어 있어, 하나의 섹션을 자신의 프로젝트로 가져갈 수 있습니다.
당신의 스택에서 재구축하세요(Rebuild it in your stack). 각 페이지 옆에 있는 PROMPT.md가 프롬프트입니다. 이는 짧은 지침과 함께 해당 페이지의 전체 HTML 파일이 제공됩니다. 이를 Claude Code, Codex, Cursor, OpenCode, Lovable, v0 또는 모든 에이전트에 붙여넣고, 프레임워크 이름을 지정하면, 페이지를 충실하게 변환합니다. 헥스 값(hex values), 반지름(radii), 이징(easing), 브레이크포인트(breakpoints), 모션(motion) 모두 코드가 담겨 있기 때문에 동일하게 유지됩니다.
콘텐츠 교체하기(Replace the content). 여기에 있는 모든 브랜드, 제품, 숫자, 로고 및 추천사는 가상의 것입니다.
에이전트를 위한 기능 (For agents)
AGENTS.md부터 시작하세요. index.json은 각 페이지가 어떤 용도에 가장 적합한지, 스타일, 순서대로 포함된 섹션, 스택(라이브러리, 폰트, WebGL/canvas), 그리고 파일 경로를 나열합니다. 따라서 에이전트는 페이지를 열어보지 않고도 선택할 수 있습니다. 동일한 라이브러리는 instalanding.ai/llms.txt, instalanding.ai/prompts.json 및 instalanding.ai/p/<slug>.txt에서 플랫 파일(flat files) 형태로 제공됩니다.
페이지들 (The pages)
