เอกสาร

Design Extractor ทำงานอย่างไร

วาง URL แล้วรับสเปกดีไซน์ที่มีโครงสร้าง ทั้งสี ตัวอักษร ระยะห่าง และคอมโพเนนต์ใน DESIGN.md ที่คุณวางลงใน repo ได้เลย

DESIGN.md คืออะไร

DESIGN.md คือเอกสารระบบดีไซน์แบบข้อความล้วนที่ทั้งคนและเอเจนต์ AI อ่านได้ ให้นึกถึงว่าเป็นคู่หูฝั่งดีไซน์ของ AGENTS.md โดยที่ AGENTS.md บอกเอเจนต์ว่าจะสร้างโปรเจกต์อย่างไร ส่วน DESIGN.md บอกว่าโปรเจกต์ควรมีหน้าตาและความรู้สึกอย่างไร

ภายใน DESIGN.md ทุกไฟล์มีสองชั้น ได้แก่ YAML front matter ที่มีดีไซน์โทเค็นที่เครื่องอ่านได้ และเนื้อหา Markdown ที่อธิบายเหตุผลด้านดีไซน์ โทเค็นให้ค่าที่แม่นยำแก่เอเจนต์ ส่วนข้อความอธิบายบอกว่าค่าเหล่านั้นมีไว้เพราะอะไร

อ่านสเปก DESIGN.md ฉบับเต็ม ->

ส่วนมาตรฐาน

  • Overview
  • Colors
  • Typography
  • Layout
  • Elevation & Depth
  • Shapes
  • Components
  • Do's and Don'ts

วิธีการทำงาน

  1. อินพุต

    วาง URL สาธารณะ (เช่น design-extractor.com)

  2. การดึงดีไซน์

    ระบบจะ crawl หน้าเว็บ วิเคราะห์คุณสมบัติด้านภาพ ได้แก่ สี ตัวอักษร ระยะห่าง รูปแบบคอมโพเนนต์ และภาษาการออกแบบโดยรวม

  3. เอาต์พุต

    DESIGN.md หนึ่งไฟล์ที่มี:

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

เอาต์พุต

การดึงดีไซน์แต่ละครั้งให้ DESIGN.md หนึ่งไฟล์

Markdown

  • DESIGN.md รูปแบบ DESIGN.md มาตรฐานเปิดตัวโดย Google Stitch วางลงใน repo ใดก็ได้เพื่อให้เอเจนต์ AI นำไปใช้

ส่วนขยาย Chrome

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

หัวใจสำคัญ

เอเจนต์ AI สร้างงานดีไซน์ได้ดีขึ้นเมื่อได้รับทั้งโทเค็นที่แม่นยำและเหตุผลที่คนอ่านเข้าใจได้ YAML front matter ให้ค่าที่แน่นอน ส่วนเนื้อหา Markdown อธิบายว่าควรใช้ค่าเหล่านั้นอย่างไรในทางปฏิบัติ

พร้อมลองแล้วใช่ไหม

รับ DESIGN.md จาก URL สาธารณะใดก็ได้ การดึงดีไซน์แต่ละครั้งใช้เวลาอย่างน้อยหนึ่งนาที

ดึงดีไซน์เว็บไซต์