TypeUI vs Design Extractor
DESIGN.md Style Extractor ของ TypeUI เป็นส่วนขยาย Chrome ฟรีที่อ่านสไตล์ของหน้าในแท็บของคุณ แล้วเติมลงในเทมเพลต DESIGN.md ของ TypeUI เอง ไฟล์ของ Design Extractor เป็นไปตามสเปก DESIGN.md ของ Google และส่งมอบแต่ละคอมโพเนนต์ที่เลือกจากหน้าเว็บเป็นสูตร HTML และ CSS ที่เอเจนต์เขียนโค้ดของคุณนำไปสร้างใหม่ได้ แต่ละสูตรตรวจสอบเทียบกับเว็บไซต์จริง หรือแจ้งเตือนพร้อมเหตุผล ยังใช้ได้กับเว็บไซต์ที่ตอบสนองเฉพาะผู้เข้าชมจากบางประเทศด้วย
เพิ่งรู้จักรูปแบบนี้ใช่ไหม อ่านว่า DESIGN.md คืออะไรก่อน
ตรวจสอบเมื่อ เทียบกับ README และซอร์สโค้ดของส่วนขยาย, หน้ารายการใน Chrome Web Store และ README ของ TypeUI ข้อเสนอและราคาอาจเปลี่ยนแปลงได้ โปรดตรวจสอบเว็บไซต์ของผู้ให้บริการนั้นก่อนตัดสินใจ
ทำไมต้อง Design Extractor
เป็นไปตามสเปก DESIGN.md ของ Google
YAML front matter ใช้เฉพาะคุณสมบัติที่สเปกกำหนด ไม่มีคีย์ระดับบนสุดที่กำหนดเอง ส่วนมาตรฐานเรียงตามลำดับของสเปก ตั้งแต่ Overview ถึง Do's and Don'ts รายการคอมโพเนนต์ใน front matter ใช้เฉพาะคุณสมบัติแปดข้อของสเปก โดยใช้ค่าตรงตัว (literal) ตรวจสอบไฟล์ใดก็ได้ด้วยตัวตรวจสอบ DESIGN.mdฟรี
สูตรสำหรับทุกคอมโพเนนต์ที่เลือกจากหน้าเว็บ
header, footer ปุ่ม ช่องกรอกข้อมูล การ์ด และคอมโพเนนต์อื่น ๆ ที่เลือกจากหน้าเว็บ แต่ละตัวมาในรูปสูตร ได้แก่ HTML และ CSS ที่กลั่นกรองแล้วพร้อมค่าตรงตัว อยู่ในส่วน Components ของ DESIGN.md แต่ละสูตรระบุส่วนประกอบและสถานะ hover และ focus ที่พบบนเว็บไซต์ เพื่อให้เอเจนต์เขียนโค้ดของคุณสร้างคอมโพเนนต์ใหม่ได้แทนการเดา
ตรวจสอบเทียบกับเว็บไซต์จริง
แต่ละสูตรถูกเรนเดอร์แยกเดี่ยวและตรวจสอบเทียบกับเว็บไซต์จริง ได้แก่ การจับคู่โครงสร้างของส่วนที่เรนเดอร์กับค่าที่วัดได้บนหน้าเว็บ และการเปรียบเทียบระดับพิกเซลกับภาพที่บันทึกใหม่ขององค์ประกอบจริง สูตรที่ไม่ผ่านจะถูกสร้างใหม่และตรวจสอบอีกครั้ง สูตรที่ยังไม่ผ่านจะถูกแจ้งเตือนพร้อมเหตุผล และจะไม่ถูกส่งมอบในฐานะที่ตรวจสอบแล้ว หน้าผลลัพธ์แสดงว่าคอมโพเนนต์ตรงกันมากแค่ไหน และครอบคลุมสีและสไตล์ข้อความของเว็บไซต์ได้เท่าไร ดูStripe ในแกลเลอรี
ใช้ได้กับเว็บไซต์ที่จำกัดภูมิภาค
บางเว็บไซต์ตอบสนองเฉพาะผู้เข้าชมจากบางประเทศ เมื่อการดึงดีไซน์ล้มเหลวด้วยเหตุนี้ หน้าผลลัพธ์จะมีตัวเลือกประเทศ โดยแสดงประเทศที่พบว่าโหลดหน้านั้นได้ไว้ก่อน แล้วดึงดีไซน์แบบเดียวกันผ่านเบราว์เซอร์ในประเทศที่คุณเลือก การดึงดีไซน์ผ่านประเทศอื่นมีค่าใช้จ่ายเท่ากับราคาระดับ Pro บวกค่าธรรมเนียมเพิ่ม 6 เครดิต (16 เครดิต) หากการดึงดีไซน์ล้มเหลว เราจะคืนเครดิตให้คุณ
เทียบกันแบบตัวต่อตัว
| TypeUI | Design Extractor | |
|---|---|---|
| การเป็นไปตามสเปก | ไม่มีให้บริการ | เป็นไปตามสเปก DESIGN.md ของ Google: front matter มีเฉพาะคุณสมบัติของสเปกและไม่มีคีย์ระดับบนสุดที่กำหนดเอง ส่วนมาตรฐานเรียงตามลำดับของสเปก และรายการคอมโพเนนต์จำกัดเฉพาะคุณสมบัติแปดข้อของสเปกพร้อมค่าตรงตัว |
| สูตรคอมโพเนนต์ | คอมโพเนนต์แสดงเป็นจำนวนนับต่อประเภท (ปุ่ม ลิงก์ ช่องกรอกข้อมูล การ์ด การนำทาง รายการ ตาราง) ภายใต้แนวทางคอมโพเนนต์ทั่วไป | แต่ละคอมโพเนนต์ที่เลือกจากหน้าเว็บ เช่น header, footer ปุ่ม ช่องกรอกข้อมูล และการ์ด มาในรูปสูตร ได้แก่ HTML และ CSS ที่กลั่นกรองแล้วในส่วน Components เพื่อให้เอเจนต์เขียนโค้ดของคุณสร้างใหม่ได้ |
| ตรวจสอบเทียบกับเว็บไซต์จริง | ไม่มีให้บริการ | ใช่ แต่ละสูตรถูกเรนเดอร์แยกเดี่ยวและตรวจสอบเทียบกับเว็บไซต์จริง ได้แก่ การจับคู่โครงสร้างของส่วนประกอบและการเปรียบเทียบระดับพิกเซล คอมโพเนนต์ที่ไม่ผ่านจะถูกแจ้งเตือนพร้อมเหตุผล และจะไม่ถูกส่งมอบในฐานะที่ตรวจสอบแล้ว |
| เว็บไซต์ที่จำกัดภูมิภาค | ไม่มีให้บริการ | ใช่ เมื่อเว็บไซต์บล็อกผู้เข้าชมจากบางประเทศ การดึงดีไซน์ที่ล้มเหลวจะมีตัวเลือกประเทศ โดยแสดงประเทศที่โหลดหน้านั้นได้ไว้ก่อน แล้วดึงดีไซน์แบบเดียวกันผ่านเบราว์เซอร์ในประเทศนั้น การดึงดีไซน์ผ่านประเทศอื่นมีค่าใช้จ่ายเท่ากับราคาระดับ Pro บวกค่าธรรมเนียมเพิ่ม 6 เครดิต (16 เครดิต) |
| คืออะไร | DESIGN.md Style Extractor ส่วนขยาย Chrome ฟรีโดย Bergside SRL ผู้สร้าง TypeUI เวอร์ชัน 0.4.0 มีผู้ใช้ประมาณ 40,000 คนบน Chrome Web Store เป็นโอเพนซอร์สภายใต้สัญญาอนุญาต MIT | ตัวสร้าง: ให้ URL สาธารณะบนเว็บไซต์ ผ่าน MCP หรือจากส่วนขยาย Chrome แล้วได้ DESIGN.md ของเว็บไซต์นั้น |
| ผลลัพธ์เป็นไปตามอะไร | เทมเพลต DESIGN.md ของ TypeUI เอง: Mission, Brand, Style Foundations, Accessibility, Writing Tone, Rules และอื่น ๆ โดยไม่มี YAML front matter และยังเขียน SKILL.md ได้ด้วย | สเปก DESIGN.md ของ Google: โทเค็นอยู่ใน YAML front matter และส่วนมาตรฐานเรียงตามลำดับของสเปก |
| วิธีอ่านเว็บไซต์ | อ่านสไตล์ที่คำนวณแล้วขององค์ประกอบที่มองเห็นได้สูงสุด 280 รายการบนหน้าในแท็บของคุณ ภายในเบราว์เซอร์ของคุณ โดยไม่มีคำขอผ่านเครือข่าย | เซิร์ฟเวอร์ของเราเปิด URL ในเบราว์เซอร์และวิเคราะห์หน้าที่เรนเดอร์แล้ว ระดับ Pro ยังเก็บตัวอย่างจากหน้าสำคัญของเว็บไซต์ด้วย |
| หน้าที่อ่านได้ | หน้าที่เปิดในแท็บของคุณ รวมถึงหน้าที่คุณเข้าสู่ระบบอยู่ | เฉพาะหน้าสาธารณะ หน้าที่ต้องล็อกอิน หน้าบน localhost หรือบนเครือข่ายส่วนตัวยังไม่รองรับ |
| ผลลัพธ์ไปอยู่ที่ไหน | แสดงในป๊อปอัป ซึ่งคุณคัดลอกหรือดาวน์โหลดได้ ปุ่ม Quick install จะเขียน SKILL.md ลงในโฟลเดอร์ skills ของ Claude Code, Codex หรือ Cursor ในโปรเจกต์ที่คุณเลือก | บันทึกในหน้าการดึงดีไซน์ของฉันในบัญชีของคุณ ซึ่งคุณแก้ไข คัดลอก หรือดาวน์โหลดได้ เอเจนต์ของคุณอ่านได้ผ่าน MCP |
| ราคา | ฟรี ไม่ต้องมีบัญชีหรือชำระเงิน | เครดิตแบบเติมล่วงหน้า ไม่มีค่าบริการรายเดือน แพ็กเริ่มต้นที่ US$5 สำหรับ 50 เครดิต การดึงดีไซน์ระดับ Pro ใช้ 10 เครดิต แกลเลอรีและเครื่องมือฟรีไม่มีค่าใช้จ่าย |
| การเข้าถึงจากเอเจนต์ | ส่วนขยายทำงานจากป๊อปอัป CLI และเซิร์ฟเวอร์ MCP แบบโฮสต์ที่แยกต่างหากของ TypeUI ให้บริการ design skill และ UI prompt ที่คัดสรรแล้ว | เซิร์ฟเวอร์ MCP แบบ remote ที่เครื่องมือ extract รับ URL ใดก็ได้ จาก Claude Code, claude.ai, ChatGPT, Codex, Cursor และไคลเอนต์อื่น ๆ |
สิ่งที่ TypeUI มีให้
- ส่วนขยาย Chrome ฟรีแบบโอเพนซอร์ส (MIT) มีผู้ใช้ประมาณ 40,000 คนบน Chrome Web Store ไม่ต้องมีบัญชีหรือชำระเงิน
- ทำงานทั้งหมดในเบราว์เซอร์ของคุณบนหน้าในแท็บของคุณ รวมถึงหน้าที่คุณเข้าสู่ระบบอยู่
- ค่าตัวอักษร สี ระยะห่าง ความโค้งมุม เงา และ motion ใน DESIGN.md ตามรูปแบบของ TypeUI เอง หรือ SKILL.md
- คัดลอกหรือดาวน์โหลดไฟล์จากป๊อปอัป หรือใช้ Quick install เพื่อติดตั้ง SKILL.md ลงในโปรเจกต์ Claude Code, Codex หรือ Cursor
- นอกจากส่วนขยาย TypeUI ยังมี design skill และ UI prompt ที่คัดสรรแล้ว CLI แบบโอเพนซอร์ส และเซิร์ฟเวอร์ MCP แบบโฮสต์ พร้อมเวอร์ชัน Pro ที่มีไฟล์ design skill ที่ปรับปรุงแล้ว UI prompt สำหรับเลย์เอาต์ และชุมชน Discord แบบส่วนตัว
ต่างกันตรงไหน
ส่วนขยายของ TypeUI สรุปค่าสไตล์ที่พบในหน้าเดียวและเพิ่มแนวทางทั่วไปจากเทมเพลต Design Extractor เรนเดอร์เว็บไซต์ เลือกคอมโพเนนต์ และเขียนสูตรสำหรับแต่ละตัว จากนั้นตรวจสอบทุกสูตรเทียบกับเว็บไซต์จริง เอเจนต์ของคุณจึงรู้ว่าคอมโพเนนต์ไหนสร้างใหม่ตามที่เขียนไว้ได้ และคอมโพเนนต์ไหนถูกแจ้งเตือน พร้อมเหตุผล ดูได้ที่Stripe ในแกลเลอรี
ชอบเริ่มจากแท็บที่คุณเปิดอยู่ใช่ไหม ส่วนขยาย Chromeของ Design Extractor ส่งแท็บนั้นไปดึงดีไซน์แบบเดียวกัน ด้วยบัญชีและเครดิตเดียวกัน เอเจนต์ของคุณยังเริ่มการดึงดีไซน์และอ่านผลลัพธ์ได้ผ่านเซิร์ฟเวอร์ MCP ดูไฟล์ที่เสร็จแล้วเพิ่มเติมได้ในแกลเลอรี
วิธีย้ายจาก TypeUI
- วาง URL ของเว็บไซต์ในหน้าแรกของ Design Extractor หรือคลิก Extract this page ในส่วนขยาย Chrome แล้วเริ่มการดึงดีไซน์ระดับ Pro
- บันทึกผลลัพธ์เป็น DESIGN.md ไว้ที่ root ของ repository แทนไฟล์เดิม การอ้างอิงใน AGENTS.md หรือ CLAUDE.md ยังใช้งานได้ตามเดิม
- หากคุณเคยใช้ Quick install ให้ลบโฟลเดอร์ skill ของ design-system ที่ TypeUI เขียนไว้ และคงการอ้างอิง DESIGN.md ไว้
- หากต้องการให้เอเจนต์ดึงดีไซน์เอง ให้เชื่อมต่อเซิร์ฟเวอร์ MCP
สรุป
เลือก Design Extractor หากคุณต้องการ DESIGN.md ที่เป็นไปตามสเปกของ Google พร้อมสูตรสำหรับแต่ละคอมโพเนนต์ที่เลือกจากหน้าเว็บ ซึ่งแต่ละสูตรตรวจสอบเทียบกับเว็บไซต์จริงหรือแจ้งเตือนพร้อมเหตุผล และบันทึกไว้ในบัญชีของคุณ เข้าถึงเว็บไซต์ที่จำกัดภูมิภาคได้ เอเจนต์ของคุณใช้งานได้ผ่าน MCP ส่วนขยายของ TypeUI ใช้ฟรีและอ่านหน้าที่คุณเข้าสู่ระบบอยู่ได้ ตามที่แสดงในตาราง
การเปรียบเทียบอื่น ๆ
getdesign.md vs Design Extractor
คอลเลกชันไฟล์ DESIGN.md สำเร็จรูปที่คัดสรรแล้ว เปรียบเทียบกับ DESIGN.md ที่เป็นไปตามสเปกจาก URL ใดก็ได้ พร้อมสูตรคอมโพเนนต์ที่ตรวจสอบเทียบกับเว็บไซต์จริง
designmd.me vs Design Extractor
ตัวสร้าง DESIGN.md จาก URL สองตัว เปรียบเทียบด้านการเป็นไปตามสเปก สูตรคอมโพเนนต์ การตรวจสอบเทียบกับเว็บไซต์จริง และราคา
Refero Styles vs Design Extractor
คลังสไตล์เว็บไซต์ขนาดใหญ่ที่ใช้ฟรี เปรียบเทียบกับ DESIGN.md ที่เป็นไปตามสเปกจาก URL ใดก็ได้ พร้อมสูตรคอมโพเนนต์ที่ตรวจสอบเทียบกับเว็บไซต์จริง
FAQ
TypeUI vs Design Extractor: คำถามที่พบบ่อย
คำตอบสั้น ๆ เกี่ยวกับ TypeUI และ Design Extractor ตรวจสอบเมื่อ 2026-10-20
ฟรี ณ วันที่ 2026-10-20 ส่วนขยายใช้ฟรีและเป็นโอเพนซอร์สภายใต้สัญญาอนุญาต MIT โดยไม่ต้องมีบัญชีหรือชำระเงิน Design Extractor ไม่ฟรี การดึงดีไซน์ใช้เครดิตแบบเติมล่วงหน้า แพ็กเริ่มต้นที่ US$5 สำหรับ 50 เครดิต และใช้ 10 เครดิต สำหรับการดึงดีไซน์ระดับ Pro แกลเลอรีและเครื่องมือฟรีไม่มีค่าใช้จ่าย
ไม่ ไฟล์เป็นไปตามรูปแบบ TypeUI DESIGN.md แบบโอเพนซอร์ส โดยมีส่วนต่าง ๆ เช่น Mission, Brand, Style Foundations และ Rules และเวอร์ชัน 0.4.0 ไม่เขียน YAML front matter จึงไม่เป็นไปตามสเปก DESIGN.md ของ Google Design Extractor เป็นไปตามสเปกของ Google และตัวตรวจสอบ DESIGN.md ฟรีตรวจสอบไฟล์ใดก็ได้ตามสเปกนั้น
DESIGN.md ที่เป็นไปตามสเปกของ Google โดยมีโทเค็นอยู่ใน front matter และแต่ละคอมโพเนนต์ที่เลือกจากหน้าเว็บ เช่น header, footer ปุ่ม ช่องกรอกข้อมูล และการ์ด อยู่ในรูปสูตร HTML และ CSS ที่กลั่นกรองแล้ว แต่ละสูตรตรวจสอบเทียบกับเว็บไซต์จริงด้วยการจับคู่โครงสร้างและการเปรียบเทียบระดับพิกเซล และสูตรที่ไม่ผ่านจะถูกแจ้งเตือนพร้อมเหตุผล
ได้ ส่วนขยายอ่านหน้าในแท็บของคุณภายในเบราว์เซอร์ จึงใช้ได้กับหน้าที่คุณเข้าสู่ระบบอยู่ Design Extractor อ่านเฉพาะหน้าสาธารณะ หน้าที่ต้องล็อกอิน หน้าบน localhost หรือบนเครือข่ายส่วนตัวยังไม่รองรับ
Design Extractor ดึงดีไซน์จากประเทศอื่นได้ หลังจากการดึงดีไซน์ล้มเหลวด้วยเหตุนี้ หน้าผลลัพธ์จะมีตัวเลือกประเทศ โดยแสดงประเทศที่โหลดหน้านั้นได้ไว้ก่อน แล้วดึงดีไซน์แบบเดียวกันผ่านเบราว์เซอร์ในประเทศนั้น การดึงดีไซน์ผ่านประเทศอื่นมีค่าใช้จ่ายเท่ากับราคาระดับ Pro บวกค่าธรรมเนียมเพิ่ม 6 เครดิต (16 เครดิต) หากการดึงดีไซน์ล้มเหลว เราจะคืนเครดิตให้คุณ
ได้ ทั้งสองสร้าง DESIGN.md ที่อยู่ใน repository ของคุณ การตั้งค่าเอเจนต์จึงเหมือนเดิม ดึงดีไซน์ของเว็บไซต์ด้วย Design Extractor บนเว็บไซต์หรือด้วยส่วนขยาย Chrome แล้วแทนที่ไฟล์เดิม หากคุณเคยใช้ Quick install ให้ลบโฟลเดอร์ skill ของ design-system ที่ TypeUI เขียนไว้ และคงการอ้างอิง DESIGN.md ไว้
รับ DESIGN.md ของเว็บไซต์ที่คุณต้องการ
วาง URL สาธารณะใดก็ได้ ระดับ Pro จะเก็บตัวอย่างจากหน้าสำคัญของเว็บไซต์ และส่งคืน DESIGN.md ที่เป็นไปตามสเปก พร้อมสูตรคอมโพเนนต์ที่ตรวจสอบเทียบกับเว็บไซต์จริง