wireframe-locklisted

แก้ปัญหา build ออกมาไม่ตรง wireframe. ทำ wireframe.html ให้เป็น "สัญญา" ที่ AI อ่านได้ → build กลายเป็นการ port 1:1 ไม่ใช่การเดา → verify เทียบทีละจุด. ใช้ได้กับทุกธุรกิจ/ทุกโปรเจค. รองรับ 2 เคส: (A) ออกแบบ wireframe ใหม่จากศูนย์, (B) มี wireframe/mockup อยู่แล้วต้อง port เป็นระบบ. ทำงาน 4 เฟส: entry(เลือกเคส) → design → lock(ยืนยัน) → build+verify. Trigger: "ทำ wireframe", "/wireframe-lock", "wireframe ไม่ตรง", "build ตาม wireframe", "ออกแบบหน้าเว็บก่อน build", "lock design", "port wireframe เป็น code", "มี wireframe แล้วอยากทำเป็นระบบ", "แปลง mockup เป็นเว็บ", "ทำระบบให้เหมือน wireframe 100%".
MarkVibeSapce/aieasypro-vibe-skill · ★ 0 · Web & Frontend · score 70

Install: claude install-skill MarkVibeSapce/aieasypro-vibe-skill

# wireframe-lock — wireframe = สัญญา, build = port, แล้ว verify **ปัญหาที่แก้:** สั่ง "build ตาม wireframe" แล้วออกมาไม่ตรง — เพราะ AI "วาดใหม่" ไม่ใช่ "แปลง", และ wireframe เป็นแค่รูปที่ไม่บอก component / data / state / copy. **หลักการ:** ทำ wireframe เป็น **สัญญาที่อ่านได้ทั้งคนและ AI** → build เป็นการ **port เชิงกล (1:1)** ไม่ใช่ตีความ → แล้ว **critique เทียบ wireframe จนตรง**. > กฎทอง: wireframe เขียนด้วย tech เดียวกับ build (Tailwind) + annotation ครบ > → build = "ย้าย markup เข้า .tsx" → drift เกือบ 0. **สกิลนี้เป็นกลาง** — ตัวอย่างในไฟล์ใช้ placeholder (`[แบรนด์]`, `Item`, `item.field`). ใช้กับธุรกิจอะไรก็ได้: ร้านค้า / คลินิก / อสังหา / คอร์ส / บริการ — เปลี่ยนแค่ token + entity. **ขอบเขต:** สกิลนี้คุม **โครงสร้าง / layout / copy / state** ให้ตรง. ไม่คุม **behavior/logic** (validation, การคำนวณ, submit ทำอะไร) — ส่วนนั้นให้ `build-frontend` + `supabase-setup` ต่อ. wireframe บอกแค่ปุ่มไป *ไหน* (`data-action`) ไม่ใช่ปุ่มทำงาน *ยังไง*. --- ## 0️⃣ เฟส 0 — ENTRY: เลือกเส้นทางก่อนเริ่ม (ห้ามข้าม) ถามตัวเองข้อเดียว: **มี wireframe/mockup อยู่แล้วหรือยัง?** | | เคส | ทำต่อที่ | |---|-----|---------| | 🅰️ | **ยังไม่มี** — เริ่มจากศูนย์ (โปรเจคใหม่ / งานนักเรียน) | เฟส 1-A (DESIGN ใหม่) | | 🅱️ | **มีแล้ว** — มี HTML mockup / Figma / wireframe เดิม ต้อง port เป็นระบบ | เฟส 1-B (ADOPT ของเดิม) | > ไม่แน่ใจ = ถาม user. อย่าเดา. > ทั้ง 2 เคส บรรจบกันที่ **เฟส 2 LOCK** แล้วไหลต่อเหมือนกัน. --- ## 1️⃣-🅰️ DESIGN (ออกแบบใหม่) — สร้าง wireframe.html แบบมีกฎ ### วิธีเร็วส