Google Stitch + Claude Code: ออกแบบเว็บไซต์โดยไม่ให้ดู “เหมือน AI”

คำแนะนำเพิ่มเติมเกี่ยวกับการใช้งาน Ailoot อยู่ในเอกสารประกอบ

ทำไมเว็บไซต์ที่สร้างด้วย Claude Code ถึงดูเหมือน “ขยะจาก AI”?#

ในกรณีจริงที่กล่าวถึงนี้ งานทำหน้าแรกของแอปโทรเริ่มจากโปรเจกต์เปล่าและคำขอให้ Claude Code สร้างหน้าแลนดิ้งเพจ ผลลัพธ์เป็นแบบเดิมเป๊ะ: ใช้ slate-950 เป็นพื้นหลัง ใช้ indigo-500 เป็นสีเน้น ใช้ Inter ตัวหนาในหัวเรื่อง และมีการ์ดเหมือนกันสามใบพร้อมเงาอยู่ข้างใต้ เลย์เอาต์เดียวกับ v0 รุ่นแรก Lovable รุ่นแรก และผลงานจาก ChatGPT รุ่นแรก ฉันเขียนพรอมป์ใหม่ห้าครั้ง เพิ่มคำว่า “พรีเมียม” “ไม่เหมือนใคร” “ทันสมัย” แต่หน้าเว็บก็ยังดูเหมือนธีม WordPress จากปี 2015

เหตุผลนั้นเรียบง่าย: หากไม่มีข้อกำหนด โมเดลจะหาค่าเฉลี่ยทางสถิติจากสิ่งที่เคยเห็น และมันเคยเห็นหน้าแลนดิ้งเพจเหมือนกันนับล้านที่สร้างด้วย Bootstrap และ Tailwind หากต้องการผลลัพธ์ที่ไม่ธรรมดา คุณต้องให้รายละเอียดที่เฉพาะเจาะจงแก่เอเจนต์ เช่น สีอะไร ฟอนต์อะไร ระยะห่างเท่าไร และควรถือว่าส่วนประกอบใดเป็นมาตรฐาน สำหรับโมเดล คำว่า “สวย” หมายถึง “ค่ามัธยฐานของปี 2020” คำคุณศัพท์ไม่ช่วยให้ผลลัพธ์เปลี่ยนไป คุณต้องระบุพารามิเตอร์ให้แน่นอน

ฉันตรวจสอบช่องว่างแบบเดียวกันนี้ในคู่มือเรื่องระบบออกแบบสำเร็จรูปด้วย Refero—ในกรณีนั้น คุณนำสไตล์ของคนอื่น (Apple, Linear, Stripe) มาให้เอเจนต์ ส่วน Google Stitch มองจากอีกด้าน: แทนที่จะยืมสไตล์ของคนอื่น คุณสร้างสไตล์ของตัวเองจากคำอธิบายของคุณ

Google 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 Stitch ต่างออกไปเพราะมันจัดเตรียมระบบสำเร็จรูปไว้ในไฟล์ภายนอกที่เอเจนต์อ่านทุกครั้งที่สร้างบางสิ่ง

ข้อกำหนดด้านความพร้อมใช้งานของ Google Stitch#

Stitch ไม่พร้อมให้บริการในทุกประเทศ: ตัวแทนของ Google เขียนไว้ในฟอรัมทางการว่าบริการพร้อมให้ผู้ใช้อายุ 18 ปีขึ้นไปใน 212 ประเทศ และรายชื่อกำลังขยายเพิ่ม ในพื้นที่ที่ถูกจำกัด เมื่อเข้าไปจะเห็นข้อความเพียงข้อความเดียวว่า “Sorry, Stitch is unavailable.”

คุณต้องมีบัญชี Google เพราะลงชื่อเข้าใช้ได้ด้วยบัญชีนี้เท่านั้น

เมื่อการยืนยันตัวตน Stitch MCP ขวาง workflow ของ Claude Code#

มีข้อมูลไร้สาระเกี่ยวกับการเชื่อมต่อ 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 คืออะไร และทำไมจึงดีกว่าภาพหน้าจอ?#

นี่คือรายละเอียดสำคัญที่คำแนะนำส่วนใหญ่มักเข้าใจผิด: ใน Stitch ไม่มีปุ่ม “Export DESIGN.md” เอเจนต์เป็นผู้ประกอบไฟล์นี้เอง ตาม codelab ทางการของ Google พรอมป์จะมีใจความประมาณว่า: “ไปยังโปรเจกต์ผ่าน Stitch MCP ดึงชุดสีและตัวพิมพ์ แล้วประกอบเป็น DESIGN.md” codelab นั้นสมมติว่ามี MCP ที่ทำงานอยู่ แต่เส้นทาง manual ที่นี่ให้ Claude Code อ่าน HTML/CSS ที่ส่งออกแล้วเขียนไฟล์โครงสร้างที่รูท ต้องแจ้ง tokens ที่ขาดแทนเดาจากภาพ

DESIGN.md ระบุรายละเอียดเฉพาะเจาะจงแทนการใช้คำคุณศัพท์:

# 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 เป็นทางเลือก ไม่ใช่เงื่อนไขของเส้นทางนี้

สร้างเว็บไซต์อย่างไร: ขั้นตอนทั้งหมดตั้งแต่ข้อความไปจนถึงงานออกแบบ?#

นี่คือกระบวนการทั้งหมดตามลำดับ:

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” อย่างไร: ต้องเปลี่ยนอะไรบ้าง?#

ต่อไปนี้คือจุดที่ทำให้เว็บไซต์เลิกเผยตัวตนออกมา:

• สี สีม่วง indigo-500 เป็นสัญญาณแรก ระบุสีหลักและสีเน้นเป็นค่า hex ที่แน่นอนใน DESIGN.md โดยตรง เอเจนต์แต่ละตัวจะตีความ “สีน้ำเงินของแบรนด์” ในแบบของตัวเอง
• ฟอนต์ Inter ปลอดภัยที่สุด จึงเป็น “ฟอนต์ AI” ที่จดจำได้มากที่สุด เลือกการจับคู่ฟอนต์ที่มีเอกลักษณ์ เช่น ใช้ sans serif สำหรับเนื้อหา และฟอนต์ที่มีคาแรกเตอร์สำหรับหัวเรื่อง ตั้งค่าในงานออกแบบของ Stitch แล้วบันทึกไว้ใน DESIGN.md
• ภาพอ้างอิงแทนคำคุณศัพท์ โมเดลตีความ “ทำให้ดูทันสมัย” ว่าเป็น “ค่ามัธยฐานของปี 2020” แต่จะทำตามคำว่า “ใช้เลย์เอาต์จากหน้านี้” เมื่อมีภาพหน้าจอจริงอย่างตรงตัว อัปโหลดภาพอ้างอิงไปยัง Stitch; คุณถ่ายทอดรสนิยมด้วยคำพูดไม่ได้
• ระยะห่างและพื้นที่ว่าง เลย์เอาต์แบบเทมเพลตสังเกตได้จากบล็อกที่คับแคบและเหมือนกัน กำหนดสเกลระยะห่างให้กว้างขวางใน DESIGN.md แล้วเอเจนต์จะจัดองค์ประกอบได้อิสระขึ้น

การระบุรายละเอียดเฉพาะเจาะจงได้ผลดีกว่าคำคุณศัพท์เชิงอัตวิสัย โดยพื้นฐานแล้ว Stitch คือเครื่องจักรที่แปลง “ฉันอยากให้เป็นแบบนี้” ของคุณให้เป็นโทเค็นที่แน่นอน เพื่อไม่ให้เอเจนต์ต้องเดาอีกต่อไป

ควรเลือก Google Stitch หรือทางเลือกอื่น?#

ฉันเปรียบเทียบเครื่องมือต่าง ๆ ตามประเด็นที่สำคัญจริง ๆ เมื่อลองเขียนโค้ดตามความรู้สึกโดยมีงบจำกัด:

เวิร์กโฟลว์ที่ฉันใช้เองคือ Stitch สำหรับสำรวจงานออกแบบ → Claude Code สำหรับสร้างและเขียนตรรกะ สำหรับคนเขียนโค้ดตามความรู้สึกที่มีงบจำกัด Stitch ชนะเพราะฟรีและสร้างรูปลักษณ์ที่ไม่ซ้ำใครให้ผลิตภัณฑ์ของคุณตั้งแต่ต้น หากต้องการทำความเข้าใจเครื่องมือทั้งหมดในตลาด ฉันได้พูดถึงไว้ในบทความหลักเรื่องใช้เครื่องมืออะไรเขียนโค้ดในปี 2026

Google Stitch มีข้อจำกัดอะไรบ้าง?#

นี่คือรายการข้อจำกัดอย่างตรงไปตรงมา เพื่อไม่ให้คุณผิดหวังตั้งแต่หน้าจอที่สาม:

• มีเฉพาะอินเทอร์เฟซ ไม่มีแบ็กเอนด์ ฐานข้อมูล หรือการเผยแพร่ไปยังโฮสติ้ง คุณต้องใช้ Claude Code ทำส่วนนั้น (หรือใช้ Lovable หากต้องการทุกอย่างในที่เดียว)
• แก้ไขภายในเครื่องมือได้จำกัด คุณย้ายองค์ประกอบแต่ละชิ้นด้วยเมาส์ไม่ได้—ทำได้เพียงเปลี่ยนผ่านพรอมป์แล้วสร้างใหม่ นี่ไม่ใช่ Figma
• ผลลัพธ์ไม่กำหนดแน่นอน พรอมป์เดิมให้ผลลัพธ์ต่างกัน เหมาะกับการสำรวจไอเดีย แต่ไม่สะดวกเมื่อต้องการผลลัพธ์ที่ทำซ้ำได้
• โควตา คุณจะถึงขีดจำกัดการสร้างฟรี (ปัจจุบันจำกัดรายวัน); ซื้อเพิ่มไม่ได้ จึงต้องรอให้โควตารีเซ็ต จำนวนที่แน่นอนเปลี่ยนแปลงได้ ให้ตรวจสอบในอินเทอร์เฟซ
• สถานะการทดลอง Google Labs ไม่รับประกันการสนับสนุนระยะยาว บริการอาจเปลี่ยนแปลงหรือปิดตัวลงได้
• ข้อจำกัดทางภูมิศาสตร์ และปัญหาการอนุญาต MCP ใน Claude Code ซึ่งกล่าวถึงในส่วนความพร้อมใช้งานและการตั้งค่า

Stitch ไม่เหมาะเมื่อคุณมีคู่มือแบรนด์ที่เข้มงวดสำหรับหลายโปรเจกต์ เมื่อมีงานออกแบบอยู่ใน Figma แล้ว หรือเมื่อต้องการแอปที่มีแบ็กเอนด์และเผยแพร่เรียบร้อยแล้ว

ขั้นต่อไปคืออะไร?#

สร้างเวิร์กโฟลว์ที่เล็กที่สุดโดยใช้หน้าจอเดียว: อธิบายผลิตภัณฑ์ใน Stitch สร้างหน้าแรก ส่งออก HTML/CSS แล้วให้ Claude Code ประกอบ DESIGN.md และสร้างหน้าจากไฟล์ในเครื่องเหล่านั้น เมื่อเห็นการไล่เฉดสีม่วงหายไปเองแล้ว ขั้นตอนที่เหลือก็จะง่ายขึ้น

หากต้องการทำงานกับโมเดลต่อ คุณสามารถไปที่ Ailoot