ให้เอเจนต์เขียนโค้ดดึงสเปกดีไซน์ได้ตามต้องการด้วย MCP

เอเจนต์ได้อะไร#

เชื่อมต่อเซิร์ฟเวอร์#

เลือกไคลเอนต์ของคุณ Claude Code, Codex, claude.ai, Claude Desktop และ ChatGPT เข้าสู่ระบบด้วยบัญชีของคุณ ส่วน Cursor และสคริปต์ใช้ API key

/plugin marketplace add Magentix-Studio/design-extractor-plugin
/plugin install design-extractor@design-extractor

codex plugin marketplace add Magentix-Studio/design-extractor-plugin
codex plugin add design-extractor@design-extractor

เครื่องมือและลำดับการเรียกใช้#

การดึงดีไซน์ใช้เวลาอย่างน้อยหนึ่งนาที ลำดับจึงเป็นเริ่ม แล้วตรวจสอบเป็นระยะ เซิร์ฟเวอร์บอกเอเจนต์เองอยู่แล้ว คุณแค่ระบุชื่อเว็บไซต์

1. list_my_extractions    is the site already there?
2. extract_design         url and tier PRO
3. wait about 60 seconds
4. get_extraction         site name, every 25 seconds until COMPLETED
5. save the DESIGN.md text and build from it

ตัวอย่างจริง: Supabase#

---
name: Supabase
colors:
  primary: "#0E7E4E"
  primary-fill: "#007243"
  primary-deep: "#15593B"
  focus-ring: "#30BA79"
  brand: "#3FCF8E"
  brand-tint: "#A9F1CA"
typography:
  hero-display:
    fontFamily: Manrope
    fontSize: 46px
    fontWeight: 500
    lineHeight: 1
    letterSpacing: normal
  body:
    fontFamily: Inter
    fontSize: 16px
    fontWeight: 450
    lineHeight: 1.5
    letterSpacing: normal
rounded:
  xs: 2.66667px
  sm: 4px
  md: 5.33333px
---

ใต้โทเค็นเป็นส่วนต่าง ๆ ที่เอเจนต์อ่านเพื่อดูกฎและสูตร: Overview, Colors, Typography, Layout, Elevation & Depth, Shapes, Components, Do's and Don'ts, Responsive Behavior, Iteration Guide, Known Gaps ส่วน Components เพียงส่วนเดียวมีสูตร 49 สูตรใน HTML และ CSS เอเจนต์จึงสร้างปุ่มหรือการ์ดจากค่าที่วัดได้แทนการเดา

พรอมต์#

Use the design-extractor tools to get a Pro DESIGN.md of supabase.com.
Check list_my_extractions first, so we don't pay twice for a recent run.
When it is complete, save it as DESIGN.md in the repo root.
Then restyle src/app/settings with its color, typography and rounded tokens
and its component recipes. Keep the layout and logic as they are.

Get Pro DESIGN.md files for supabase.com and linear.app with the design-extractor tools.
Compare their primary colors, fonts and radii in a short table,
and tell me which one fits a dense admin dashboard better and why.

เครดิตและข้อจำกัด#

• เครดิตเดียวกับบนเว็บไซต์ การดึงดีไซน์ระดับ Pro ใช้ 10 เครดิต ไม่ว่าคุณจะเริ่มบนเว็บไซต์หรือเอเจนต์เป็นผู้เริ่ม เติมเครดิตได้ที่ราคา
• ไม่เรียกเก็บซ้ำสำหรับการดึงดีไซน์ล่าสุดของคุณเอง การขอเว็บไซต์ที่คุณเพิ่งดึงดีไซน์ไปไม่นานจะนำการดึงดีไซน์นั้นกลับมาใช้
• เฉพาะหน้าสาธารณะ หน้าที่ต้องล็อกอิน หน้าบน localhost หรือบนเครือข่ายส่วนตัวไม่รองรับ
• คีย์ มี API key ที่ใช้งานอยู่ได้สูงสุดห้าคีย์ แต่ละคีย์ใช้ได้หนึ่งปีและเพิกถอนได้ในหน้าบัญชีของคุณ ไคลเอนต์ที่เข้าสู่ระบบแล้วจะต่ออายุโทเค็นเอง ยกเลิกการเชื่อมต่อได้ในหน้าเดียวกัน

ไฟล์ที่ใช้ในคู่มือนี้#

อยากเห็นไฟล์ฉบับเต็มก่อนเชื่อมต่อใช่ไหม หน้าแกลเลอรีเหล่านี้มี DESIGN.md ฉบับสมบูรณ์ที่เอเจนต์ของคุณจะได้รับเมื่อดึงดีไซน์ของแต่ละเว็บไซต์

• 
  เครื่องมือนักพัฒนาและโครงสร้างพื้นฐาน · Developer Tools & IDEs

  Supabase

  Supabase ใช้ระบบดีไซน์แบบ dark-first ที่วางอยู่บนพื้นหลังสีดำเกือบสนิทลึก (oklch ~0.19) และมีสีเขียวสดใสเป็นสีเน้นของแบรนด์ (#3ecf8e / #3fcf8e) โครงหน้าจัดเป็นกริดการ์ดฟีเจอร์ที่ตอบสนองต่อขนาดจอ โดยใช้ Manrope สำหรับหัวข้อหลัก และ Inter สำหรับเนื้อหาและส่วนติดต่อผู้ใช้ ส่วนที่เป็นโค้ดและแบบอักษรขนาดเท่ากันทั้งหมดใช้ Source Code Pro ระบบสีสร้างจาก custom properties ของ oklch และตั้งชื่อตามหน้าที่ความหมาย การ์ดมีมุมโค้ง 12px พร้อมกรอบเส้นบางๆ ปุ่มมีมุมโค้ง 6–8px และความหนาแน่นของเนื้อหาอยู่ในระดับปานกลาง โดยอิงระบบระยะห่างฐาน 8px

• 
  AI และ Machine Learning · AI Products & Assistants

  Anthropic

  Design system ของ Anthropic เป็นอัตลักษณ์ที่เรียบง่ายและเน้นงานตัวอักษรเป็นหลัก โดยอาศัยฟอนต์ที่ออกแบบเองสองแบบคือ Anthropic Serif และ Anthropic Sans วางบนพื้นหลังสีงาช้างอุ่น (#faf9f5) โทนสีถูกจำกัดอย่างตั้งใจ ใช้สีดำเกือบสนิท (#141413) บนพื้นขาวนวลอุ่น และใช้โทนหินสีเทาอ่อนที่ลดความเข้มลงสำหรับข้อความรองและเส้นขอบ ตัวอักษรดิสเพลย์ขนาดใหญ่แบบ serif ทำหน้าที่เป็นหลักของน้ำเสียงแบบบทความ ขณะที่ส่วนแผงสีเข้ม (พื้นหลังสีดำเกือบสนิทพร้อมข้อความสีงาช้าง) สร้างความตัดกันที่โดดเด่น โดยรวมแล้วสไตล์นี้สื่อถึงความจริงจังทางปัญญาและพันธกิจที่ให้ความปลอดภัยเป็นอันดับแรก ผ่านพื้นที่ว่างที่เพียงพอ ความต่างของตัวอักษรที่สูง และการไม่มีลวดลายตกแต่งใดๆ

• 
  เครื่องมือนักพัฒนาและโครงสร้างพื้นฐาน · Developer Tools & IDEs

  Railway

  Design system ของ Railway เป็น UI สำหรับแพลตฟอร์มนักพัฒนาที่ออกแบบให้ใช้โหมดมืดเป็นหลัก โดยยึดพื้นผิวสีน้ำเงินเข้มเกือบดำ (#13111c, #0b0b0f) ข้อความสีขาวนวลที่คมชัด (#f7f7f8) และสีเน้นสีม่วงที่โดดเด่น (#853bce / #553f83) ส่วนฮีโร่ใช้ฟอนต์ IBM Plex Serif เพื่อให้ดูเป็นงานเชิงบรรณาธิการ ขณะที่ Inter ใช้กับข้อความ UI ทั้งหมด และ JetBrains Mono / SF Mono ใช้กับส่วนโค้ด การยกระดับองค์ประกอบทำผ่านขอบเรืองแสงสีขาวแบบ inset (rgba(255,255,255,0.2) 1.5px inset) แทนเงาตก ทำให้ UI มีบุคลิกแบบแผงกระจก ระบบระยะห่างอิงหน่วย 4px โดยจังหวะหลัก 8/12/16/24/32 ส่วนมุมโค้งค่อนข้างแคบ โดยใช้ 4px เป็นหลัก และใช้ 8px กับ 16px เฉพาะการ์ดและกล่องฮีโร่

ดูตัวอย่าง DESIGN.md ทั้งหมด