Design Extractor ส่วนขยาย Chrome
ส่วนขยาย Chrome ของ Design Extractor เปลี่ยนเว็บไซต์ในแท็บปัจจุบันของคุณเป็น DESIGN.md ไฟล์ระบบดีไซน์ที่มีสี ตัวอักษร ระยะห่าง รูปทรง และกฎของคอมโพเนนต์ของเว็บไซต์ เขียนขึ้นสำหรับเอเจนต์เขียนโค้ดอย่าง Claude Code, Cursor และ Copilot คลิกเดียวในแถบเครื่องมือ ไม่ต้องวาง URL
ติดตั้งฟรี การดึงดีไซน์แต่ละครั้งใช้เครดิตจากยอดคงเหลือแบบเติมล่วงหน้า ในราคาเดียวกับบนเว็บไซต์
ทำอะไรได้บ้าง
DESIGN.md จากแท็บที่คุณเปิดอยู่
ดึงดีไซน์ของหน้าในแท็บของคุณ
คลิกเดียวก็ส่งที่อยู่ของแท็บที่คุณเปิดอยู่ไปดึงดีไซน์แบบเดียวกับฟอร์มในหน้าแรก ระดับ Pro ยังเก็บตัวอย่างจากหน้าสำคัญของเว็บไซต์ด้วย ผลลัพธ์จึงสะท้อนทั้งเว็บไซต์ ไม่ใช่แค่หน้าจอเดียว
เขียนระบบดีไซน์ฉบับเต็ม
โทเค็น YAML สำหรับสี ตัวอักษร ระยะห่าง และรูปทรง พร้อมแปดส่วนของรูปแบบ DESIGN.md ได้แก่ Overview, Colors, Typography, Layout, Elevation and Depth, Shapes, Components และ Do's and Don'ts
สูตรสำหรับทุกคอมโพเนนต์
คอมโพเนนต์ที่เลือกจากหน้าเว็บ เช่น header ปุ่ม ช่องกรอกข้อมูล และการ์ด แต่ละตัวมาในรูป HTML และ CSS ที่กลั่นกรองแล้ว ตรวจสอบเทียบกับเว็บไซต์จริง หรือแจ้งเตือนพร้อมเหตุผล
บัญชีเดียวกัน เครดิตเดียวกัน
ส่วนขยายใช้เซสชันเดียวกับที่คุณมีบน design-extractor.com ไม่ต้องล็อกอินซ้ำ และป๊อปอัปจะแสดงยอดเครดิตของคุณ
วิธีการทำงาน
สามขั้นตอนจากแท็บสู่ DESIGN.md
เพิ่มใน Chrome แล้วปักหมุด
ติดตั้งจาก Chrome Web Store แล้วปักหมุดจากไอคอนจิ๊กซอว์ ส่วนขยายขอสิทธิ์เข้าถึง design-extractor.com และแท็บที่ใช้งานอยู่เท่านั้น ไม่มีอย่างอื่น เข้าสู่ระบบบนเว็บไซต์หนึ่งครั้ง แล้วป๊อปอัปจะใช้เซสชันนั้น
เปิดหน้าสาธารณะแล้วคลิก Extract this page
เลือกระดับในป๊อปอัปแล้วเริ่มการดึงดีไซน์ ความคืบหน้าจะแสดงในป๊อปอัประหว่างทำงาน และคุณท่องเว็บต่อได้
เปิด DESIGN.md
Open result จะพาคุณไปยัง DESIGN.md บนเว็บไซต์ ไฟล์ยังถูกบันทึกในหน้าการดึงดีไซน์ของฉัน ซึ่งคุณคัดลอก ดาวน์โหลด หรือแก้ไขได้ก่อนนำไปวางใน repo
รายละเอียดการติดตั้ง การเข้าสู่ระบบ เครดิต และข้อจำกัดปัจจุบันอยู่ในคู่มือการตั้งค่าส่วนขยาย ถ้าชอบวาง URL มากกว่า การดึงดีไซน์แบบเดียวกันทำได้จากหน้าแรก
เปรียบเทียบ
สิ่งที่มีเพิ่มเมื่อเทียบกับ DESIGN.md Style Extractor ของ TypeUI
DESIGN.md Style Extractor ของ TypeUI เป็นส่วนขยายฟรีแบบโอเพนซอร์สที่เติมสไตล์ของหน้าในแท็บของคุณลงในเทมเพลตของ TypeUI เอง ส่วนขยายของ Design Extractor เพิ่มสิ่งต่อไปนี้:
DESIGN.md ที่เป็นไปตามสเปกของ Google
โทเค็นอยู่ใน YAML front matter และส่วนมาตรฐานเรียงตามลำดับของสเปก ตรวจสอบไฟล์ใดก็ได้ด้วยตัวตรวจสอบ DESIGN.mdฟรี
สูตรสำหรับทุกคอมโพเนนต์ที่เลือก
HTML และ CSS ที่กลั่นกรองแล้วสำหรับ header ปุ่ม ช่องกรอกข้อมูล การ์ด และอื่น ๆ แต่ละตัวตรวจสอบเทียบกับเว็บไซต์จริงด้วยการจับคู่โครงสร้างและการเปรียบเทียบระดับพิกเซล หรือแจ้งเตือนพร้อมเหตุผล
เว็บไซต์ที่จำกัดภูมิภาค
เมื่อเว็บไซต์บล็อกผู้เข้าชมจากบางประเทศ การดึงดีไซน์สามารถทำผ่านเบราว์เซอร์ในประเทศอื่นได้ การดึงดีไซน์ผ่านประเทศอื่นมีค่าใช้จ่ายเท่ากับราคาระดับ Pro บวกค่าธรรมเนียมเพิ่ม 6 เครดิต (16 เครดิต)
บัญชีและเครดิตเดียวกับบนเว็บไซต์
การดึงดีไซน์ทุกครั้งจะถูกบันทึกในหน้าการดึงดีไซน์ของฉัน ซึ่งคุณแก้ไข คัดลอก หรือดาวน์โหลดได้ และเอเจนต์ของคุณอ่านได้ผ่าน MCP
ตรวจสอบเมื่อ เทียบกับเวอร์ชัน 0.4.0 README และซอร์สโค้ด และหน้ารายการใน Chrome Web Storeของส่วนขยายนั้น
| ด้าน | Design Extractor | TypeUI DESIGN.md Style Extractor |
|---|---|---|
| วิธีอ่านเว็บไซต์ | เซิร์ฟเวอร์ของเราเปิดที่อยู่ของหน้าในเบราว์เซอร์และวิเคราะห์หน้าที่เรนเดอร์แล้ว ระดับ Pro ยังเก็บตัวอย่างจากหน้าสำคัญของเว็บไซต์ด้วย | อ่านสไตล์ที่คำนวณแล้วขององค์ประกอบที่มองเห็นได้สูงสุด 280 รายการบนหน้าที่เปิดในแท็บของคุณ ภายในเบราว์เซอร์ของคุณ |
| ผลลัพธ์เป็นไปตามอะไร | สเปก DESIGN.md ของ Google: โทเค็นอยู่ใน YAML front matter และส่วนมาตรฐานเรียงตามลำดับของสเปก | เทมเพลต DESIGN.md ของ TypeUI เอง (Mission, Brand, Style Foundations, Rules และอื่น ๆ) ที่ไม่มี YAML front matter หรือจะเป็นไฟล์ SKILL.md ก็ได้ |
| คอมโพเนนต์ | สูตร HTML และ CSS ที่กลั่นกรองแล้วสำหรับแต่ละคอมโพเนนต์ที่เลือกจากหน้าเว็บ ตรวจสอบเทียบกับเว็บไซต์จริงด้วยการจับคู่โครงสร้างและการเปรียบเทียบระดับพิกเซล หรือแจ้งเตือนพร้อมเหตุผล | จำนวนนับต่อประเภทคอมโพเนนต์ ภายใต้แนวทางคอมโพเนนต์ทั่วไป ผลลัพธ์ไม่ได้ถูกเปรียบเทียบกับหน้าที่เรนเดอร์ |
| ผลลัพธ์ไปอยู่ที่ไหน | บันทึกในหน้าการดึงดีไซน์ของฉันบนเว็บไซต์ ซึ่งคุณแก้ไข คัดลอก หรือดาวน์โหลดได้ | แสดงในป๊อปอัป ซึ่งคุณคัดลอกหรือดาวน์โหลดเป็นไฟล์ได้ |
| หน้าที่อ่านได้ | เฉพาะหน้าสาธารณะ หน้าที่ต้องล็อกอิน หน้าบน localhost หรือบนเครือข่ายส่วนตัวยังไม่รองรับ | หน้าที่เปิดในแท็บของคุณ รวมถึงหน้าที่คุณเข้าสู่ระบบอยู่ เพราะอ่านหน้านั้นโดยตรง |
| ราคา | ติดตั้งฟรี การดึงดีไซน์ใช้เครดิตแบบเติมล่วงหน้า | ฟรีและโอเพนซอร์ส (MIT) |
เลือกส่วนขยายของ Design Extractor หากคุณต้องการ DESIGN.md ที่เป็นไปตามสเปกของ Google พร้อมสูตรสำหรับแต่ละคอมโพเนนต์ที่ตรวจสอบเทียบกับเว็บไซต์จริง และบันทึกไว้ในบัญชีของคุณ การเปรียบเทียบฉบับเต็มอยู่ที่ TypeUI vs Design Extractor
FAQ
คำถามเกี่ยวกับส่วนขยาย Chrome
คำตอบสั้น ๆ เกี่ยวกับการติดตั้งส่วนขยาย สิ่งที่ส่วนขยายส่ง และค่าใช้จ่าย
ติดตั้งฟรี การดึงดีไซน์แต่ละครั้งใช้เครดิตจากยอดคงเหลือแบบเติมล่วงหน้า ในราคาเดียวกับบนเว็บไซต์ แพ็กเริ่มต้นที่ US$5 สำหรับ 50 เครดิต ไม่มีค่าบริการรายเดือน และเครดิตไม่มีวันหมดอายุ หากการดึงดีไซน์ล้มเหลวจากฝั่งเรา เครดิตจะถูกคืนให้
ส่งเฉพาะที่อยู่ของแท็บปัจจุบันและระดับที่คุณเลือก เมื่อคุณคลิก Extract this page ส่วนขยายไม่เคยอ่านเนื้อหาของหน้าเว็บ ไม่ทำงานเบื้องหลังบนหน้าที่คุณเข้าชม และไม่มีระบบวิเคราะห์ข้อมูล (analytics)
ยังไม่ได้ เซิร์ฟเวอร์ของเราบันทึกหน้าเว็บจากที่อยู่ของหน้า หน้าเว็บจึงต้องเป็นหน้าสาธารณะ หน้าที่ต้องล็อกอิน หน้าบน localhost หรือบนเครือข่ายส่วนตัวไม่รองรับ ส่วนขยายมีให้ใช้เฉพาะบน Chrome เท่านั้น
ไม่ต้อง ป๊อปอัปใช้เซสชันเดียวกับที่คุณเข้าสู่ระบบไว้บน design-extractor.com หากยังไม่ได้เข้าสู่ระบบ ป๊อปอัปจะแสดงปุ่ม Sign in ที่เปิดเว็บไซต์ การออกจากระบบในป๊อปอัปจะออกจากระบบบนเว็บไซต์ด้วย
เอเจนต์ทุกตัวที่อ่านไฟล์จาก repo ของคุณ บันทึก DESIGN.md ไว้ข้างโค้ดของคุณ แล้วบอก Claude Code, Cursor, GitHub Copilot, Codex, Windsurf หรือ Google Stitch ให้ใช้เป็นแนวทางด้านสไตล์สำหรับ UI ใหม่
ส่วนขยายอย่าง DESIGN.md Style Extractor ของ TypeUI อ่านสไตล์ที่คำนวณแล้วในเบราว์เซอร์ของคุณ และเติมค่าลงในเทมเพลตของตัวเอง Design Extractor เขียน DESIGN.md ที่เป็นไปตามสเปกของ Google พร้อมสูตร HTML และ CSS สำหรับแต่ละคอมโพเนนต์ที่เลือกจากหน้าเว็บ ตรวจสอบเทียบกับเว็บไซต์จริงหรือแจ้งเตือนพร้อมเหตุผล และบันทึกไว้ในบัญชีของคุณ
ดึง DESIGN.md จากแท็บที่คุณเปิดอยู่
ติดตั้งฟรี การดึงดีไซน์แต่ละครั้งใช้เครดิตจากยอดคงเหลือแบบเติมล่วงหน้า ในราคาเดียวกับบนเว็บไซต์