ให้ Claude Code และ Cursor สร้าง UI ที่เหมือนเว็บไซต์ต้นแบบ

ทำไม DESIGN.md ดีกว่าภาพหน้าจอ#

ขั้นตอน#

1. 1

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

   หน้าจอผลิตภัณฑ์ที่มีความหนาแน่นใกล้เคียงกันใช้ได้ดีกว่าหน้า landing ที่มี hero ขนาดใหญ่ หากคุณกำลังสร้างแดชบอร์ด ให้เลือกผลิตภัณฑ์ที่มีแดชบอร์ด ดูในแกลเลอรี DESIGN.mdก่อน ไฟล์อาจมีอยู่แล้ว

2. 2

   รับ DESIGN.md ของเว็บไซต์นั้น

   คัดลอกจากหน้าแกลเลอรี หรือวาง URL ในหน้าแรกของ Design Extractor แล้วเริ่มการดึงดีไซน์ระดับ Pro ระดับ Pro เก็บตัวอย่างจากหน้าสำคัญของเว็บไซต์ และใช้เวลาอย่างน้อยหนึ่งนาที

3. 3

   บันทึกเป็น DESIGN.md ที่ root ของ repository

   วางไว้ข้าง README.md และ AGENTS.md แล้ว commit เพื่อให้ทุก branch และเอเจนต์ของเพื่อนร่วมทีมทุกคนอ่านไฟล์เดียวกัน

4. 4

   บอกเอเจนต์ให้ใช้ไฟล์นี้

   เพิ่มข้อความอ้างอิงสั้น ๆ ใน CLAUDE.md สำหรับ Claude Code หรือ project rule สำหรับ Cursor บล็อกต่าง ๆ อยู่ด้านล่าง

5. 5

   ขอ UI โดยใช้คำศัพท์ของไฟล์

   ระบุชื่อโทเค็นและคอมโพเนนต์ในพรอมต์ (primary, body-md, สูตรปุ่ม) และขอให้เอเจนต์แจ้งค่าที่หาไม่พบแทนการคิดขึ้นเอง

6. 6

   รีวิวผลลัพธ์เทียบกับไฟล์

   ตรวจสอบสี ฟอนต์ ความโค้งมุม และสถานะเทียบกับ DESIGN.md ก่อนยอมรับการเปลี่ยนแปลง

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

---
name: Linear
colors:
  primary: "#5E6AD2"
  canvas: "#08090A"
  surface: "#121414"
  surface-raised: "#1C1C1F"
  ink: "#F7F8F8"
  ink-secondary: "#D0D6E0"
  muted: "#8A8F98"
  subtle: "#62666D"
typography:
  hero-display:
    fontFamily: Inter Variable
    fontSize: 72px
    fontWeight: 510
    lineHeight: 1
    letterSpacing: -1.584px
  body-lg:
    fontFamily: Inter Variable
    fontSize: 17px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: normal
rounded:
  xs: 2px
  sm: 4px
  sm-2: 4.4625px
  md: 5px
---

บอกเอเจนต์ให้ใช้ไฟล์นี้#

## Design
Follow DESIGN.md in the repository root for every UI change.
Use its color, typography, rounded and component tokens instead of inventing values.
Before you build a button, card or input, read its recipe in the Components section.

---
description: Follow DESIGN.md for every UI change
alwaysApply: true
---
Follow DESIGN.md in the repository root for every UI change.
Use its color, typography, rounded and component tokens instead of inventing values.
Before you build a button, card or input, read its recipe in the Components section.

พรอมต์ที่ใช้โทเค็น#

Build a pricing page with three plan cards. Follow DESIGN.md:
- use primary (#5E6AD2) only where the file says it belongs
- set headings in hero-display and body copy in body-lg
- reuse the button-ghost recipe for the plan buttons, with its hover and focus states
- start the plan cards from the card recipe
List any value you could not find in DESIGN.md instead of inventing one.

@DESIGN.md Restyle the settings form in src/app/settings to match this file.
Take colors, type and radii from the tokens and inputs and buttons from the component recipes.
Keep the existing layout and logic, and list any value you could not find in the file.

รีวิวสิ่งที่เอเจนต์สร้าง#

• สี ค้นหาค่า hex ใน diff ทุกค่าควรอยู่ใน DESIGN.md ค่าใหม่มักหมายความว่าเอเจนต์เดาเอง
• ฟอนต์ หลายแบรนด์ใช้ฟอนต์เชิงพาณิชย์ที่คุณนำไปใช้ไม่ได้ ส่วน Typography ของไฟล์มักระบุฟอนต์โอเพนซอร์สที่ใช้แทนได้ ตรวจสอบว่าเอเจนต์โหลดฟอนต์นั้น ไม่ใช่ฟอนต์สำรองแบบสุ่ม
• ความโค้งมุมและระยะห่าง ปุ่มและการ์ดควรใช้โทเค็น rounded ของไฟล์ ไม่ใช่ค่าเริ่มต้นอย่าง 8px ทุกที่
• สถานะ สไตล์ hover และ focus เป็นส่วนหนึ่งของสูตรคอมโพเนนต์แต่ละตัว กด Tab ไล่ไปทั่วหน้าแล้วตรวจสอบ focus ring
• สูตรที่ถูกแจ้งเตือน หากไฟล์ทำเครื่องหมายว่าสูตรถูกแจ้งเตือน (flagged) รูปทรงของสูตรนั้นเป็นค่าประมาณ ให้เปรียบเทียบคอมโพเนนต์นั้นกับเว็บไซต์จริง

หากคุณแก้ไข DESIGN.md เอง ให้ตรวจสอบด้วยตัวตรวจสอบ DESIGN.mdฟรีก่อนให้เอเจนต์อ่านอีกครั้ง

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

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

• 
  ซอฟต์แวร์และ SaaS · Productivity & Notes

  Linear

  Design ของ Linear เป็นระบบที่เน้นโหมดมืดเป็นหลัก เป็นอินเทอร์เฟซผลิตภัณฑ์ที่มีความหนาแน่นของข้อมูลสูง ออกแบบมาสำหรับทีมวิศวกร ชุดสีพื้นผิวอิงกับสีดำเกือบสนิท (#08090a, #0f1011) พร้อมเฉดสีเทาเข้มที่ซ้อนกันเป็นชั้นเพื่อแยกแถบข้าง การ์ด และแผงต่าง ๆ การจัดตัวอักษรใช้ Inter Variable เพียงอย่างเดียว โดยปรับระยะห่างตัวอักษรให้แคบลงอย่างแม่นยำในขนาดตัวอักษรใหญ่ และใช้ Berkeley Mono สำหรับโค้ดแบบอินไลน์ ภาษาของการขอบมุมถูกกำหนดให้เล็กโดยตั้งใจ ส่วนใหญ่อยู่ที่ 2–6px ขณะที่รูปทรงแคปซูลสงวนไว้สำหรับป้ายกำกับและชิปสถานะ การยกระดับของวัตถุแสดงผ่านเส้นขอบ inset 1px ที่แผ่วเบาและเงาตกกระทบความทึบต่ำ มากกว่าการซ้อนชั้นที่โดดเด่น สีปุ่มเรียกให้ดำเนินการหลักคือสีคราม #5e6ad2 ซึ่งเป็นเอกลักษณ์ของ Linear ใช้กับปุ่ม Sign Up และลิงก์สำคัญ

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

  Stripe

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

• 
  เครื่องมือนักพัฒนาและโครงสร้างพื้นฐาน · 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 ทั้งหมด