# Google Stitch + Claude Code: ออกแบบเว็บไซต์โดยไม่ให้ดู “เหมือน AI”
> workflow manual Google Stitch ไป Claude Code ที่ครบ: ส่งออก HTML/CSS ประกอบ DESIGN.md จากไฟล์ สร้างและตรวจหน้า พร้อมจัดการขั้น MCP auth ที่ยังไม่คลี่คลาย
Source: https://ailoot.ai/blog/th/google-stitch-claude-code-design/
Canonical: https://ailoot.ai/blog/th/google-stitch-claude-code-design/
Language: th
Publisher: Ailoot (https://ailoot.ai/)
Translation: guide-106
Revision: sha256-d94f797e911a2d472fed49108051b5f7147b128eebdd92dff7f13a1d6934c4cd
ประเด็นสำคัญ
Claude Code เขียนตรรกะได้ยอดเยี่ยม แต่ดูออกทันทีเมื่อเป็นงานออกแบบของมันเอง: พื้นหลังสีเข้ม ไล่เฉดสีม่วง ฟอนต์ Inter และบล็อกสามอันที่เหมือนกันทุกประการ Google Stitch สร้างงานออกแบบจากคำอธิบายข้อความ ให้โทเค็นสีและตัวพิมพ์ในไฟล์ DESIGN.md แล้ว Claude Code ก็สร้างเว็บไซต์จากไฟล์นั้น ที่นี่ฉันจะแสดงขั้นตอนการทำงานทั้งหมดทีละขั้น และจุดที่มันสะดุด
คำแนะนำเพิ่มเติมเกี่ยวกับการใช้งาน Ailoot อยู่ใน[เอกสารประกอบ](https://ailoot.ai/docs/)
## ทำไมเว็บไซต์ที่สร้างด้วย Claude Code ถึงดูเหมือน “ขยะจาก AI”?
ประเด็นสำคัญ
หากไม่มีระบบออกแบบ Claude Code จะวาดอินเทอร์เฟซที่ดูธรรมดา: พื้นหลังสีเข้ม สีเน้นม่วง ฟอนต์ Inter และการ์ดสามใบที่มีเงาเหมือนกัน เหตุผลคือโมเดลสร้างรูปแบบที่พบบ่อยที่สุดในข้อมูลฝึกของมันซ้ำขึ้นมา และข้อมูลเหล่านั้นก็คืออินเทอร์เน็ตทั้งหมดเกี่ยวกับ Tailwind และหน้าแลนดิ้งเพจนับพันที่เหมือนกัน หากไม่มีข้อกำหนดที่แม่นยำ เอเจนต์จะสร้างค่าเฉลี่ยเลขคณิตของเทมเพลตทั้งหมดออกมา
ในกรณีจริงที่กล่าวถึงนี้ งานทำหน้าแรกของแอปโทรเริ่มจากโปรเจกต์เปล่าและคำขอให้ Claude Code สร้างหน้าแลนดิ้งเพจ ผลลัพธ์เป็นแบบเดิมเป๊ะ: ใช้ `slate-950` เป็นพื้นหลัง ใช้ `indigo-500` เป็นสีเน้น ใช้ Inter ตัวหนาในหัวเรื่อง และมีการ์ดเหมือนกันสามใบพร้อมเงาอยู่ข้างใต้ เลย์เอาต์เดียวกับ v0 รุ่นแรก Lovable รุ่นแรก และผลงานจาก ChatGPT รุ่นแรก ฉันเขียนพรอมป์ใหม่ห้าครั้ง เพิ่มคำว่า “พรีเมียม” “ไม่เหมือนใคร” “ทันสมัย” แต่หน้าเว็บก็ยังดูเหมือนธีม WordPress จากปี 2015
เหตุผลนั้นเรียบง่าย: หากไม่มีข้อกำหนด โมเดลจะหาค่าเฉลี่ยทางสถิติจากสิ่งที่เคยเห็น และมันเคยเห็นหน้าแลนดิ้งเพจเหมือนกันนับล้านที่สร้างด้วย Bootstrap และ Tailwind หากต้องการผลลัพธ์ที่ไม่ธรรมดา คุณต้องให้รายละเอียดที่เฉพาะเจาะจงแก่เอเจนต์ เช่น สีอะไร ฟอนต์อะไร ระยะห่างเท่าไร และควรถือว่าส่วนประกอบใดเป็นมาตรฐาน สำหรับโมเดล คำว่า “สวย” หมายถึง “ค่ามัธยฐานของปี 2020” คำคุณศัพท์ไม่ช่วยให้ผลลัพธ์เปลี่ยนไป คุณต้องระบุพารามิเตอร์ให้แน่นอน
ฉันตรวจสอบช่องว่างแบบเดียวกันนี้ในคู่มือเรื่อง[ระบบออกแบบสำเร็จรูปด้วย Refero](https://ailoot.ai/blog/th/claude-code-refero-design-md/)—ในกรณีนั้น คุณนำสไตล์ของคนอื่น (Apple, Linear, Stripe) มาให้เอเจนต์ ส่วน Google Stitch มองจากอีกด้าน: แทนที่จะยืมสไตล์ของคนอื่น คุณสร้างสไตล์ของตัวเองจากคำอธิบายของคุณ
## Google Stitch คืออะไร และช่วยได้อย่างไร?
ประเด็นสำคัญ
Stitch เป็นเครื่องมือฟรีจาก Google Labs ที่เปลี่ยนคำอธิบายข้อความหรือรูปภาพให้เป็นงานออกแบบ UI ที่ครบถ้วน ทั้งหน้าจอ สี ตัวพิมพ์ และเลย์เอาต์ โดยทำงานในเบราว์เซอร์ด้วยโมเดล Gemini คุณค่าหลักของมันในเวิร์กโฟลว์ Claude Code คือ Stitch จัดเตรียมงานออกแบบเป็นข้อมูลที่มีโครงสร้าง ได้แก่ สี ฟอนต์ และระยะห่างที่กำหนดเป็นค่าที่แน่นอน เอเจนต์อ่านข้อมูลเหล่านั้นและสร้างขึ้นใหม่ในโค้ด โดยไม่ต้อง “กะจากภาพหน้าจอ”
Stitch เป็นการทดลองจาก Google Labs ซึ่งเปิดตัวในงาน Google I/O เดือนพฤษภาคม 2025 คุณเขียนสิ่งที่ต้องการให้แอปมีหน้าตาแบบไหนลงในช่องพรอมป์ (หรืออัปโหลดภาพหน้าจอ ภาพสเก็ตช์บนไวท์บอร์ด หรือหน้าเว็บของคู่แข่ง) แล้ว Stitch จะสร้างหน้าจออินเทอร์เฟซบนแคนวาสที่ไม่มีขอบเขต เบื้องหลังนั้นใช้ Gemini 2.5 Pro และ Flash และเพิ่ม Gemini 3 เข้ามาในเดือนธันวาคม 2025 เพื่อสร้างเลย์เอาต์ที่ประณีตยิ่งขึ้น
สิ่งที่เป็นประโยชน์สำหรับเรา:
- **Vibe Design**—อธิบายความรู้สึกด้วยคำพูด (“มินิมอลและพรีเมียมแบบ Stripe”) แล้วเลือกระหว่างแนวทางภาพหลายแบบ
- **ภาพอ้างอิง**—อัปโหลดภาพจาก Dribbble หรือ Pinterest; Stitch จะรักษาเลย์เอาต์ไว้และนำข้อกำหนดของคุณไปใช้
- **ส่งออก** ได้สามรูปแบบ: ไปยัง Figma (พร้อมเลเยอร์ที่แก้ไขได้), เป็น HTML/CSS ที่สะอาด และผ่าน MCP—ส่งตรงไปยังเอเจนต์
ความแตกต่างจากสไตล์สำเร็จรูปอย่าง Refero เป็นเรื่องสำคัญ Refero เป็นคลังระบบออกแบบที่ดึงมาจากเว็บไซต์จริงแล้ว คุณจึงนำแบรนด์ที่มีอยู่มาใช้ ส่วน Stitch สร้างระบบสำหรับผลิตภัณฑ์ของคุณตั้งแต่ต้น ไม่มีงานออกแบบอ้างอิงและต้องการรูปลักษณ์ของตัวเองหรือ? นั่นคือ Stitch ต้องการนำสไตล์ของผลิตภัณฑ์ที่รู้จักกันดีมาใช้ให้เร็วหรือ? ใช้ Refero ทั้งสองอย่างครอบคลุมขั้นตอนที่ต่างกันและเสริมกันได้ดี
Claude เองก็มีโหมดออกแบบในตัวเช่นกัน ฉันพูดถึงเรื่องนี้ไว้ในคู่มือเรื่อง [Claude Design](https://ailoot.ai/blog/th/claude-design-guide/) Stitch ต่างออกไปเพราะมันจัดเตรียมระบบสำเร็จรูปไว้ในไฟล์ภายนอกที่เอเจนต์อ่านทุกครั้งที่สร้างบางสิ่ง
## ข้อกำหนดด้านความพร้อมใช้งานของ Google Stitch
Stitch ไม่พร้อมให้บริการในทุกประเทศ: ตัวแทนของ Google เขียนไว้ในฟอรัมทางการว่าบริการพร้อมให้ผู้ใช้อายุ 18 ปีขึ้นไปใน 212 ประเทศ และรายชื่อกำลังขยายเพิ่ม ในพื้นที่ที่ถูกจำกัด เมื่อเข้าไปจะเห็นข้อความเพียงข้อความเดียวว่า “Sorry, Stitch is unavailable.”
คุณต้องมีบัญชี Google เพราะลงชื่อเข้าใช้ได้ด้วยบัญชีนี้เท่านั้น
## เมื่อการยืนยันตัวตน Stitch MCP ขวาง workflow ของ Claude Code
ประเด็นสำคัญ
การตั้งค่าที่เล่าพบปัญหาอนุญาต remote MCP `https://stitch.googleapis.com/mcp` ใน Claude Code บทความไม่มี config MCP ที่เข้ากันและพิสูจน์แล้ว เส้นทางครบด้านล่างจึงใช้ HTML/CSS ที่ส่งออกในเครื่อง
มีข้อมูลไร้สาระเกี่ยวกับการเชื่อมต่อ MCP อยู่มากมายบนอินเทอร์เน็ต และคำแนะนำครึ่งหนึ่งก็ใช้ไม่ได้จริง ตัวอย่างเช่น คู่มือจำนวนมาก (รวมถึงคู่มือภาษาอังกฤษยอดนิยม) แนะนำให้ติดตั้งแพ็กเกจ `@google/stitch-mcp` ด้วยคำสั่ง `npx -y @google/stitch-mcp@latest` แพ็กเกจนี้ไม่มีอยู่จริง—npm ส่งกลับ `404` อย่าคัดลอกคำสั่งนี้ เพราะจะเสียเวลา ด้วยเหตุผลเดียวกัน ให้เลือกการเชื่อมต่อที่ผ่านการยืนยันการติดตั้งและตรวจสอบกับงานจริงแล้ว
ความพยายามใช้ remote MCP ในเรื่องนี้จบด้วย `Incompatible auth server` ใน Claude Code ข้อผิดพลาดที่พบไม่ใช่สูตรติดตั้งใช้งานได้หรือหลักฐานว่าทุก config ปัจจุบันล้มเหลว อย่าทำต่อด้วยขั้น “เชื่อม MCP” ที่ไม่ระบุชัด ให้ใช้ HTML/CSS ส่งออกแบบ manual ด้านล่างจนกว่าจะตรวจ config ที่เข้ากันแน่นอนแล้ว
ขั้นตั้งคีย์หรือพร็อกซี MCP ไม่ได้เป็นเส้นทางที่ยืนยันในบทความนี้ จึงไม่ถือว่าการสร้างคีย์หรือเห็นรายการ MCP เป็นการเชื่อมสำเร็จ เส้นทาง manual ด้านล่างไม่ต้องใช้ Stitch API key หรือการยืนยัน MCP ให้ส่งออกหน้าจอที่เลือกเป็น HTML/CSS พร้อม assets และตรวจไฟล์ในเครื่องแทน
## DESIGN.md คืออะไร และทำไมจึงดีกว่าภาพหน้าจอ?
ประเด็นสำคัญ
DESIGN.md คือไฟล์ Markdown ที่เครื่องอ่านได้ ซึ่งประกอบด้วยพารามิเตอร์ของระบบออกแบบ เช่น สีในรูปแบบ hex สเกลตัวพิมพ์ หน่วยระยะห่าง และกฎขององค์ประกอบ Claude Code อ่านไฟล์นี้เป็นบริบทและสร้างทุกองค์ประกอบโดยใช้โทเค็นชุดเดียวกัน เอเจนต์ไม่สามารถดึงค่า hex หรือขนาดระยะห่างที่แน่นอนจากภาพหน้าจอได้—จึงต้องเดา แต่จาก Markdown มันจะนำตัวเลขไปใช้ตามตัวอักษร ดังนั้นทุกหน้าจอจึงดูเหมือนมาจาก “นักออกแบบคนเดียวกัน”
นี่คือรายละเอียดสำคัญที่คำแนะนำส่วนใหญ่มักเข้าใจผิด: ใน Stitch ไม่มีปุ่ม “Export DESIGN.md” เอเจนต์เป็นผู้ประกอบไฟล์นี้เอง ตาม codelab ทางการของ Google พรอมป์จะมีใจความประมาณว่า: “ไปยังโปรเจกต์ผ่าน Stitch MCP ดึงชุดสีและตัวพิมพ์ แล้วประกอบเป็น DESIGN.md” codelab นั้นสมมติว่ามี MCP ที่ทำงานอยู่ แต่เส้นทาง manual ที่นี่ให้ Claude Code อ่าน HTML/CSS ที่ส่งออกแล้วเขียนไฟล์โครงสร้างที่รูท ต้องแจ้ง tokens ที่ขาดแทนเดาจากภาพ
DESIGN.md ระบุรายละเอียดเฉพาะเจาะจงแทนการใช้คำคุณศัพท์:
```markdown
# DESIGN.md
## Colors
- Primary: #0F172A
- Accent: #F97316
- Success / Error / Warning: ...
- Background / surfaces: ...
## Typography
- Font (body): "Instrument Sans"; (headings): "Instrument Serif"
- Scale: H1 48/1.1, H2 36/1.15, Body 16/1.6, Caption 13/1.4
- Weights: 400 / 500 / 700
## Spacing (base 8px)
- xs 4, sm 8, md 16, lg 24, xl 40, 2xl 64
## Layout
- Container max-width: 1200px; breakpoints: 640 / 768 / 1024 / 1280
## Components
- Button: radius 10px; variants primary / secondary / ghost; states hover / active / disabled
- Card: radius 16px; shadow 0 4px 24px rgba(0,0,0,.08)
```
เพื่อให้ Claude Code ใช้ไฟล์นี้ ให้อ้างถึงไฟล์จาก `CLAUDE.md` (ตัวอย่างเช่น ด้วยบรรทัด “ใช้การออกแบบองค์ประกอบทั้งหมดจาก `DESIGN.md`”) แล้วเอเจนต์ก็จะดึงโทเค็นชุดเดียวกันมาใช้ในทุกเซสชัน ปุ่มที่สร้างวันจันทร์กับการ์ดที่สร้างวันศุกร์จะออกมาในสไตล์เดียวกัน เพราะมีแหล่งข้อมูลจริงเพียงแหล่งเดียว
ข้อมูลอ้างในเครื่องสองชุดทำงานร่วมกัน DESIGN.md เก็บกฎสี ตัวอักษร ระยะ และคอมโพเนนต์ ส่วน HTML/CSS กับ assets จาก Stitch ให้ layout หน้าจอเฉพาะ MCP เป็นทางเลือก ไม่ใช่เงื่อนไขของเส้นทางนี้
## สร้างเว็บไซต์อย่างไร: ขั้นตอนทั้งหมดตั้งแต่ข้อความไปจนถึงงานออกแบบ?
ประเด็นสำคัญ
เส้นทาง manual ครบมีเจ็ดขั้น: ตรวจความพร้อม อธิบายผลิตภัณฑ์ ใส่ reference ปรับหน้าจอ ส่งออก HTML/CSS ประกอบ DESIGN.md จากไฟล์ แล้วสร้างและตรวจหนึ่งหน้าใน Claude Code เลี่ยงขั้นยืนยัน MCP ที่ยังไม่คลี่คลาย การรองรับหลายจอ การนำทาง และพฤติกรรมโต้ตอบยังต้องพัฒนาและทดสอบ
นี่คือกระบวนการทั้งหมดตามลำดับ:
1. **เปิด Stitch** ตรวจพื้นที่บริการแล้วเข้า `stitch.withgoogle.com` ด้วยบัญชี Google ของคุณ
2. **อธิบายผลิตภัณฑ์** ระบุหน้าจอกับเส้นทางผู้ใช้ ยืนยันหรือแก้รายชื่อหน้าที่เสนอ
3. **เพิ่ม reference** อัปโหลดภาพหน้าจอที่ตั้งใจใช้ ระบุสี ตัวอักษร และ layout ที่ต้องคง
4. **สร้างและปรับ** เลือกหนึ่งหน้าจอแล้วขัดเกลาก่อนขยาย
5. **ส่งออกหน้าที่เลือกเป็น HTML/CSS** เก็บไฟล์และ assets จำเป็นในโฟลเดอร์อ้างของโปรเจกต์ เปิด HTML ในเครื่องยืนยันว่าเป็นหน้าที่เลือก ภาพอย่างเดียวไม่มีค่า CSS ตรงตัว
6. **ประกอบ DESIGN.md จากไฟล์ในเครื่อง** ให้ Claude Code อ่าน HTML/CSS แล้วบันทึกค่าสี ฟอนต์ ระยะ layout และคอมโพเนนต์จริง พร้อมรายการค่าที่ขาดให้คุณตัดสิน ไม่ต้องใช้ Stitch API key หรือ MCP auth
7. **สร้างและตรวจหนึ่งหน้า** ใช้พรอมป์ต์ตามลำดับและแทนชื่อโฟลเดอร์ด้วย path ส่งออกจริง:
```
อ่าน HTML/CSS จาก Stitch ใน refs/stitch-export/ สร้าง DESIGN.md ที่รูทโปรเจกต์ด้วยค่าที่มีในไฟล์ ระบุค่าที่ขาดแทนแต่งขึ้น
```
```
สร้างหนึ่งหน้าจาก DESIGN.md และไฟล์ Stitch ในเครื่อง แยกคอมโพเนนต์เป็นโมดูล เทียบหน้าที่ render กับไฟล์ส่งออกที่ความกว้างเดสก์ท็อปและมือถือ แล้วตรวจการนำทางกับสถานะโต้ตอบแยก
```
จากนั้นทุกอย่างเป็นหน้าที่ของ Claude Code: การนำทางระหว่างหน้าจอ การรองรับขนาดหน้าจอตาม breakpoint ใน DESIGN.md แอนิเมชัน และการโต้ตอบ Stitch จัดเตรียมหน้าจอแบบคงที่และต้นแบบที่คลิกได้ แต่ไม่ได้สร้างตรรกะที่ทำงานได้จริงหรือเผยแพร่ไปยังโฮสติ้ง—นั่นเป็นหน้าที่ของเอเจนต์
## กำจัด “หน้าตาแบบ AI” อย่างไร: ต้องเปลี่ยนอะไรบ้าง?
ประเด็นสำคัญ
“หน้าตาแบบ AI” จะหายไปเมื่อคุณแทนที่คำคุณศัพท์เชิงอัตวิสัยด้วยข้อกำหนดที่แม่นยำ การเปลี่ยนแปลงหลักมีสามข้อ: เอาสีเน้นม่วงที่เป็นค่าเริ่มต้นออกแล้วระบุรหัส hex ของคุณเอง เปลี่ยนจาก Inter เป็นการจับคู่ฟอนต์ที่มีเอกลักษณ์ และให้ภาพอ้างอิงจากเว็บไซต์จริงแก่เอเจนต์แทนการใช้คำว่า “ทันสมัย” บันทึกทั้งหมดนี้ไว้ใน DESIGN.md แล้วเอเจนต์ก็จะเลิกไหลกลับไปหาค่าเฉลี่ยเลขคณิตของเทมเพลต
ต่อไปนี้คือจุดที่ทำให้เว็บไซต์เลิกเผยตัวตนออกมา:
- **สี** สีม่วง `indigo-500` เป็นสัญญาณแรก ระบุสีหลักและสีเน้นเป็นค่า hex ที่แน่นอนใน DESIGN.md โดยตรง เอเจนต์แต่ละตัวจะตีความ “สีน้ำเงินของแบรนด์” ในแบบของตัวเอง
- **ฟอนต์** Inter ปลอดภัยที่สุด จึงเป็น “ฟอนต์ AI” ที่จดจำได้มากที่สุด เลือกการจับคู่ฟอนต์ที่มีเอกลักษณ์ เช่น ใช้ sans serif สำหรับเนื้อหา และฟอนต์ที่มีคาแรกเตอร์สำหรับหัวเรื่อง ตั้งค่าในงานออกแบบของ Stitch แล้วบันทึกไว้ใน DESIGN.md
- **ภาพอ้างอิงแทนคำคุณศัพท์** โมเดลตีความ “ทำให้ดูทันสมัย” ว่าเป็น “ค่ามัธยฐานของปี 2020” แต่จะทำตามคำว่า “ใช้เลย์เอาต์จากหน้านี้” เมื่อมีภาพหน้าจอจริงอย่างตรงตัว อัปโหลดภาพอ้างอิงไปยัง Stitch; คุณถ่ายทอดรสนิยมด้วยคำพูดไม่ได้
- **ระยะห่างและพื้นที่ว่าง** เลย์เอาต์แบบเทมเพลตสังเกตได้จากบล็อกที่คับแคบและเหมือนกัน กำหนดสเกลระยะห่างให้กว้างขวางใน DESIGN.md แล้วเอเจนต์จะจัดองค์ประกอบได้อิสระขึ้น
การระบุรายละเอียดเฉพาะเจาะจงได้ผลดีกว่าคำคุณศัพท์เชิงอัตวิสัย โดยพื้นฐานแล้ว Stitch คือเครื่องจักรที่แปลง “ฉันอยากให้เป็นแบบนี้” ของคุณให้เป็นโทเค็นที่แน่นอน เพื่อไม่ให้เอเจนต์ต้องเดาอีกต่อไป
## ควรเลือก Google Stitch หรือทางเลือกอื่น?
ประเด็นสำคัญ
Google Stitch เป็นตัวเลือกที่ดีเมื่อคุณต้องการงานออกแบบจากศูนย์และไม่มีงบประมาณ เว็บไซต์ของคุณออกแบบไว้ใน Figma แล้วหรือ? ใช้ Figma MCP ต้องการโค้ด React ที่พร้อมใช้หรือ? ใช้ v0 ต้องการสไตล์ของแบรนด์ที่เป็นที่รู้จักหรือ? ไปที่ Refero ต้องการแอปที่มีแบ็กเอนด์ทันทีหรือ? ใช้ Lovable สำหรับคนเขียนโค้ดตามความรู้สึกที่มีงบจำกัด Stitch เป็นจุดเริ่มต้นที่เข้าถึงง่ายที่สุด แต่ไม่มีระบบเผยแพร่หรือแบ็กเอนด์
ฉันเปรียบเทียบเครื่องมือต่าง ๆ ตามประเด็นที่สำคัญจริง ๆ เมื่อลองเขียนโค้ดตามความรู้สึกโดยมีงบจำกัด:
| เครื่องมือ | ราคา | สิ่งที่มีให้ | การผสานกับ Claude Code |
|----|----|----|----|
| **Google Stitch** | ฟรี | ออกแบบจากข้อความ: หน้าจอ HTML Figma | ส่งออก HTML/CSS ในเครื่อง MCP เฉพาะเมื่อตั้งเข้ากันและตรวจแล้ว |
| **v0 (Vercel)** | ฟรี + \$20/เดือน | โค้ด React / Tailwind พร้อมใช้, เผยแพร่บน Vercel | ผ่านพรอมป์และโค้ด |
| **Figma Dev Mode MCP** | ฟรีในรุ่นเบตา | จัดเตรียมงานออกแบบจาก Figma พร้อมนำไปเขียนโค้ด | MCP ทางการของ Figma |
| **Refero Styles** | คลังฟรี | ไฟล์ DESIGN.md สำเร็จรูปจากเว็บไซต์จริง | MCP ทางการของ Refero |
| **Lovable** | ฟรี + \$25/เดือน | ครบในที่เดียว: อินเทอร์เฟซ + ฐานข้อมูล + การเผยแพร่ | แพลตฟอร์มแยกต่างหาก |
เวิร์กโฟลว์ที่ฉันใช้เองคือ Stitch สำหรับสำรวจงานออกแบบ → Claude Code สำหรับสร้างและเขียนตรรกะ สำหรับคนเขียนโค้ดตามความรู้สึกที่มีงบจำกัด Stitch ชนะเพราะฟรีและสร้างรูปลักษณ์ที่ไม่ซ้ำใครให้ผลิตภัณฑ์ของคุณตั้งแต่ต้น หากต้องการทำความเข้าใจเครื่องมือทั้งหมดในตลาด ฉันได้พูดถึงไว้ในบทความหลักเรื่อง[ใช้เครื่องมืออะไรเขียนโค้ดในปี 2026](https://ailoot.ai/blog/th/ai-coding-tools/)
## Google Stitch มีข้อจำกัดอะไรบ้าง?
ประเด็นสำคัญ
Stitch ทำเฉพาะ UI—ไม่มีแบ็กเอนด์ การเผยแพร่ หรืองานนำเสนอ เครื่องมือแก้ไขด้วยตนเองมีจำกัด: คุณย้ายองค์ประกอบแต่ละชิ้นแบบเดียวกับใน Figma ไม่ได้ ทำได้เพียงสร้างใหม่ ผลลัพธ์ไม่กำหนดแน่นอน—พรอมป์เดียวกันอาจสร้างหน้าจอออกมาแตกต่างกัน นอกจากนี้ยังมีโควตาการสร้างฟรีโดยไม่มีตัวเลือกซื้อเพิ่ม สถานะการทดลองที่ไม่มีการรับประกัน และปัญหาการอนุญาตใน Claude Code
นี่คือรายการข้อจำกัดอย่างตรงไปตรงมา เพื่อไม่ให้คุณผิดหวังตั้งแต่หน้าจอที่สาม:
- **มีเฉพาะอินเทอร์เฟซ** ไม่มีแบ็กเอนด์ ฐานข้อมูล หรือการเผยแพร่ไปยังโฮสติ้ง คุณต้องใช้ Claude Code ทำส่วนนั้น (หรือใช้ Lovable หากต้องการทุกอย่างในที่เดียว)
- **แก้ไขภายในเครื่องมือได้จำกัด** คุณย้ายองค์ประกอบแต่ละชิ้นด้วยเมาส์ไม่ได้—ทำได้เพียงเปลี่ยนผ่านพรอมป์แล้วสร้างใหม่ นี่ไม่ใช่ Figma
- **ผลลัพธ์ไม่กำหนดแน่นอน** พรอมป์เดิมให้ผลลัพธ์ต่างกัน เหมาะกับการสำรวจไอเดีย แต่ไม่สะดวกเมื่อต้องการผลลัพธ์ที่ทำซ้ำได้
- **โควตา** คุณจะถึงขีดจำกัดการสร้างฟรี (ปัจจุบันจำกัดรายวัน); ซื้อเพิ่มไม่ได้ จึงต้องรอให้โควตารีเซ็ต จำนวนที่แน่นอนเปลี่ยนแปลงได้ ให้ตรวจสอบในอินเทอร์เฟซ
- **สถานะการทดลอง** Google Labs ไม่รับประกันการสนับสนุนระยะยาว บริการอาจเปลี่ยนแปลงหรือปิดตัวลงได้
- **ข้อจำกัดทางภูมิศาสตร์** และปัญหาการอนุญาต MCP ใน Claude Code ซึ่งกล่าวถึงในส่วนความพร้อมใช้งานและการตั้งค่า
Stitch ไม่เหมาะเมื่อคุณมีคู่มือแบรนด์ที่เข้มงวดสำหรับหลายโปรเจกต์ เมื่อมีงานออกแบบอยู่ใน Figma แล้ว หรือเมื่อต้องการแอปที่มีแบ็กเอนด์และเผยแพร่เรียบร้อยแล้ว
## ขั้นต่อไปคืออะไร?
ประเด็นสำคัญ
ขั้นต่อไป ให้สร้างเวิร์กโฟลว์ด้วยตนเอง: สร้างหน้าจอแรกใน Stitch ดึง DESIGN.md ออกมา แล้วใช้ไฟล์นั้นสร้างหนึ่งหน้าใน Claude Code ใช้เวลาหนึ่งช่วงเย็น และช่วยแก้ข้อกังวลหลักที่ว่าเว็บไซต์จะกลับมาดู “เหมือนสร้างโดย AI” อีกครั้ง ทุกอย่างขึ้นอยู่กับทักษะเดียว: การควบคุมสิ่งที่เข้าสู่บริบทของเอเจนต์ ส่วนที่เหลือจะตามมาจากการฝึกฝน
สร้างเวิร์กโฟลว์ที่เล็กที่สุดโดยใช้หน้าจอเดียว: อธิบายผลิตภัณฑ์ใน Stitch สร้างหน้าแรก ส่งออก HTML/CSS แล้วให้ Claude Code ประกอบ DESIGN.md และสร้างหน้าจากไฟล์ในเครื่องเหล่านั้น เมื่อเห็นการไล่เฉดสีม่วงหายไปเองแล้ว ขั้นตอนที่เหลือก็จะง่ายขึ้น
### แหล่งที่มา
- [Google Developers Blog - Stitch: วิธีใหม่ในการออกแบบ UI](https://developers.googleblog.com/stitch-a-new-way-to-design-uis/)
- [Google Blog - Stitch และ Gemini 3](https://blog.google/technology/google-labs/stitch-gemini-3/)
- [Google Codelab - ออกแบบสู่โค้ดด้วย Stitch MCP](https://codelabs.developers.google.com/design-to-code-with-antigravity-stitch)
- [Figma - ตั้งค่า MCP สำหรับ Claude Code](https://help.figma.com/hc/en-us/articles/39888612464151-Claude-Code-and-Figma-Set-up-the-MCP-server)
หากต้องการทำงานกับโมเดลต่อ คุณสามารถไปที่ [Ailoot](https://ailoot.ai/)
## คำถามที่พบบ่อย
### Stitch MCP ตอบ Incompatible auth server ทำอะไรได้?
ใช้เส้นทาง manual ครบ ส่งออกหน้าที่เลือกเป็น HTML/CSS เก็บ assets ในโปรเจกต์ ตรวจไฟล์ในเครื่อง แล้วให้ Claude Code สร้าง DESIGN.md จากไฟล์ บทความไม่มี config MCP ที่พิสูจน์ จึงอย่าถือ “เชื่อม MCP” เป็นขั้นที่เสร็จ
### ป้องกัน design tokens ที่เดาใน DESIGN.md อย่างไร?
ให้ HTML/CSS ที่ส่งออกแทนแค่ภาพ ขอให้บันทึกค่าที่มีจริงและแสดงสี ฟอนต์ ระยะ หรือกฎคอมโพเนนต์ที่ขาดให้ตัดสิน แล้วเทียบหน้า render หนึ่งหน้ากับต้นทางส่งออก
## Ailoot · บริษัทและพอร์ตโฟลิโอโครงการของบริษัท
Ailoot อาศัยประสบการณ์การดำเนินงานที่สั่งสม ฐานลูกค้าขนาดใหญ่ บริการที่เสถียร และการติดตาม KPI อย่างต่อเนื่อง
บริษัทและพอร์ตโฟลิโอโครงการของบริษัท: ลูกค้าหลายล้านราย; ยอดขายระดับหลายพันล้านต่อเดือน.
Ailoot นำประสบการณ์การดำเนินงานนี้มาใช้เพื่อให้เข้าถึงฟังก์ชัน AI ผ่าน API ในผลิตภัณฑ์ของลูกค้า เอเจนต์ แอปพลิเคชัน และระบบอัตโนมัติ