스켈레톤 UI와 고스트 와이어프레임을 만드는 방법

착륙 및 로딩 상태에 대한 뼈대 UI 및 고스트 와이어프레임을 생성합니다. 레이아웃을 선택하고, Single 또는 Combo를 선택하고, 색상 역할을 조정하고, PNG/SVG/HTML를 내보내거나 AI 코딩 도구에서 이식 가능한 기술을 사용하세요.

두 개의 도구, 하나의 뼈대 UI 워크플로.

Ghost Wireframe Generator는 스켈레톤 UI 및 고스트 와이어프레임을 위한 무료 브라우저 도구입니다. 레이아웃 패밀리(대시보드, 분석, 칸반, CRM 테이블, 설정)를 선택하고, Single 또는 Combo(데스크톱 + 모바일)를 선택하고, Happy Hues 스타일 색상 역할을 조정한 다음, --ghost-* CSS 변수를 사용하여 PNG, SVG 또는 HTML를 내보냅니다. 모든 것이 브라우저에 그대로 유지되며 아무것도 업로드되지 않습니다.

Ghost Wireframe Skill는 휴대용 동반자입니다. 컴팩트 프롬프트를 복사하거나 Cursor, Claude, Codex, ChatGPT 및 기타 AI 코딩 도구용 SKILL.md를 다운로드하세요. 이 기술을 사용하여 채팅에서 유령 초안을 작성한 다음 실시간 미리보기 및 파일 내보내기를 원할 때 생성기를 엽니다.

레이아웃을 선택한 다음 Single 또는 Combo를 선택하세요.

tinydesignshop.com/tools/ghost-wireframe-generator를 엽니다. 라이브러리에서 레이아웃 카드를 클릭합니다. Light 또는 Dark에는 Theme를 사용하고, Single 또는 Combo에는 View를 사용하세요.

Ghost Wireframe Generator in Single view with a desktop dashboard ghost preview
Single view — scroll the library for desktop and mobile cards of each layout family.

Single는 한 번에 하나의 장치를 표시합니다. 라이브러리를 스크롤하여 데스크톱과 모바일 카드 간에 전환하세요. Combo는 공유 미리보기 높이와 PNG용 Download both를 사용하여 하나의 레이아웃 카드에서 데스크탑과 모바일을 나란히 표시합니다.

Ghost Wireframe Generator Combo view with desktop and mobile ghosts side by side
Combo view — desktop and mobile ghosts side by side for the same layout family.

색상 역할을 조정하고 내보냅니다.

팔레트 사전 설정을 선택하거나 개별 역할(배경, 표면, 악센트, 음소거된 텍스트 및 친구)을 편집하세요. 선택적 일반 장치 프레임을 사용하면 Apple 브랜드 베젤 없이 스크린샷을 제품 크롬으로 읽을 수 있습니다.

Ghost Wireframe Generator palette roles and export buttons
Palette roles update the live preview; Copy HTML includes --ghost-* variables for templates and loading states.

내보내기 경로: Tiny Page Drops 및 스켈레톤 로드의 경우 Download PNG(또는 Combo의 Download both), Download SVG / Copy SVGCopy HTML. 수출에는 저작자가 필요하지 않습니다.

모든 AI 코딩 도구에서 스킬로 사용하세요.

생성기에서 전체 너비의 검은색 Get skill CTA가 동반 페이지를 엽니다. 아니면 Ghost Wireframe Skill로 바로 이동하세요.

  1. 스킬 페이지를 열고 압축 프롬프트를 복사하거나 SKILL.md를 다운로드하세요.
  2. 스킬을 상담원 스킬 폴더(Cursor, Claude, Codex 등)에 넣거나 채팅에 압축 프롬프트를 붙여넣으세요.
  3. --ghost-* 역할을 사용하여 데스크톱, 모바일 또는 콤보 등 고스트 와이어프레임 레이아웃을 요청하세요.
  4. 선택 사항: 브라우저 생성기를 열어 PNG/SVG/HTML를 미리 보고 내보냅니다.
Ghost Wireframe Skill page with copy and download actions
Companion skill page — copy the compact prompt or download SKILL.md for any model.

브라우저-로컬 생성기, 로컬 기술.

생성기는 전적으로 브라우저에서 실행됩니다. 레이아웃, 팔레트 및 내보내기는 장치를 떠나지 않습니다. 스킬은 자체 AI 도구 세션에서 실행하는 마크다운 파일입니다. Tiny Design Shop는 와이어프레임을 업로드하지 않습니다.

자주 묻는 질문

Ghost Wireframe Generator은(는) 무엇을 하나요?

Generate skeleton UI and ghost wireframes for landings and loading states. Pick a layout, tune colour roles, export PNG, SVG, or HTML. 브라우저에서 실행 — Tiny Design Shop 서버에 업로드되지 않습니다.

How do I make skeleton UI or ghost wireframes for free?

Ghost Wireframe Generator is a free browser tool for skeleton UI and ghost wireframes. Pick a desktop or mobile layout, tune Happy Hues–style colour roles, and export PNG, SVG, or HTML with --ghost-* CSS variables — nothing is uploaded. Pair it with the Ghost Wireframe Skill for the same contract in any AI coding tool.