wireframe-designlisted

# PMO Skill: Wireframe Design (with Refero MCP) > **Related Skills:** > - Load `pmo-traceability` — log Wireframe Changes ทุกครั้งที่สร้���ง/แก้ไข wireframe > - Load `pmo-activity-diagram` — ถ้าต้อง derive wireframe จาก User Flow > - Load `pmo-design-md` — ถ้าโปรเจคยังไม่มี DESIGN.md และต้องการเลือก design system ก่อนวาด > > **Required MCP: Refero** — ถ้า Refero MCP tools ไม่พร้อมใช้งาน (เช่น ไม่เจอ `search_screens`) ให้แจ้งผู้ใช้: > ``` > claude mcp add --transport http refero https://api.refero.design/mcp --header "Authorization: Bearer <token>" > ``` > ถ้า Refero ใช้ไม่ได้จริงๆ → ยังสร้าง wireframe ได้ แต่ต้องแจ้งผู้ใช้ว่าไม่มี reference จาก product จริง --- ## Goal สร้าง Wireframe ที่อ้างอิงจาก design ของ product จริง ไม่ใช่สร้างจาก generic template — เพราะ wireframe ที่อ้างอิง pattern จริง communicate กับลูกค้าและ dev team ได้ดีกว่า และลดจำนวนรอบ revision --- ## Workflow Overview ``` Step 1: เข้าใจ Context → Step 2: Research (Refero) → Step 3: สรุป & Confirm → Step 4: สร้าง Wireframe → Step 5: Review ด้วย Checklist → Step 6: บันทึก & Log ``` --- ## Step 1: เข้าใจ Context ก่อนออกแบบ ต้องเข้าใจ 4 สิ่งนี้: | ต้องรู้ | ถามถ้าไม่ระบุ | ตัวอย่าง | |--------|-------------|---------| | **Project** | "ทำสำหรับ project ไหน?" | P01-PROJECT | | **หน้าจอ/Module** | "ออกแบบหน้าอะไร?" | Admin Login, Dashboard | | **Platform** | "สำหรับ Web, iOS, หรือ Android?" | BOF (Back Office = Web) | | **Fidelity** | "ต้องการ low-fi (โครง) หรือ high-fi (สมจริง)?" | low-fi สำหรับ review,