มาลองใช้งาน Stitch CLI สำหรับการออกแบบ user interface กันดู

October 3, 2026 AI, Tools

ทาง Google ได้ปล่อย Stitch CLI ออกมาให้ใช้งาน
รวมทั้ง skill /stitch เพื่อใช้งานใน AI Agent for coding ได้แบบง่าย ๆ ได้เลย
ทำให้ workflow การออกแบบและสร้าง user interface ของระบบงานสะดวกมากยิ่งขึ้น
โดยการทำงาน ประกอบไปด้วย

• ทำการ generate user interface ออกมาให้
• ทำการแก้ไข user interface และ upload asset หรือ รูปต่าง ๆ เข้ามาได้เลย
• ทำการจัดการเรื่องของ design system ของ agent ผ่านไฟล์ DESIGN.md
• ทำการเชื่อมต่อกับ code ใน local repository ของเราได้เลย (ทั้งเริ่มใหม่ หรือ อ่านจากระบบเดิมใน code)

ทำให้เราสามารถสร้าง prototype ต่าง ๆ ของระบบงานได้สะดวกมากยิ่งขึ้น

จากเดิมที่ต้องทำผ่าน web นั่นเอง
ดังนั้นมาลองใช้งานกันดู ว่าเป็นอย่างไรบ้าง ?

จากนั้น Stitch จะแนะนำให้ติดตั้ง Agent Skills ใน AI Agent for coding
ยกตัวอย่างเช่นใน Claude code

โดยใน skill นี้จะทำการตรวจสอบว่า project ปัจจุบันมีหรือไม่
ถ้ามี code อยู่จะทำการแปลงจาก code มาเป็น design (code-to-design)
ด้วยการสร้างไฟล์ DESIGN.md ออกมาให้
และทำการหา route ต่าง ๆ และ capture screen มาให้เลย
จากนั้นทำการ sync และ validate ต่อไป
และมีการทำ mapping design ต่าง ๆ ให้อีกด้วย

มาลองใช้งานแบบไม่มีอะไรเลยดีกว่า

มีขั้นตอนการใช้งานดังนี้

• สร้าง project
• ทำการสร้างหน้าจอ หรือ screen ด้วยการเขียน prompt และระบุ device (DESKTOP หรือ MOBILE)
• ทำการ start server และเปิดดูหน้าจอที่สร้างขึ้นมาทั้งใน localhost หรือผ่าน web ของ stitch

และเปิดดูตัวอย่างได้เลยบน localhost

ในกรณีที่เราต้องการให้ stitch cli อ่านข้อมูลจาก url หรือ route จาก project ของเรา

เช่นในระบบมี url ชื่อว่า http://localhost:3000/checkout
สามารถให้ stitch cli อ่านมาเป็น HTML และ capture หน้าจอมาใช้งาน
สามารถทำได้ดังนี้

ลองใช้งานกันดูครับ
เป็นอีกเครื่องมือที่น่าสนใจ
อ่านเอกสารเพิ่มเติมได้ที่ Stitch CLI Quickstart

เพิ่มเติมการ validate การเปรียบเทียบ และ export token จากไฟล์ DESIGN.md
ด้วยการใช้งาน @google/design.md

Reference websites

• Stitch CLI: Google Brings UI Design to the Terminal (and to Your Agent)

Article by Somkiat Puisungnoen

To be Craftmanship