กำลังสร้างเว็บไซต์ใหม่? ดึงระบบดีไซน์ออกมาก่อน

ควรทำเมื่อไร#

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

ขั้นตอน#

1. 1

   ดึงดีไซน์จากเว็บไซต์จริงก่อนเปลี่ยนแปลงอะไร

   วาง URL ของ production ในหน้าแรกของ Design Extractor แล้วเริ่มการดึงดีไซน์ระดับ Pro ต้องเป็นหน้าสาธารณะ เพราะการดึงดีไซน์โหลดหน้าเว็บเหมือนผู้เข้าชม localhost และหน้าที่ต้องล็อกอินจึงใช้ไม่ได้

2. 2

   commit เป็นข้อมูลพื้นฐาน

   บันทึกเป็น DESIGN.md ใน repository ใหม่ แล้ว commit ก่อนเริ่มสร้างใหม่ ตอนนี้ไฟล์บันทึกว่าเว็บไซต์มีหน้าตาอย่างไรในวันนั้น

3. 3

   อ่านส่วน Known Gaps

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

4. 4

   ตรวจสอบสิ่งที่ DESIGN.md เก็บไม่ได้

   asset หน้าจอที่ต้องล็อกอิน motion และรายการอื่นด้านล่าง เพิ่มหมายเหตุลงในไฟล์ไปพร้อมกัน

5. 5

   สร้างโดยอิงจากไฟล์นี้

   บอกเอเจนต์เขียนโค้ดให้ใช้ไฟล์นี้ ตามที่คู่มือ Claude Code และ Cursorแสดงไว้ แล้วรีวิวหน้าจอใหม่แต่ละหน้าเทียบกับไฟล์

สิ่งที่ไฟล์เก็บไว้ได้จาก Stripe#

สิ่งที่ไฟล์ระบุว่าพลาดไป

ไฟล์บอกข้อจำกัดของตัวเองอย่างตรงไปตรงมา 5 รายการแรกจากทั้งหมด 11 รายการในส่วน Known Gaps:

## Known Gaps

- **Many recipes did not reproduce exactly.** `button-primary` (84% pixel match), `card` (78%), `card-2` (94%), `promo-banner` (77%) and `skip-link` (0%; it is visually hidden until focused) are approximations. So are several header and footer recipes (`header-landing`, `header-inner-2` timed out, `footer-landing`, `footer-inner`, `footer-inner-2`).
- **Some recipes could not be judged at all.** `stat` and `stat-2` were not verifiable, because page media covered most of the element.
- **Some elements were never visible.** `footer-landing`, `header-inner` and `logo-strip-item` were not visible when verification ran, so their values come from computed styles only.
- **No section rhythm was measured.** `sectionRhythm` is empty, so vertical spacing between page sections and the inner padding of large cards is described only qualitatively.
- **No `base` spacing step was published.** The evidence frequency (4px, 8px, 12px, 16px and 24px most common) suggests a 4px-derived grid, but it is not a verified token.

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

สิ่งที่ต้องตรวจสอบด้วยตัวเอง#

หลังสร้างใหม่#

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

เปิดดูเพื่อเห็น DESIGN.md ฉบับเต็ม ตั้งแต่โทเค็นด้านบนจนถึง Known Gaps ด้านท้าย

• 
  การเงินและฟินเทค

  Stripe

  Stripe ใช้ระบบออกแบบที่ควบคุมอย่างเข้มงวด (HDS — Stripe Design System) ซึ่งสร้างขึ้นจากฟอนต์แบบ variable "sohne-var" ที่ใช้น้ำหนักบาง (300–400) และชุดสีแบรนด์ตั้งแต่กรมท่าเข้มไปจนถึงม่วงคราม โดยมี #533afd (Stripe Indigo) เป็นสีหลัก พร้อมส่วน hero ที่เป็นพื้นหลังไล่เฉดสเปกตรัมเต็มพื้นที่ซึ่งเป็นเอกลักษณ์ของแบรนด์ คอมโพเนนต์ใช้มุมโค้งน้อย (4–6px) เงาแบนหรือเงาน้อยที่สุด และจัดวางตามกริดระยะห่างฐาน 8px โดยรวมให้น้ำเสียงที่น่าเชื่อถือแต่เข้าถึงง่าย สื่อถึงโครงสร้างพื้นฐานทางการเงินผ่านงานตัวอักษรที่มั่นใจและการใช้สีอย่างประหยัด

• 
  ธุรกิจและบริการวิชาชีพ

  Shopify

  Shopify ใช้หน้าแรกการตลาดที่มีส่วนฮีโร่เป็นวิดีโอเต็มความกว้างอย่างโดดเด่น โดยมีพื้นหลังสีดำเกือบสนิท (#02090a) ที่ตัดกับแถบนำทางสีขาวด้านบนอย่างชัดเจน สีเน้นหลักของแบรนด์คือสีเขียวมิ้นต์สด (#36f4a4) ซึ่งใช้อย่างประหยัดสำหรับจุดเด่นและสถานะการโต้ตอบ ตัวอักษรแบ่งเป็นสองแบบ คือ NeueHaasGrotesk สำหรับหัวข้อตัวใหญ่และหัวข้อแบบบรรณาธิการ และ Inter-Variable สำหรับเนื้อหาส่วนการใช้งาน ปุ่มเรียกให้ดำเนินการใช้รูปทรงแคปซูลโค้งมนเต็มที่ (border-radius: 9999px) ภาพรวมของระบบดีไซน์นี้มั่นใจ มีคอนทราสต์สูง และมุ่งสร้างแรงบันดาลใจ ออกแบบมาเพื่อเปลี่ยนผู้เข้าชมให้เป็นผู้ขาย

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

  Supabase

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

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