OD / 2026 · 제 01 권 / 제 26 호 분류 디자인 · 인텔리전스 Apache-2.0 · 지구에서 제작 라이브 · v0.8.0
KO
Open Design
다운로드Star · 53.4K
템플릿 · Prototype

59 Prototype.

Interactive product mockups — dashboards, apps, landing pages, internal tools. Anything you’d hand a stakeholder and click through.

산출물 종류
장면
  1. 001 블로그 게시물 긴 형식의 기사/블로그 게시물 — 마스트헤드, 히어로 이미지 플레이스홀더, 그림 및 인용구가 포함된 본문, 작성자 서명, 관련 게시물로 구성됩니다. '블로그', '기사', '게시물', '에세이', '사례 연구' 요청 시 사용하세요. 프로토타입 마케팅
  2. 002 임상 사례 보고서 회진, 컨퍼런스, 의료 기록을 위한 구조화된 의료 사례 프레젠테이션 생성. 생리학적으로 정확한 활력징후, 검사 결과, 근거 기반 치료 계획을 포함한 SOAP 형식 또는 서술형 사례 보고서를 제공합니다. 프로토타입 의료
  3. 003 Codex 인터랙티브 기능 맵 긴 글, 스레드, 메모 또는 제품 설명을 워크플로 루프, 사용 사례 매트릭스, 반응형 상세 패널이 포함된 Codex 스타일의 클릭 가능한 기능 맵으로 변환합니다. 프로토타입 지식
  4. 004 디자인 평가 프로젝트 내 모든 HTML 산출물에 대해 5차원 전문 디자인 리뷰 실행 — 철학/시각적 계층/디테일/기능성/혁신성을 각각 0-10점으로 평가. 레이더 차트, 근거 기반 점수, 세 가지 목록(유지/수정/빠른 개선)이 포함된 독립형 HTML 보고서를 출력합니다. 프로토타입 디자인
  5. 005 대시보드 단일 HTML 파일 관리/분석 대시보드. 고정 좌측 사이드바, 사용자/검색 기능이 있는 상단바, KPI 카드 그리드 및 차트로 구성. '대시보드', '관리자', '분석' 또는 '제어판' 화면이 필요할 때 사용. 프로토타입 운영
  6. 006 데이터 시각화 보고서 CSV, Excel 또는 JSON 데이터를 세련된 시각적 보고서 페이지로 변환합니다. 프로토타입 금융
  7. 007 데이팅 웹 소비자 친화적인 데이트/매칭 대시보드. 왼쪽 레일 네비게이션, 커뮤니티 신호 티커바, 주요 KPI, 30일 상호 매칭 막대 차트, 매칭률 트렌드 블록 포함. 편집 타이포그래피와 절제된 강조색. 데이트 사이트, 매칭 서비스, 커뮤니티 대시보드, 소셜 네트워크 등 데이터가 핵심인 소비자 제품에 적합. 프로토타입 개인
  8. 008 DCF 밸류에이션 상장 기업의 현금흐름할인 평가 및 내재가치 분석. DCF, 공정가치, 내재가치, 목표주가, 저평가 또는 고평가 분석 등에 사용. 프로토타입 디자인
  9. 009 기기 3D 쇼케이스 실제 HTML을 화면에 임베드하고 유리 렌즈 굴절 및 360도 턴테이블 구성을 제공하는 정적 iPhone 및 MacBook 3D 스타일 쇼케이스입니다. 프로토타입 제품
  10. 010 디지털 가이드 2페이지 디지털 가이드 미리보기 — 1페이지는 표지(제목, 저자, '내용 구성' 통계, 목차 티저), 2페이지는 본문(인용구와 단계별 목록이 포함된 레슨 본문). 라이프스타일/크리에이터 브랜드 톤. '전자 가이드', '디지털 가이드', 'lookbook', '리드 마그넷', '크리에이터 가이드', 'playbook', 'PDF 가이드' 또는 '电子指南'가 필요한 경우 사용. 프로토타입 마케팅
  11. 011 문서 페이지 문서 페이지 — 사이드 탐색, 스크롤 가능한 본문, 목차로 구성됩니다. '문서', '가이드', 'API 참조' 또는 '튜토리얼'이 언급될 때 사용하세요. 프로토타입 엔지니어링
  12. 012 이메일 마케팅 브랜드 제품 출시 이메일 템플릿. 마스트헤드, 히어로 이미지, 기울임체 강조 헤드라인, 본문, CTA 버튼, 사양 그리드를 포함한 HTML 중앙 정렬 단일 컬럼 레이아웃. 프로토타입 마케팅
  13. 013 엔지니어링 런북 엔지니어링 런북 — 서비스 개요, 알림 테이블, 대시보드 링크, 복사 가능한 명령어가 포함된 운영 절차, 온콜 로테이션, 인시던트 대응 체크리스트를 제공합니다. 런북, 운영 문서, 온콜 가이드, SRE 문서가 필요한 경우 사용하세요. 프로토타입 엔지니어링
  14. 014 재무 보고서 분기/월간 재무 보고서 — KPI가 포함된 헤더, 수익 및 소진 차트, P&L 요약 테이블, 주요 하이라이트 및 전망 단락 포함. '재무 보고서', 'Q3 보고서', 'MRR 검토', 'P&L', '재보' 등의 요구사항에 사용하세요. 프로토타입 금융
  15. 015 Flowai 라이브 대시보드 템플릿 FlowAI 스타일의 팀 관리 대시보드. 3개 탭(팀 멤버, 팀 상세정보, 활동 로그), KPI 통계 행, 멤버 테이블, 역할 분포 막대 차트, 온라인 현황 및 활동 스파크라인, 상위 기여자 패널 포함. 라이트/다크 테마, 차트 툴팁, 클릭 확대, CSV 내보내기 지원. 프로토타입 운영
  16. 016 게임화 앱 3개 화면으로 구성된 게임화 모바일 앱 프로토타입: 커버 화면, XP 리본과 레벨 바가 있는 오늘의 퀘스트, 퀘스트 상세 화면. 게임화 앱, 습관 트래커, RPG 스타일 라이프 앱, 레벨업 앱, 일일 퀘스트, XP/연속 기록 앱에 적합합니다. 프로토타입 개인
  17. 017 GitHub 대시보드 GitHub 저장소 분석 대시보드 — 스타, 포크, 기여자, 이슈, 풀 리퀘스트, 최근 활동 및 주요 기여자. GitHub 저장소 대시보드, 오픈소스 성장 보고서, 저장소 상태 페이지 또는 GitHub 분석 뷰에 사용. 프로토타입 운영
  18. 018 HR 온보딩 단일 페이지 신입 사원 온보딩 계획 — 첫 주 일정, 버디 + 매니저 소개, 학습 트랙, 장비 체크리스트 및 '준비 완료 조건'. 브리프에 '온보딩', '신입 사원', '첫 주 계획' 또는 '入职'가 언급될 때 사용. 프로토타입 인사
  19. 019 Html Ppt Taste Brutalist 16:9 HTML 덱, 전술 원격측정 / CRT 터미널 스타일. 비활성 CRT 차콜 슬라이드, 백색 인광 모노스페이스, 위험 빨강 강조, 스캔라인 오버레이, ASCII 구문, 장식보다 밀도 우선. Leonxlnx/taste-skill `brutalist-skill`(전술 원격측정 모드)에서 추출. 프로토타입 디자인
  20. 020 Html Ppt Taste Editorial 16:9 HTML 프레젠테이션, 에디토리얼 미니멀리스트 스타일. 따뜻한 크림색 슬라이드, 세리프 제목 + 그로테스크 본문, 헤어라인 규칙, 모노스페이스 메타정보, 넉넉한 여백, 단일 강조색. Leonxlnx/taste-skill `minimalist-skill`에서 추출. 프로토타입 디자인
  21. 021 인보이스 인쇄 가능한 인보이스 페이지 — 발신자 및 수신자 블록, 항목 테이블, 세금 명세, 합계 및 결제 안내 포함. 'invoice', 'bill', 'billing statement', '发票' 등의 키워드가 포함된 경우 사용하세요. 프로토타입 금융
  22. 022 Kami Landing 인쇄급 단일 페이지 종이 문서 생성 — 따뜻한 양피지 캔버스, 잉크 블루 강조색, 단일 두께 세리프체, 이탤릭 없음, 쿨 그레이 없음. 앱 UI가 아닌 전문 백서나 스튜디오 원페이저처럼 출력됩니다. 다국어 지원 설계(EN · zh-CN · ja). 독립형 HTML 파일 하나, 의존성 없음. 프로토타입 마케팅
  23. 023 Kami 양피지 문서 따뜻한 양피지 캔버스 (#f5f4ed), 단색 잉크 블루 액센트 (#1B365D), 하나의 세리프 패밀리, 편집급 타이포그래피. 프로토타입 개인
  24. 024 칸반 보드 칸반/작업 보드. 여러 열(할 일/진행 중/검토 중/완료), 드래그 가능한 카드, 담당자 아바타, 스윔레인, 상단 필터 바를 포함합니다. 요구사항에 'kanban', 'task board', 'sprint board', 'trello', '看板'이 언급될 때 사용하세요. 프로토타입 운영
  25. 025 최근 30일 최근 30일간의 커뮤니티 및 소셜 트렌드 조사. 현재 여론, 최근 감정, 커뮤니티 반응, 소셜 증명, 출시 반응, 트렌드 스캔 또는 최근 30일 맥락에 대한 질문에 사용합니다. 프로토타입 디자인
  26. 026 매거진 기사 Huashu / huashu-md-html 스타일의 매거진 기사 레이아웃으로 Markdown 또는 노트를 세련된 장문의 HTML 에세이로 변환합니다. 프로토타입 마케팅
  27. 027 매거진 포스터 신문지 스타일의 편집 포스터입니다. 뉴스프린트 용지, 날짜선, 취소선과 이탤릭이 포함된 대형 세리프 헤드라인, 2단 본문, 인용구 주석이 있는 6개의 번호 섹션으로 구성됩니다. 매거진 포스터, 에디토리얼 포스터, 신문지 레이아웃, 선언문 디자인에 적합합니다. 프로토타입 마케팅
  28. 028 마케팅 포스터 강한 시각적 임팩트를 주는 세로형 포스터 또는 스토리 스타일 공유 이미지입니다. 프로토타입 마케팅
  29. 029 회의록 회의록 페이지 — 참석자가 표시된 제목 표시줄, 안건 체크리스트, 결정 사항 블록, 담당자 및 날짜가 포함된 실행 항목 테이블, '다음 회의' 바닥글 제공. '회의록', 'minutes', '1:1 노트', '전사 회의 요약', '会议纪要' 등의 요구사항에 사용. 프로토타입 운영
  30. 030 모바일 앱 페이지 내에서 픽셀 단위로 정확한 iPhone 15 Pro 프레임 안에 렌더링되는 모바일 앱 화면입니다. assets/template.html을 복사하고 references/layouts.md에서 화면 원형 하나를 붙여넣어 제작합니다. 브리프에서 '모바일 앱', 'iOS 앱', 'Android 앱', '휴대폰 화면' 또는 '앱 UI'를 요청할 때 사용하세요. 프로토타입 디자인
  31. 031 모바일 온보딩 세 개의 휴대폰 프레임을 나란히 배치한 멀티스크린 모바일 온보딩 플로우 — 스플래시, 가치 제안, 로그인. 상태 표시줄, 스와이프 점, 주요 CTA 포함. '모바일 온보딩', 'iOS 온보딩', '휴대폰 가입', '移动端引导' 관련 요구사항에 사용. 프로토타입 디자인
  32. 032 모던 이력서 모던 미니멀 이력서, A4 단일 페이지, 인쇄 또는 PDF 내보내기 가능. 프로토타입 개인
  33. 033 Motion Frames 루핑 CSS 애니메이션(회전 텍스트 링, 애니메이션 지구본, 타이머, 패럴랙스 라벨)이 포함된 단일 프레임 모션 디자인 컴포지션. HyperFrames 또는 키프레임 기반 익스포터로 바로 전달할 수 있는 히어로 비디오 포스터로 렌더링. 모션 디자인, 애니메이션 히어로, 루프, 비디오 포스터, 타이틀 카드 요구사항에 적합. 프로토타입 마케팅
  34. 034 Open Design 랜딩 페이지 Atelier Zero 비주얼 언어(Monocle / Apartamento / Études 에디토리얼 콜라주)로 단일 페이지 랜딩 사이트를 생성합니다. 브랜드 브리프에서 inputs.json을 채우고, gpt-image-2로 최대 16개의 콜라주 에셋을 생성하여 독립형 HTML 파일을 출력하며, 스크롤 애니메이션과 고정 내비게이션이 자동 구성됩니다. 프로토타입 마케팅
  35. 035 Orbit 종합 브리핑 두 개 이상의 커넥터를 연결하면 Orbit이 자동으로 호출되어 지난 24시간 동안 모든 인증된 커넥터(GitHub, Linear, Notion, Slack, 飞书, 캘린더, Gmail, 드라이브, Sentry, Vercel 등)의 활동을 가져와 "我的设计" 상단에 적응형 벤토 그리드 대시보드를 생성합니다. Orbit의 일일 다이제스트 스케줄러에 의해 자동 실행됩니다. 프로토타입 오빗
  36. 036 Orbit Github GitHub 커넥터를 기반으로 일일 요약을 자동 생성하는 Orbit 스킬입니다. 지난 24시간의 PR, 리뷰 요청, 이슈, CI 실행, 병합 내역을 가져와 GitHub 네이티브 알림 스타일로 표시합니다. Orbit 일일 요약 스케줄러에 의해 자동 호출됩니다. 프로토타입 오빗
  37. 037 Orbit Gmail Gmail이 유일한 연결 서비스이거나 사용자가 명시적으로 지정한 경우, 지난 24시간의 받은편지함 활동을 추출하여 일일 요약을 생성합니다. Orbit 스케줄러에 의해 자동 실행되며 수동 실행은 불필요합니다. 프로토타입 오빗
  38. 038 Orbit Linear Linear가 사용자의 유일한 연결된 커넥터이거나 사용자가 일일 다이제스트를 Linear로 명시적으로 범위 지정한 경우 Orbit 파이프라인에 의해 자동으로 트리거됩니다. 지난 24시간 동안의 이슈 이동, 상태 변경, 할당 및 사이클 진행 상황을 가져와 Linear 네이티브 받은편지함 시각 언어로 렌더링합니다. 프로토타입 오빗
  39. 039 Orbit Notion Open Orbit 브리핑 스킬 — Notion이 사용자의 유일한 연결된 커넥터이거나 사용자가 일일 다이제스트 범위를 Notion으로 명시적으로 지정한 경우 Orbit 파이프라인에서 선택됩니다. 사용자의 인증된 Notion 연결에서 지난 24시간 동안의 문서 편집, 댓글, 멘션 및 데이터베이스 행 변경 사항을 가져와 네이티브 Notion 페이지(콜아웃/토글/데이터베이스 테이블 요소)로 다이제스트를 렌더링합니다. 이 스킬은 수동으로 트리거해서는 안 됩니다 — Orbit의 일일 다이제스트 스케줄러가 라이브 Notion 데이터에 대해 호출합니다. 프로토타입 오빗
  40. 040 제품 명세서 단일 페이지 제품 명세서/PRD — 문제 정의, 성공 지표, 범위, 사용자 스토리, 디자인 노트, 출시 계획, 미해결 질문 포함. 제품 명세 또는 기능 문서 작성 시 사용. 프로토타입 제품
  41. 041 가격 페이지 독립형 가격 페이지 — 헤더, 플랜 등급, 기능 비교표 및 FAQ 포함. '가격', '플랜', '구독 등급' 또는 '플랜 비교' 페이지가 필要할 때 사용하세요. 프로토타입 세일즈
  42. 042 Reddit 게시물 카드 투표 레일과 댓글 수가 포함된 실감나는 Reddit 게시물 카드입니다. 비디오 오버레이나 스토리 공유에 적합합니다. 프로토타입 마케팅
  43. 043 SaaS 랜딩 히어로, 기능, 사회적 증명, 가격, CTA가 포함된 단일 페이지 SaaS 랜딩 페이지입니다. 활성화된 DESIGN.md의 색상/타이포그래피/레이아웃 토큰을 준수합니다. 트리거 키워드: "saas landing", "marketing page", "product landing". 프로토타입 마케팅
  44. 044 소셜 캐러셀 1080×1080 정사각형으로 배치된 3장의 소셜 미디어 캐러셀 카드. 영화적이고 브랜드에 맞는 3개의 패널에 시리즈 전체를 연결하는 헤드라인('계속 앞으로.' → '다음으로.' → '앞을 바라보며.')을 제공합니다. 각 카드에는 브랜드 마크, 번호/전체 수, 캡션, '루프' 어포던스가 포함됩니다. '캐러셀 게시물', '소셜 캐러셀', 'Instagram 캐러셀', 'LinkedIn 시리즈', 'X 스레드 카드', '三连发' 요청 시 사용하세요. 프로토타입 마케팅
  45. 045 소셜 미디어 대시보드 크리에이터용 소셜 미디어 분석 대시보드, 단일 HTML 파일. 플랫폼 전환기(X / LinkedIn / YouTube / Instagram), KPI 카드(팔로워, 참여율, 좋아요, 리포스트), 팔로워 증가 차트, 이번 주 인기 게시물 미리보기, 트렌딩 토픽/인기 댓글 사이드 패널 포함. 프로토타입 크리에이터
  46. 046 Spotify 재생 중 카드 앨범 아트, 진행 표시줄, 재생 컨트롤이 포함된 Spotify 재생 중 스타일 카드로, 영상 오버레이나 개인 홈페이지에 적합합니다. 프로토타입 개인
  47. 047 스프라이트 애니메이션 픽셀 아트 스타일의 애니메이션 설명 슬라이드. 크림색 배경, 굵은 연도 표시, 픽셀 아트 마스코트(화투 카드, 버섯, 8비트 콘솔 등), 동적 일본어 타이포그래피와 타임라인 리본을 포함합니다. CSS 애니메이션만 사용하며 세로 동영상으로 녹화 가능합니다. 프로토타입 마케팅
  48. 048 팀 OKR OKR 추적 페이지 — 분기 배너, 진행 표시줄로 표시되는 주요 결과가 포함된 3개 목표, 담당자 아바타, 상태 필, '이번 분기 한눈에 보기' 사이드바. OKR, 주요 결과, 목표 또는 '目标'가 언급될 때 사용하세요. 프로토타입 제품
  49. 049 실시간 조정 HTML 요소에 라이브 컨트롤 패널을 추가하여 강조색, 타입 스케일, 밀도, 모션, 테마를 실시간으로 조정하고 CSS 사용자 속성을 즉시 변경하며 localStorage에 저장합니다. 프로토타입 디자인
  50. 050 Twitter 공유 카드 게시물과 함께 사용하도록 디자인된 Twitter 인용 또는 데이터 카드입니다. 프로토타입 마케팅
  51. 051 대기자 명단 페이지 이메일 수집, 브랜드 로고, 선택적 장식 레이어가 포함된 미니멀한 사전 출시 랜딩 페이지. DESIGN.md에서 색상, 타이포그래피, 레이아웃 규칙을 읽어옵니다. 제품 출시, 베타 가입, 얼리 액세스 프로그램, 인디 프로젝트에 적합합니다. 프로토타입 마케팅
  52. 052 웹 프로토타입 범용 데스크톱 웹 프로토타입. `assets/template.html`을 복사하고 `references/layouts.md`의 레이아웃을 붙여넣어 단일 독립형 HTML 파일 생성. 랜딩/마케팅/문서/SaaS 페이지의 기본 옵션. 프로토타입 디자인
  53. 053 Web Prototype Taste Brutalist 스위스 산업 인쇄 스타일 웹 프로토타입. 신문지 캔버스, 모놀리식 블랙 그로테스크 서체, 뷰포트 넘침 숫자, 헤어라인 그리드 구분선, 위험 빨강 강조, ASCII 구문 장식. Leonxlnx/taste-skill `brutalist-skill`(스위스 산업 인쇄 모드)에서 추출. 프로토타입 디자인
  54. 054 Web Prototype Taste 에디토리얼 에디토리얼 미니멀리스트 웹 프로토타입. 따뜻한 단색 캔버스, 세리프 헤딩 + 그로테스크 본문, 1px 헤어라인 테두리, 뮤티드 파스텔 칩, 넉넉한 여백, 은은한 마이크로 모션. 프로토타입 디자인
  55. 055 Web Prototype Taste Soft Apple 급 소프트 웹 프로토타입. 실버/크림 캔버스, 이중 베젤 카드, 중첩 버튼 CTA, 넉넉한 스쿼클 반경, 스프링 모션, 앰비언트 메시. Leonxlnx/taste-skill의 soft-skill 및 섹션 4-8 기반. 프로토타입 디자인
  56. 056 와이어프레임 스케치 손그림 스타일의 와이어프레임. 모눈종이 배경, 마커/연필 톤, 여러 탭 레이블, 포스트잇 주석, 차트 플레이스홀더, 해칭 채우기 포함. '와이어프레임', '스케치', '손그림', '로우파이', '화이트보드' 등의 요구사항에 적합. 프로토타입 디자인
  57. 057 X / Twitter 게시물 카드 좋아요, 리포스트, 조회수 등의 참여 지표를 포함한 사실적인 X 게시물 카드. 비디오 오버레이나 공유 가능한 이미지 카드에 적합합니다. 프로토타입 마케팅
  58. 058 X 리서치 시장, 기업, 제품 또는 커뮤니티 담론에 대한 X/Twitter 대중 정서 조사. X나 Twitter 여론, 암호화폐 커뮤니티 정서, 전문가 게시물, 주식·섹터·기업·제품·시장 이벤트에 대한 소셜 반응을 파악할 때 사용합니다. 프로토타입 디자인
  59. 059 Xiaohongshu 카드 Xiaohongshu 스타일의 지식 카드를 스와이프 가능한 멀티 카드 캐러셀로 표시합니다. 프로토타입 마케팅