ตัวสร้าง DESIGN.md

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

ตัวสร้างสร้าง DESIGN.md อย่างไร

  1. ใส่ URL ของเว็บไซต์

    ใช้หน้าสาธารณะใดก็ได้ เช่น เว็บไซต์การตลาด เว็บไซต์เอกสาร หรือหน้าแรกของเว็บแอป สมัครสมาชิกก่อน การดึงดีไซน์แต่ละครั้งใช้เครดิตจากแพ็กแบบเติมล่วงหน้า

  2. ตัวสร้างอ่านเว็บไซต์

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

  3. คุณได้รับ DESIGN.md

    โทเค็นอยู่ใน YAML front matter ส่วนกฎการใช้งานอยู่ใน Markdown ได้แก่ Overview, Colors, Typography, Layout, Elevation and Depth, Shapes, Components และ Do's and Don'ts คัดลอก ดาวน์โหลด หรือแก้ไขได้ในหน้าการดึงดีไซน์ของฉัน

ตัวอย่างผลลัพธ์: DESIGN.md ของ Anthropic

ตัวอย่างบางส่วนของไฟล์ที่ตัวสร้างสร้างจาก anthropic.com ตัดเหลือไม่กี่โทเค็นต่อกลุ่มและส่วนต้นของ Overview ไฟล์ฉบับเต็มยังครอบคลุม เลย์เอาต์ ระดับความลึก (elevation) รูปทรง คอมโพเนนต์ และสิ่งที่ควรทำและไม่ควรทำด้วย

DESIGN.md
---
version: alpha
name: Anthropic
colors:
  primary: "#141413"
  on-primary: "#FAF9F5"
  ink: "#141413"
  body-muted: "#5E5D59"
  surface: "#FAF9F5"
  surface-alt: "#F0EEE6"
  hairline: "#D1CFC5"
typography:
  hero-display:
    fontFamily: Anthropic Serif
    fontSize: 68.3429px
    fontWeight: 400
    lineHeight: 1.1
  body:
    fontFamily: Anthropic Serif
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.4
rounded:
  sm: 8px
  md: 12px
  lg: 16px
spacing:
  base: 4px
  section-padding-y: 48px
---

## Overview

Anthropic's site reads like a well-set research journal printed on warm
paper. The canvas is **Parchment** (`surface`, #FAF9F5), text is a
near-black **Ink** (`ink`, #141413), and there is no saturated brand hue
at all.

ดู DESIGN.md ฉบับเต็มของ Anthropicดูตัวอย่าง DESIGN.md เพิ่มเติม

FAQ

คำถามเกี่ยวกับตัวสร้าง DESIGN.md

ตัวสร้างสร้างอะไร มีค่าใช้จ่ายเท่าไร และใช้ไฟล์กับเอเจนต์เขียนโค้ดของคุณอย่างไร

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

ทำไม่ได้ด้วยตัวสร้าง เพราะตัวสร้างสร้างไฟล์จากเว็บไซต์สาธารณะที่ใช้งานจริง หากคุณออกแบบตั้งแต่ศูนย์ ให้เขียน DESIGN.md เองตามสเปก แล้วตรวจสอบโครงสร้างและโทเค็นด้วยตัวตรวจสอบ DESIGN.md ฟรี

เว็บไซต์สาธารณะใดก็ได้ที่เข้าถึงได้ผ่าน HTTP หรือ HTTPS รวมถึงเว็บไซต์แบบ static, single-page app และหน้าที่เรนเดอร์ฝั่งเซิร์ฟเวอร์ หน้าที่ต้องล็อกอิน หน้าบน localhost หรือบนเครือข่ายส่วนตัวไม่รองรับ และบางเว็บไซต์บล็อกเบราว์เซอร์อัตโนมัติ

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

บันทึกเป็น DESIGN.md ไว้ที่ root ของโปรเจกต์หรือในโฟลเดอร์ docs แล้วอ้างถึงในพรอมต์ Claude Code, Cursor, GitHub Copilot, Windsurf และเอเจนต์อื่น ๆ ที่เข้าถึงไฟล์ได้จะอ่านไฟล์นี้เป็นแนวทางด้านสไตล์ เอเจนต์ยังเรียกใช้ตัวสร้างเองได้ผ่านเซิร์ฟเวอร์ MCP ของ Design Extractor

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