DESIGN.md คืออะไร

DESIGN.md มาจากไหน#

โครงสร้างของไฟล์ DESIGN.md#

---
name: DevFocus Dark
colors:
  primary: "#2665fd"
  secondary: "#475569"
  surface: "#0b1326"
  on-surface: "#dae2fd"
  error: "#ffb4ab"
typography:
  body-md:
    fontFamily: Inter
    fontSize: 16px
    fontWeight: 400
rounded:
  md: 8px
---

# Design System

## Overview
A focused, minimal dark interface for a developer productivity tool.
Clean lines, low visual noise, high information density.

## Colors
- **Primary** (#2665fd): CTAs, active states, key interactive elements
- **Secondary** (#475569): Supporting UI, chips, secondary actions
- **Surface** (#0b1326): Page backgrounds
- **On-surface** (#dae2fd): Primary text on dark backgrounds
- **Error** (#ffb4ab): Validation errors, destructive actions

## Typography
- **Headlines**: Inter, semi-bold
- **Body**: Inter, regular, 14-16px
- **Labels**: Inter, medium, 12px, uppercase for section headers

## Components
- **Buttons**: Rounded (8px), primary uses brand blue fill
- **Inputs**: 1px border, subtle surface-variant background
- **Cards**: No elevation, relies on border and background contrast

## Do's and Don'ts
- Do use the primary color sparingly, only for the most important action
- Don't mix rounded and sharp corners in the same view
- Do maintain 4:1 contrast ratio for all text

แปดส่วนมาตรฐาน#

เนื้อหา Markdown ใช้หัวข้อ ## ส่วนที่ไม่เกี่ยวข้องตัดออกได้ แต่ส่วนที่มีอยู่ควรเรียงตามลำดับนี้ หัวข้อที่ซ้ำสองครั้งทำให้ไฟล์ไม่ถูกต้อง ส่วนที่ไม่รู้จักจะถูกเก็บไว้

1. Overview (หรือ Brand & Style) หน้าตาและความรู้สึกในไม่กี่ประโยค ได้แก่ อารมณ์ ความหนาแน่น และบุคลิก
2. Colors โทเค็นสีแต่ละตัวและบทบาทของสี เช่น ปุ่มการกระทำหลักหรือพื้นผิวของหน้า
3. Typography ฟอนต์และสเกลตัวอักษร ตั้งแต่พาดหัวขนาดใหญ่ไปจนถึงป้ายกำกับขนาดเล็ก
4. Layout (หรือ Layout & Spacing) สเกลระยะห่าง กริด ความกว้างของเนื้อหา และระยะขอบ
5. Elevation & Depth (หรือ Elevation) วิธีแยกพื้นผิวออกจากกัน ได้แก่ เงา เส้นขอบ และสีอ่อน
6. Shapes ความโค้งมุมและกฎด้านรูปทรงอื่น ๆ
7. Components ปุ่ม ช่องกรอกข้อมูล การ์ด และองค์ประกอบพื้นฐานอื่น ๆ พร้อมโทเค็นและสถานะ
8. Do's and Don'ts กฎที่เอเจนต์ไม่ควรละเมิด

ตัวอย่างเนื้อหา Markdown แบบกระชับที่มีทุกส่วนมาตรฐานตามลำดับ ปรับเนื้อหาให้เข้ากับผลิตภัณฑ์ของคุณ โดยคงหัวข้อและลำดับไว้

## Overview
A minimal dark interface for a developer productivity tool.
Clean lines, low visual noise, high information density.

## Colors
- Primary (#2665fd): CTAs and active states
- Surface (#0b1326): Page backgrounds
- On-surface (#dae2fd): Text on dark backgrounds

## Typography
- Headlines: Inter, semibold
- Body: Inter, regular, 14-16px
- Labels: Inter, medium, 12px, uppercase

## Layout
- 8px base spacing unit, scale: 4 / 8 / 16 / 24 / 32 / 48
- Max content width 720px with 24px gutters on mobile

## Elevation & Depth
- Surfaces rely on background contrast instead of shadow
- Overlays use an 8 percent white tint on dark surfaces

## Shapes
- Rounded 8px for controls, 16px for cards
- Avoid mixing sharp and rounded corners in one view

## Components
- Buttons: 8px rounded, primary filled with brand blue
- Inputs: 1px border, subtle surface-variant background
- Cards: no elevation, rely on border and background contrast

## Do's and Don'ts
- Do use the primary color sparingly, for the most important action
- Don't mix rounded and sharp corners in one view
- Do maintain at least a 4:1 contrast ratio for all text

ดีไซน์โทเค็นและ schema#

DESIGN.md ฝังดีไซน์โทเค็นเป็น YAML front matter ที่ต้นไฟล์ บล็อก front matter เริ่มด้วยบรรทัดที่มีเพียง --- และจบด้วยตัวคั่นเดียวกัน

version: <string>
name: <string>
description: <string>
colors:
  <token-name>: <Color>
typography:
  <token-name>: <Typography>
rounded:
  <scale-level>: <Dimension>
spacing:
  <scale-level>: <Dimension | number>
components:
  <component-name>:
    <token-name>: <string | token reference>

ชื่อสเกลที่ใช้บ่อย ได้แก่ xs, sm, md, lg, xl และ full แต่ใช้คีย์ที่สื่อความหมายใดก็ได้ โทเค็นระยะห่างอยู่ใน YAML ภายใต้ spacing: และอธิบายไว้ในส่วน Layout ของเนื้อหา Markdown

ประเภทโทเค็น

Color

สตริงสี CSS ที่ถูกต้องใดก็ได้ แนะนำให้ใช้ hex ในรูปแบบ #RRGGBB เป็นค่าเริ่มต้น เช่น "#1A1C1E"

Dimension

ตัวเลขพร้อมหน่วย px, em หรือ rem ตัวอย่าง:48px,-0.02em

Token Reference

อยู่ในวงเล็บปีกกาและชี้ไปยังค่าใน YAML tree ตัวอย่าง:{colors.primary}

Typography

อ็อบเจกต์ประกอบที่มีคุณสมบัติของฟอนต์ เช่น family, size, weight, line height และ letter spacing ดูคุณสมบัติของตัวอักษร

คุณสมบัติของตัวอักษร

fontFamily

ชื่อฟอนต์

fontSize

ขนาดฟอนต์ในรูปแบบ dimension

fontWeight

น้ำหนักแบบตัวเลข เช่น 400 หรือ 700

lineHeight

dimension หรือตัวคูณที่ไม่มีหน่วย แนะนำให้ใช้ค่าที่ไม่มีหน่วย

letterSpacing

การปรับระยะห่างระหว่างตัวอักษรในรูปแบบ dimension

fontFeature

กำหนดค่า font-feature-settings

fontVariation

กำหนดค่า font-variation-settings

การอ้างอิงโทเค็น

การอ้างอิงโทเค็นอยู่ในวงเล็บปีกกาและมี object path ที่ชี้ไปยังค่าอื่นใน YAML tree สำหรับกลุ่มโทเค็นส่วนใหญ่ การอ้างอิงควรชี้ไปยังค่าพื้นฐาน (primitive) ไม่ใช่กลุ่ม ภายในส่วน components อนุญาตให้อ้างอิงค่าประกอบ เช่น ระดับตัวอักษรได้

components:
  button-primary:
    backgroundColor: "{colors.primary-60}"
    textColor: "{colors.primary-20}"
    rounded: "{rounded.md}"
  button-primary-hover:
    backgroundColor: "{colors.primary-70}"

คอมโพเนนต์

backgroundColor

Color

textColor

Color

typography

Typography

rounded

Dimension

padding

Dimension

size

Dimension

height

Dimension

width

Dimension

ชื่อโทเค็นที่แนะนำ

เอเจนต์ AI ใช้ DESIGN.md อย่างไร#

## Design
Follow DESIGN.md for every UI change: use its color, typography,
spacing and component tokens instead of inventing new values.

Claude Code

อ่านไฟล์ใน repo ของคุณและโหลด CLAUDE.md ตอนเริ่มต้น เพิ่มบรรทัดที่ชี้ไปยัง DESIGN.md ในไฟล์นั้น หรือระบุไฟล์ในพรอมต์

Cursor

เพิ่ม DESIGN.md ลงในบริบทของแชต หรืออ้างถึงจาก project rule เพื่อให้ใช้กับทุกคำขอด้าน UI

GitHub Copilot

ชี้ไปยัง DESIGN.md จากไฟล์คำสั่ง Copilot ของ repository หรือแนบไฟล์ในแชตเมื่อสั่งงานด้าน UI

Google Stitch

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

จากนั้นเอเจนต์จะนำค่าที่แน่นอนจากโทเค็น (ค่า hex ของปุ่ม primary ขนาดของป้ายกำกับ body-md) และใช้ข้อความอธิบายตัดสินว่าค่าเหล่านั้นควรอยู่ตรงไหน

DESIGN.md เทียบกับ AGENTS.md และ README.md#

ทั้งสามไฟล์อยู่คู่กันและตอบคำถามต่างกัน DESIGN.md ไม่ได้มาแทนที่ AGENTS.md แต่ทั้งสองไฟล์ทำงานร่วมกัน

ตัวอย่าง DESIGN.md จริง#

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

• DESIGN.md ของ Stripe
• DESIGN.md ของ Anthropic
• DESIGN.md ของ Airbnb
• DESIGN.md ของ Linear
• DESIGN.md ของ Notion
• DESIGN.md ของ Supabase

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

จะได้ DESIGN.md มาอย่างไร#

1. เขียนเอง เริ่มจากสเปกและตัวอย่างด้านบน แล้วตรวจสอบไฟล์ด้วยตัวตรวจสอบ DESIGN.mdฟรี หรือคำสั่ง lint ของ Google
2. เริ่มจากตัวอย่าง คัดลอกไฟล์จากแกลเลอรี แล้วแก้ไขโทเค็นและข้อความให้ตรงกับผลิตภัณฑ์ของคุณ
3. สร้างจากเว็บไซต์จริง วาง URL สาธารณะลงใน Design Extractor ระบบจะเรนเดอร์เว็บไซต์ในเบราว์เซอร์และส่งคืน DESIGN.md ที่มีสี ตัวอักษร ระยะห่าง และคอมโพเนนต์ ซึ่งเป็นไปตามสเปกด้านบน หน้าตัวสร้าง DESIGN.mdอธิบายว่าคุณจะได้อะไร การดึงดีไซน์แบบเดียวกันทำได้จากส่วนขยาย Chrome และจากเอเจนต์ของคุณผ่านเซิร์ฟเวอร์ MCP