템플릿.

에이전트가 만든 아티팩트를 포크해서 배포하세요 — 프로토타입, 슬라이드, 이미지, 비디오 템플릿. 로컬 에이전트에서 자신의 키로 실행하면 됩니다. 프롬프트, 포스터, 예제 HTML은 모두 Apache-2.0 라이선스입니다.

프로토타입
@open-design Open Design
전체 프롬프트 보기 →

데이팅 웹

소비자 친화적인 데이트/매칭 대시보드. 왼쪽 레일 네비게이션, 커뮤니티 신호 티커바, 주요 KPI, 30일 상호 매칭 막대 차트, 매칭률 트렌드 블록 포함. 편집 타이포그래피와 절제된 강조색. 데이트 사이트, 매칭 서비스, 커뮤니티 대시보드, 소셜 네트워크 등 데이터가 핵심인 소비자 제품에 적합.

프로토타입
@open-design Open Design
전체 프롬프트 보기 →

디지털 가이드

2페이지 디지털 가이드 미리보기 — 1페이지는 표지(제목, 저자, '내용 구성' 통계, 목차 티저), 2페이지는 본문(인용구와 단계별 목록이 포함된 레슨 본문). 라이프스타일/크리에이터 브랜드 톤. '전자 가이드', '디지털 가이드', 'lookbook', '리드 마그넷', '크리에이터 가이드', 'playbook', 'PDF 가이드' 또는 '电子指南'가 필요한 경우 사용.

게임 스크린샷 - 애니메이션 격투 게임: 캡틴 류가 vs 카제 렌신 프리뷰 이미지
@open-design-contributors Open Design
전체 프롬프트 보기 →

게임 스크린샷 - 애니메이션 격투 게임: 캡틴 류가 vs 카제 렌신

Street Fighter 6 또는 Tekken 8 스타일의 격투 게임 비주얼 스크린샷. 밤의 중국 사원 안뜰에서 대결하는 두 애니메이션 스타일 남성 전사를 묘사하며, 완전한 격투 게임 HUD(듀얼 체력바, 라운드 타이머, P1/P2 캐릭터 패널, 콤보 카운터, 게이지)를 포함. gpt-image-2 최적화, 16:9 비율.

게임 스크린샷 - 삼국지 ARPG: 여포의 원문사극 프리뷰 이미지
@open-design-contributors Open Design
전체 프롬프트 보기 →

게임 스크린샷 - 삼국지 ARPG: 여포의 원문사극

여포의 원문사극 장면을 구현한 삼국지 액션 RPG 게임 스크린샷. Black Myth: Wukong 스타일의 포토리얼 영화적 그래픽과 Unreal Engine 5 기술을 사용한 3인칭 숄더뷰 시점. 완전한 게임 HUD(HP 및 기력 바, 미니맵, 스킬 단축키, 타겟 록온 및 거리 표시)가 포함된 차세대 ARPG 화면. gpt-image-2용 16:9 형식.

게임 UI - 고대 중국 오픈월드 MMO HUD 프리뷰 이미지
@open-design-contributors Open Design
전체 프롬프트 보기 →

게임 UI - 고대 중국 오픈월드 MMO HUD

Black Myth: Wukong 스타일의 시네마틱 포토리얼 그래픽으로 구현한 고대 중국 배경 AAA 오픈월드 MMO 게임 HUD 스크린샷 목업을 생성합니다. 캐릭터 초상화, HP/MP 바, 중국 서예 스타일 스킬 아이콘 핫바, 미니맵, 퀘스트 트래커, 채팅창, NPC 네임플레이트 등 완전한 MMO HUD 요소를 포함한 16:9 화면.

Hyperframes 프리뷰 비디오
@open-design Open Design
전체 프롬프트 보기 →

Hyperframes

HyperFrames HTML로 비디오 합성, 애니메이션, 타이틀 카드, 오버레이, 자막, 보이스오버, 오디오 반응형 비주얼, 장면 전환을 제작합니다. HTML 기반 비디오 콘텐츠 제작, 오디오 동기화 자막 추가, 텍스트 음성 변환 내레이션 생성, 음악 반응형 애니메이션(비트 동기화, 글로우, 펄스), 애니메이션 텍스트 강조(마커 스윕, 손그림 원, 버스트 라인, 낙서, 스케치아웃), 장면 전환 효과(크로스페이드, 와이프, 리빌, 셰이더 전환)를 지원합니다.

일러스트 - 크레용 어린이 그림 변환 프리뷰 이미지
@open-design-contributors Open Design
전체 프롬프트 보기 →

일러스트 - 크레용 어린이 그림 변환

모든 참조 이미지를 10세 어린이가 그린 크레용 일러스트로 변환합니다. 밝은 크레용 색상과 흰 종이에 성, 사탕, 별, 구름, 무지개 같은 동심 가득한 요소를 추가합니다. 웹 스크린샷, 브랜드 비주얼, 제품 사진, 인물 사진에 적합한 gpt-image-2 이미지 편집 기능입니다.

인포그래픽 - 오타쿠 댄스 안무 분석도(Gokuraku Jodo, 16패널) 프리뷰 이미지
@open-design-contributors Open Design
전체 프롬프트 보기 →

인포그래픽 - 오타쿠 댄스 안무 분석도(Gokuraku Jodo, 16패널)

2:3 세로형 포스터로, 4×4 그리드의 16개 정사각형 패널로 구성되어 일본 오타쿠 댄스곡 極楽浄土(Gokuraku Jodo)의 전체 안무 분석 차트를 제공합니다. 각 패널은 동일한 반사실풍 애니메 아이돌 소녀(분홍 트윈테일, 세일러 칼라 스쿨 아이돌 유니폼)의 시그니처 댄스 포즈를 표시하며, AI 영상 생성용 포즈 참고 시트로 설계되었습니다. gpt-image-2 최적화, 2:3 비율.

프로토타입
@open-design Open Design
전체 프롬프트 보기 →

라이브 대시보드

Notion 스타일 팀 대시보드를 Live Artifact로 렌더링. KPI, 7일 스파크라인, 실시간 활동 피드, 링크된 데이터베이스 작업 테이블이 포함된 단일 페이지 자체 포함 HTML 대시보드. Composio 커넥터 카탈로그를 통해 Notion에 연결. 요청 시 및 열 때 새로고침되며, 커넥터 미연결 시 모의 데이터로 작동.

프로토타입
@open-design Open Design
전체 프롬프트 보기 →

Motion Frames

루핑 CSS 애니메이션(회전 텍스트 링, 애니메이션 지구본, 타이머, 패럴랙스 라벨)이 포함된 단일 프레임 모션 디자인 컴포지션. HyperFrames 또는 키프레임 기반 익스포터로 바로 전달할 수 있는 히어로 비디오 포스터로 렌더링. 모션 디자인, 애니메이션 히어로, 루프, 비디오 포스터, 타이틀 카드 요구사항에 적합.

Open Design 홈페이지 프리뷰 프로토타입
@open-design Open Design
전체 프롬프트 보기 →

Open Design 홈페이지

A pixel-faithful mirror of the live open-design.ai homepage — an interactive WebGL/Three.js (React Three Fiber) hero built on Next.js. Features a real-time 3D "Open Design" wordmark (Draco-compressed geometry), a scattered sticker collage, custom variable fonts, cursor-reactive parallax, and scroll-driven motion. This is a first-party showcase of the visual ceiling Open Design targets for interactive marketing surfaces on the web — with all assets bundled locally (only the Draco decoder loads from a CDN, like the other WebGL examples), rendering in the sandboxed preview. Use as a reference for high-craft 3D landing pages, agent-native product sites, and motion-rich hero sections.

프로토타입
@open-design Open Design
전체 프롬프트 보기 →

Open Design 랜딩 페이지

Atelier Zero 비주얼 언어(Monocle / Apartamento / Études 에디토리얼 콜라주)로 단일 페이지 랜딩 사이트를 생성합니다. 브랜드 브리프에서 inputs.json을 채우고, gpt-image-2로 최대 16개의 콜라주 에셋을 생성하여 독립형 HTML 파일을 출력하며, 스크롤 애니메이션과 고정 내비게이션이 자동 구성됩니다.

프로토타입
@open-design Open Design
전체 프롬프트 보기 →

Orbit 종합 브리핑

두 개 이상의 커넥터를 연결하면 Orbit이 자동으로 호출되어 지난 24시간 동안 모든 인증된 커넥터(GitHub, Linear, Notion, Slack, 飞书, 캘린더, Gmail, 드라이브, Sentry, Vercel 등)의 활동을 가져와 "我的设计" 상단에 적응형 벤토 그리드 대시보드를 생성합니다. Orbit의 일일 다이제스트 스케줄러에 의해 자동 실행됩니다.

프로토타입
@open-design Open Design
전체 프롬프트 보기 →

Orbit Linear

Linear가 사용자의 유일한 연결된 커넥터이거나 사용자가 일일 다이제스트를 Linear로 명시적으로 범위 지정한 경우 Orbit 파이프라인에 의해 자동으로 트리거됩니다. 지난 24시간 동안의 이슈 이동, 상태 변경, 할당 및 사이클 진행 상황을 가져와 Linear 네이티브 받은편지함 시각 언어로 렌더링합니다.

프로토타입
@open-design Open Design
전체 프롬프트 보기 →

Orbit Notion

Open Orbit 브리핑 스킬 — Notion이 사용자의 유일한 연결된 커넥터이거나 사용자가 일일 다이제스트 범위를 Notion으로 명시적으로 지정한 경우 Orbit 파이프라인에서 선택됩니다. 사용자의 인증된 Notion 연결에서 지난 24시간 동안의 문서 편집, 댓글, 멘션 및 데이터베이스 행 변경 사항을 가져와 네이티브 Notion 페이지(콜아웃/토글/데이터베이스 테이블 요소)로 다이제스트를 렌더링합니다. 이 스킬은 수동으로 트리거해서는 안 됩니다 — Orbit의 일일 다이제스트 스케줄러가 라이브 Notion 데이터에 대해 호출합니다.

프로토타입
@open-design Open Design
전체 프롬프트 보기 →

소셜 캐러셀

1080×1080 정사각형으로 배치된 3장의 소셜 미디어 캐러셀 카드. 영화적이고 브랜드에 맞는 3개의 패널에 시리즈 전체를 연결하는 헤드라인('계속 앞으로.' → '다음으로.' → '앞을 바라보며.')을 제공합니다. 각 카드에는 브랜드 마크, 번호/전체 수, 캡션, '루프' 어포던스가 포함됩니다. '캐러셀 게시물', '소셜 캐러셀', 'Instagram 캐러셀', 'LinkedIn 시리즈', 'X 스레드 카드', '三连发' 요청 시 사용하세요.

템플릿
@open-design Open Design
전체 프롬프트 보기 →

소셜 미디어 매트릭스 트래커 템플릿

소셜 미디어 매트릭스 데이터 추적 패널 템플릿(Social Media Matrix Tracker). 멀티 플랫폼 지표, 인터랙티브 차트, 호버 인사이트, 범위 비교 및 다크/라이트 테마 전환을 지원하는 영화적이고 데이터 집약적인 소셜 미디어 분석 대시보드가 필요할 때 사용. 단일 HTML 파일로 구현 가능.

소셜 미디어 게시물 - 감각적인 걸 댄스 스토리보드 (8샷) 프리뷰 이미지
@open-design-contributors Open Design
전체 프롬프트 보기 →

소셜 미디어 게시물 - 감각적인 걸 댄스 스토리보드 (8샷)

일관된 댄스 시퀀스를 생성하는 8샷 완전 스토리보드 프롬프트 세트. gpt-image-2 모델에 최적화되어 글로벌 스타일 토큰, 공통 네거티브 프롬프트, 8개의 개별 샷 프롬프트(오프닝 포즈, 힙 그루브, 바디 웨이브, 비트 드롭 허리 트위스트, 사이드 힙 스웨이, 헤어 플릭, 파워 스탠스, 피니싱 포즈)를 포함합니다.

프로토타입
@open-design Open Design
전체 프롬프트 보기 →

Velar. — 럭셔리 부동산

시네마틱한 싱글 페이지 럭셔리 부동산 랜딩 페이지. 위로 사라지는 타자기 프리로더, 아래에서 솟아올라 확대되며 다크 스테이트먼트 섹션에 고정되는 스크롤 기반 건물 이미지, 숫자가 카운트업되는 스티키 다크 통계 바, 그리고 다크 섹션 위로 미끄러져 올라오는 호버 확장 비디오 갤러리.

비디오
@open-design-contributors Open Design
전체 프롬프트 보기 →

Video - Desk Hologram AR on Real Workspace (Seedance 2.0)

A two-phase Seedance 2.0 workflow for the viral desk-hologram format: first lock a photoreal keyframe on a real developer desk (Open Design UI on the monitor, a cobalt-blue extraterrestrial hunter standing on the keyboard), then animate that still into a ~15s 9:16 image-to-video clip. Tuned for believable AR passthrough — medium-strength VFX, real desk clutter, monitor glow spill on the character, and light physical interactions (open mug, keyboard step, bow draw). Inspired by the desk-hologram Seedance 2.0 trend; no copyrighted character names in the prompt.

비디오
@open-design-contributors Open Design
전체 프롬프트 보기 →

비디오 - 삼국지 ARPG - 여포 원문사극(Seedance 2.0)

약 10초 길이의 인게임 액션 시퀀스. 여포가 두 진영 사이 군영 중앙에서 붉은 칠 장궁을 당겨 금빛 기가 깃든 화살을 멀리 꽂힌 극을 향해 쏘아냅니다. Seedance 2.0 최적화로 정교한 카메라 제어, 활과 화살 물리 효과, 바람·먼지·깃발 움직임, 게임 스크린샷 색보정이 포함됩니다. 동일한 이미지 템플릿과 짝으로 제공됩니다.

비디오
@open-design Open Design
전체 프롬프트 보기 →

숏폼 영상

숏폼 영상 생성 스킬 — 3-10초 제품 공개, 모션 티저, 앰비언트 루프 클립. 기본적으로 Seedance 2를 사용하지만 Kling 3 / 4, Veo 3, Sora 2와도 동일하게 작동합니다. 출력은 프로젝트 폴더에 저장되는 하나의 MP4 파일입니다. 워크스페이스에 인터랙티브 비디오/하이퍼프레임 스킬이 함께 제공되는 경우, 하나의 긴 클립보다 여러 짧은 샷을 단일 타임라인으로 구성하는 것을 권장합니다.

프로토타입
@open-design Open Design
전체 프롬프트 보기 →

주석 와이어프레임

데스크톱 랜딩 페이지의 주석/레드라인 로우파이 와이어프레임. 브라우저 프레임 안의 그레이박스 블록, 번호가 매겨진 주석 핀(①–⑤), 각 핀을 짧은 엔지니어링/UX 노트에 매핑하는 우측 스펙 패널을 포함. '주석 와이어프레임', '레드라인', '와이어프레임 스펙', '로우파이 랜딩', '로우파이' 등의 요구사항에 적합.

프로토타입
@open-design Open Design
전체 프롬프트 보기 →

그레이박스 와이어프레임

데스크톱 SaaS 대시보드의 선명한 그레이박스/청사진 로우파이 와이어프레임. 중성 회색 블록, 대각선 십자 X 이미지 플레이스홀더, lorem 바 텍스트, 도식적 차트 패널, 12열 그리드의 등폭 레드라인 주석. '그레이박스', '청사진 와이어프레임', '로우파이 대시보드', '저충실도' 등의 요구사항에 적합.

프로토타입
@open-design Open Design
전체 프롬프트 보기 →

모바일 플로우 와이어프레임

로우파이 모바일 앱 플로우 와이어프레임. 3~4개의 폰 화면을 가로로 한 줄로 배치하고(온보딩 → 홈 피드 → 상세 → 확인), 각 기기 안은 그레이박스 플레이스홀더, 화면 사이는 번호가 매겨진 단계 레이블의 점선 화살표로 연결하며 포스트잇 주석을 더한다. '모바일 와이어프레임', '앱 플로우', '사용자 흐름', '로우파이 모바일' 등의 요구사항에 적합.

자주 묻는 질문

Open Design 템플릿이란 무엇인가요?

Open Design — open source Claude Design 대체 솔루션과 함께 제공되는 번들 플러그인 템플릿입니다. 각각은 실행 가능한 아티팩트입니다: 프로토타입, 슬라이드 덱, 이미지 생성기, 비디오 컴포지션 또는 HyperFrames 모션 작품. 로컬 에이전트가 플러그인을 프롬프트 및 선택적 예제 HTML에 대해 실행하면, 자신의 머신에서 공유할 준비가 된 에셋을 생성합니다.

템플릿은 어떤 라이선스를 사용하나요?

전부 Apache-2.0입니다. 프롬프트를 포크하고, example.html을 수정하고, 브랜드 토큰을 변경해도 괜찮습니다 — 재배포할 때 LICENSE 공지를 유지하면 됩니다.

자신의 API 키로 실행할 수 있나요?

네, 가능합니다. Open Design은 모든 계층에서 BYOK를 지원합니다 — Claude / OpenAI / 로컬 모델 인증 정보가 머신을 떠나지 않습니다. 마케팅 사이트는 추론을 프록시하지 않고, 카탈로그 행에서 보는 라이브 미리보기는 호스팅된 런타임이 아니라 템플릿과 함께 제공되는 포스터 및 Cloudflare Stream URL에서 나옵니다.

템플릿을 기여하려면 어떻게 하나요?

nexu-io/open-design/plugins/_official에 PR을 열고 open-design.json, SKILL.md, 실행 가능한 example.html을 포함한 새 폴더를 추가하면 됩니다. 리포지토리의 CONTRIBUTING.md에 있는 기여자 가이드에서 매니페스트 필드를 안내합니다. 승인된 기여는 공개 카탈로그에 등록되고 다음 배포에서 자동으로 여기에 표시됩니다.

Claude Design Studio와 다른 점이 뭐죠?

Claude Design Studio는 Anthropic의 호스팅 제품입니다. Open Design은 open source Claude Design 대체 솔루션입니다 — 이 카탈로그의 모든 템플릿, 프롬프트, 디자인 시스템은 공개 리포지토리에 있고, 선택한 키에 대해 로컬에서 실행되며, 누구나 작성할 수 있는 플러그인을 통해 확장할 수 있습니다. 동일한 아티팩트 분류(프로토타입, 슬라이드, 이미지, 비디오)를 반영하므로 멘탈 모델이 유지되지만, 에이전트 런타임까지 모든 것이 머신에 머물러 있습니다.

미리보기는 어디서 나오나요?

각 템플릿의 매니페스트에는 포스터 URL(Cloudflare CDN)과 비디오 템플릿의 경우 Cloudflare Stream MP4가 포함됩니다. 그리드는 포스터를 정적 썸네일로 렌더링하고 호버 시 루핑 비디오로 바뀝니다. 이미지 및 프로토타입 템플릿은 포스터를 직접 표시하고, 클릭하면 상세 페이지에서 실행 가능한 example.html을 엽니다.