วิธีสร้าง Skeleton UI และ Ghost Wireframes

สร้างโครงกระดูก UI และโครงร่างลวดผีสำหรับการลงจอดและสถานะการโหลด เลือกเค้าโครง เลือก Single หรือ Combo ปรับแต่งบทบาทสี ส่งออก PNG/SVG/HTML หรือใช้ทักษะพกพาในเครื่องมือเข้ารหัส AI

สองเครื่องมือ หนึ่งเวิร์กโฟลว์ UI โครงกระดูก

Ghost Wireframe Generator เป็นเครื่องมือเบราว์เซอร์ฟรีสำหรับ Skeleton UI และ Ghost Wireframes เลือกกลุ่มเค้าโครง (แดชบอร์ด การวิเคราะห์ คัมบัง ตาราง CRM การตั้งค่า) เลือก Single หรือ Combo (เดสก์ท็อป + มือถือ) ปรับแต่งบทบาทสีสไตล์ Happy Hues จากนั้นส่งออก PNG, SVG หรือ HTML ด้วยตัวแปร --ghost-* CSS ทุกอย่างจะยังคงอยู่ในเบราว์เซอร์ของคุณ — ไม่มีการอัปโหลดอะไรเลย

Ghost Wireframe Skill เป็นอุปกรณ์พกพา: คัดลอกพรอมต์ขนาดกะทัดรัดหรือดาวน์โหลด SKILL.md สำหรับ Cursor, Claude, Codex, ChatGPT และเครื่องมือเข้ารหัส AI อื่นๆ ใช้ทักษะในการร่างผีในแชท จากนั้นเปิดโปรแกรมสร้างเมื่อคุณต้องการดูตัวอย่างสดและส่งออกไฟล์

เลือกเค้าโครง จากนั้นเลือก Single หรือ Combo

เปิด tinydesignshop.com/tools/ghost-wireframe-generator ในไลบรารี ให้คลิกการ์ดเค้าโครง ใช้ Theme สำหรับ Light หรือ Dark และ View สำหรับ Single หรือ 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 แสดงอุปกรณ์ทีละเครื่อง เลื่อนไลบรารีเพื่อสลับระหว่างการ์ดเดสก์ท็อปและการ์ดมือถือ Combo แสดงเดสก์ท็อปและอุปกรณ์เคลื่อนที่เคียงข้างกันจากการ์ดเลย์เอาต์เดียว โดยมีความสูงการแสดงตัวอย่างที่ใช้ร่วมกันและ Download both สำหรับ PNG

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.

เส้นทางการส่งออก: Download PNG (หรือ Download both ใน Combo), Download SVG / Copy SVG และ Copy HTML สำหรับ Tiny Page Drops และการโหลดโครงกระดูก ไม่จำเป็นต้องมีการระบุแหล่งที่มาในการส่งออก

ใช้เป็นทักษะในเครื่องมือเข้ารหัส AI

จากตัวสร้าง Get skill CTA สีดำแบบเต็มความกว้างจะเปิดหน้าที่แสดงร่วมกัน หรือตรงไปที่ Ghost Wireframe Skill.

  1. เปิดหน้าทักษะและคัดลอกพรอมต์แบบย่อ หรือดาวน์โหลด SKILL.md
  2. วางทักษะลงในโฟลเดอร์ทักษะตัวแทนของคุณ (Cursor, Claude, Codex ฯลฯ) หรือวางข้อความแจ้งแบบย่อลงในการแชทใดๆ
  3. ขอเค้าโครงโครงร่างลวดโกสต์ — เดสก์ท็อป อุปกรณ์เคลื่อนที่ หรือคอมโบ — ที่มีบทบาท --ghost-*
  4. ทางเลือก: เปิด browser Generator เพื่อดูตัวอย่างและส่งออก 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.

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.