ถ้าไม่ใช้ Claude: OpenCode + Open Design

OpenCode คือ coding agent แบบ open-source ที่ทำงานผ่าน terminal, desktop หรือ IDE extension และรองรับการเลือก provider/model หลายแบบ. Open Design คือ workspace สำหรับเปลี่ยน brief ให้เป็น design artifact โดยใช้ coding-agent CLI ที่มีอยู่เป็น engine

สรุปสั้น ๆ: ใช้ OpenCode เมื่อโจทย์คือ “ช่วยทำระบบ” และใช้ Open Design เมื่อโจทย์คือ “ช่วยทำ/ตรวจ design artifact” โดยทั้งคู่ยังต้องใช้ model provider และ API key ตามที่คุณเลือก

OpenCode เป็น agent สำหรับทำงานใน project context. จุดสำคัญคือคุณเลือก provider ได้เอง จึงเหมาะกับคนที่ไม่ต้องการผูก workflow ไว้กับ Claude เพียงรายเดียว

• ถามความสัมพันธ์ของไฟล์หรือ flow โดยอ้างไฟล์ด้วย @path/to/file
• เริ่มจาก plan เมื่อ feature มีหลายจุด และใช้ /undo หรือ /redo เมื่อต้องย้อนหรือทำซ้ำการแก้ไข
• ระบุ scope, ไฟล์ที่อนุญาต, คำสั่งตรวจ และสิ่งที่ห้ามทำทุกครั้งที่ให้ agent แก้โค้ด

cd /path/to/project
opencode

# ใน TUI
/connect

อธิบายโครงสร้างโปรเจกต์นี้โดยอ่านเฉพาะ src/ และ package.json
ยังไม่ต้องแก้ไฟล์ สรุป entry points, data flow และคำสั่ง test ที่พบ

Open Design ใช้ coding agent ที่ติดตั้งอยู่บนเครื่อง เช่น OpenCode, Codex หรือ CLI อื่นที่รองรับ มาช่วยผ่านวงจร brief → direction → plan → artifact preview. แนวคิดสำคัญคือ design system และ skill เป็นไฟล์ที่อ่าน แก้ และ version-control ได้

ติดตั้ง OpenCode แบบ global แล้วเปิดใน project ที่ต้องการ. ถ้าใช้ macOS/Linux ใช้ installer หรือ Homebrew ได้; ถ้าต้องการใช้ Node.js ใช้ npm ได้ตามเอกสารทางการ

# OpenCode: เลือกวิธีใดวิธีหนึ่ง
curl -fsSL https://opencode.ai/install | bash

# หรือ
npm install -g opencode-ai

# หรือ macOS/Linux
brew install anomalyco/tap/opencode

# Open Design: รัน local workspace ตาม quickstart
git clone https://github.com/nexu-io/open-design.git
cd open-design
pnpm install
pnpm tools-dev run web

Open Design ต้องใช้ Node และ pnpm ตาม version ที่โครงการระบุ. หลัง daemon ทำงาน ให้ตรวจว่า OpenCode อยู่ใน PATH หรือใช้ BYOK endpoint ที่คุณอนุญาต. อย่าวาง API key ไว้ใน repo หรือ prompt

1. OpenCode สำรวจ repo: ให้สรุปโครงสร้างและข้อจำกัดก่อนแก้
2. Open Design ล็อก brief: ระบุผู้ใช้, เป้าหมาย, content hierarchy, brand และ responsive states
3. เลือก artifact: ตรวจ HTML/preview และ design system ก่อนนำไปต่อใน Next.js หรือส่งให้ทีม dev
4. QA: เปิดหน้าใน browser, ตรวจ console, responsive, accessibility และ diff ของไฟล์ก่อน commit

ใช้ OpenCode อ่าน repo นี้ก่อน ห้ามแก้ไฟล์
จากนั้นใช้ Open Design ช่วยทำ landing page brief นี้
เป้าหมาย: เว็บไซต์รับงานสำหรับธุรกิจขนาดเล็ก
ส่งออก: design direction, DESIGN.md, responsive states และ artifact preview
หลังสร้างเสร็จให้ตรวจ contrast, keyboard focus, mobile overflow และสรุปไฟล์ที่เปลี่ยน
ห้ามใส่ API key ในไฟล์ และห้าม commit/push