How to make skeleton UI and ghost wireframes

Generate skeleton UI and ghost wireframes for landings and loading states. Pick a layout, choose Single or Combo, tune colour roles, export PNG/SVG/HTML, or use the portable skill in any AI coding tool.

Two tools, one skeleton UI workflow.

The Ghost Wireframe Generator is a free browser tool for skeleton UI and ghost wireframes. Pick a layout family (dashboard, analytics, kanban, CRM table, settings), choose Single or Combo (desktop + mobile), tune Happy Hues–style colour roles, then export PNG, SVG, or HTML with --ghost-* CSS variables. Everything stays in your browser — nothing is uploaded.

The Ghost Wireframe Skill is the portable companion: copy a compact prompt or download SKILL.md for Cursor, Claude, Codex, ChatGPT, and other AI coding tools. Use the skill to draft ghosts in chat, then open the generator when you want a live preview and file export.

Pick a layout, then Single or Combo.

Open tinydesignshop.com/tools/ghost-wireframe-generator. In the library, click a layout card. Use Theme for Light or Dark, and View for Single or Combo.

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 shows one device at a time; scroll the library to switch between desktop and mobile cards. Combo shows desktop and mobile side by side from one layout card, with a shared preview height and Download both for PNGs.

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.

Tune colour roles and export.

Pick a palette preset or edit individual roles (background, surface, accent, muted text, and friends). Optional generic device frames help screenshots read as product chrome without Apple-branded bezels.

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

Export paths: Download PNG (or Download both in Combo), Download SVG / Copy SVG, and Copy HTML for Tiny Page Drops and loading skeletons. No attribution required on exports.

Use as a skill in any AI coding tool.

From the generator, the full-width black Get skill CTA opens the companion page. Or go straight to Ghost Wireframe Skill.

  1. Open the skill page and copy the compact prompt, or download SKILL.md
  2. Drop the skill into your agent skills folder (Cursor, Claude, Codex, etc.), or paste the compact prompt into any chat
  3. Ask for a ghost wireframe layout — desktop, mobile, or combo — with --ghost-* roles
  4. Optional: open the browser generator to preview and export 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.

Browser-local generator, local skill.

The generator runs entirely in your browser — layouts, palettes, and exports never leave your device. The skill is a markdown file you run in your own AI tool session. Tiny Design Shop does not upload your wireframes.

Frequently asked questions

What does Ghost Wireframe Generator do?

Generate skeleton UI and ghost wireframes for landings and loading states. Pick a layout, tune colour roles, export PNG, SVG, or HTML. Runs in your browser — nothing is uploaded to Tiny Design Shop servers.

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.

Skeleton UI vs spinners for lists and tables

When loading skeletons beat spinners on dense screens — and how to export one.

Free ghost wireframe in the browser vs Figma Ghost

Honest wedges vs Figma Ghost and UI Generator — browser export and a portable skill.