# เว็บไซต์ที่ไม่ใช้เทมเพลตด้วย Claude Code และ Refero DESIGN.md

> บริบทการออกแบบของ Refero Styles: โครงสร้าง DESIGN.md การเลือกระบบภาพ การนำเข้าไปยัง CLAUDE.md สี่ขั้นตอนในการสร้างหน้าเว็บ และข้อผิดพลาดที่พบบ่อย

Source: https://ailoot.ai/blog/th/claude-code-refero-design-md/
Canonical: https://ailoot.ai/blog/th/claude-code-refero-design-md/
Language: th
Publisher: Ailoot (https://ailoot.ai/)
Translation: guide-205
Revision: sha256-e46676bdca809a3d961d877055e7563adeef4d6aea9ec8c15f3bf528ddd2ad96


<div class="aside" data-semantic="key-takeaway" role="note" aria-label="Key takeaways">

ประเด็นสำคัญ

เว็บไซต์ที่ Claude Code เขียนขึ้น “จากกล่อง” ล้วนดูเหมือนกันหมด: พื้นหลังสีเข้ม ไล่เฉดสีม่วง ฟอนต์ sans-serif และการ์ด shadcn ค่าเริ่มต้น ด้านล่างนี้เราจะแสดงวิธีนำ DESIGN.md สำเร็จรูปจาก Apple, Linear, Stripe หรือ ElevenLabs (มีระบบมากกว่า 2,000 แบบในคลัง) ใส่ไว้ในโปรเจกต์ แล้วให้ Claude เขียนงานตามสไตล์นั้น เว็บไซต์ที่เสร็จแล้วจะไม่ดูเหมือนเทมเพลต AI อีกต่อไป

</div>

เอกสารเชิงปฏิบัติสำหรับทำงานกับโปรเจกต์และโมเดล: [เอกสารประกอบ Ailoot](https://ailoot.ai/docs/).



## ทำไมเว็บไซต์จาก Claude Code จึงดูเหมือนเทมเพลต Tailwind?

<div class="aside" data-semantic="key-takeaway" role="note" aria-label="Key takeaways">

ประเด็นสำคัญ

หากไม่มีระบบออกแบบ Claude Code จะวาดอินเทอร์เฟซแบบเฉลี่ยจากข้อมูลฝึกของมัน และข้อมูลฝึกนั้นก็คืออินเทอร์เน็ตทั้งหมดที่เต็มไปด้วย Tailwind, shadcn/ui และหน้าแลนดิ้งเพจนับพันที่เหมือนกัน หากไม่มีบริบทที่ระบุสี ฟอนต์ และระยะห่างอย่างชัดเจน เอเจนต์ก็จะสร้าง “ค่าเฉลี่ยเลขคณิตของเทมเพลตทั้งหมด”

</div>

ในตัวอย่างเดือนมกราคมที่เล่าไว้ มีการสร้างโปรเจกต์เสริมขนาดเล็กขึ้นมา เป็นระบบโทรศัพท์สำหรับการขายแบบโทรหาลูกค้าใหม่ ในรีโพซิทอรีว่างเปล่า มีการขอให้ Claude Code สร้างหน้าแรก ผลลัพธ์ดูทั่วไป: พื้นหลังมืด `slate-950` สีเน้น `purple-500` หัวเรื่องตัวหนาด้วยฟอนต์ sans-serif และการ์ดสามใบด้านล่างที่มีเงาเหมือนกันหมด เลย์เอาต์แบบเดียวกับ ChatGPT รุ่นแรก, Lovable รุ่นแรก และ v0 รุ่นแรก หลังแก้พรอมป์ต์ห้าครั้งโดยเพิ่มคำว่า “ทันสมัย” “พรีเมียม” และ “ไม่เหมือนใคร” ก็ไม่มีอะไรเปลี่ยน หน้าเว็บยังดูเหมือนมาจากชุด Tailwind UI Templates

นั่นคือ Claude ไม่ได้ “ไม่รู้” วิธีสร้างสิ่งที่สวยงาม แต่มันรู้ว่าคนส่วนใหญ่ทำอะไรและจำลองสิ่งที่คนส่วนใหญ่ทำ หากต้องการผลลัพธ์ที่ไม่ใช่ค่าเฉลี่ย เอเจนต์ต้องมีข้อกำหนดที่ชัดเจน เช่น ต้องใช้สีอะไร ฟอนต์ใด ระยะห่างเท่าไร และควรยึดองค์ประกอบใดเป็นมาตรฐาน

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

Refero Styles ช่วยเติมเต็มช่องว่างนี้ด้วยชิ้นงานสำเร็จรูป นั่นคือไฟล์ `DESIGN.md` ที่มีพารามิเตอร์จากผลิตภัณฑ์จริง

## Refero Styles คืออะไร?

<div class="aside" data-semantic="key-takeaway" role="note" aria-label="Key takeaways">

ประเด็นสำคัญ

Refero Styles คือคลังระบบออกแบบมากกว่า 2,000 แบบที่ดึงมาจากเว็บไซต์จริงและจัดทำเป็นไฟล์ `DESIGN.md` แต่ละระบบแทนแบรนด์หนึ่งแบรนด์ เช่น Apple, Stripe, Linear, Notion, Vercel, Airbnb, ElevenLabs และ Cursor เข้าไปที่ styles.refero.design เลือกแบรนด์ คัดลอกไฟล์ markdown แล้วเพิ่มลงในโปรเจกต์เพื่อเป็นบริบทให้ Claude Code, Cursor, Codex, v0 หรือ Lovable

</div>

หน้าแรกของ styles.refero.design ระบุไว้อย่างตรงไปตรงมาว่า “ค้นพบระบบออกแบบกว่า 2,000 แบบจากเว็บไซต์ผลิตภัณฑ์ชั้นนำที่เอเจนต์ AI อ่านได้” ในแคตตาล็อกมีแบรนด์ที่กำหนดมาตรฐานด้านภาพ เช่น Apple, Linear, Stripe, Notion, Vercel, ElevenLabs, Mercury, PostHog, xAI, Modal และ Duolingo ระบบเหล่านี้ไม่ได้ดึงข้อมูลด้วยมือ ทีม Refero เรียกใช้สคริปต์เพื่อวิเคราะห์ CSS และมาร์กอัปจริงของเว็บไซต์ แล้วจัดผลลัพธ์เป็น markdown ที่มีโครงสร้าง คลัง styles.refero.design เองใช้งานได้ฟรี

คำสำคัญคือ “มีโครงสร้าง” ไฟล์นี้ไม่มีภาพหน้าจอหรือคำบรรยายอย่าง “สไตล์มินิมอล” แต่เป็น markdown ที่ระบุรหัสสี hex ขนาดฟอนต์เป็น pt อย่างแม่นยำ หน่วยระยะห่าง และกฎสำหรับองค์ประกอบต่าง ๆ เอเจนต์ AI อ่านไฟล์นี้และทำงานกับรายละเอียดเฉพาะ แทนที่จะพยายามอธิบายรสนิยมด้วยคำพูด

ทีม Refero ระบุเครื่องมือที่รองรับไว้ในหน้า ai-agents ว่า “Cursor, Claude Code, Codex, v0 และ Lovable” กล่าวอีกอย่างคือ DESIGN.md เป็นชิ้นงานสากล ไฟล์เดียวที่ใช้ได้กับเอเจนต์พัฒนา AI หลัก ๆ ทั้งหมด

## ใน DESIGN.md มีอะไรบ้าง?

<div class="aside" data-semantic="key-takeaway" role="note" aria-label="Key takeaways">

ประเด็นสำคัญ

ไฟล์เดียวมีชั้นพื้นฐานทั้งหมดของระบบออกแบบ ได้แก่ ชุดสีแบบ hex (มีโหมดมืดและสว่าง) ตัวอักษร (ฟอนต์ สเกลขนาด น้ำหนัก ความสูงบรรทัด) กฎระยะห่าง (กริด 8px หรือจังหวะอื่น) คำอธิบายองค์ประกอบ (ปุ่ม การ์ด ฟอร์ม) กฎการเคลื่อนไหว (แอนิเมชัน easing) และ “น้ำเสียงของแบรนด์” (โทนข้อความ) ไฟล์มีความยาว 100 ถึง 400 บรรทัด markdown

</div>

ทีม Refero อธิบายโครงสร้างไฟล์ไว้ในหน้า design-md-template ดังนี้:

<figure>
<blockquote>
<p>เริ่มจากโทนของผลิตภัณฑ์และหลักการออกแบบ จากนั้นกำหนดสี ตัวอักษร ระยะห่าง องค์ประกอบ เลย์เอาต์ การเคลื่อนไหว การช่วยการเข้าถึง และกฎเกี่ยวกับสิ่งที่ไม่ควรใช้</p>
</blockquote>
<figcaption>— ทีม Refero Styles, https://styles.refero.design/design-md/design-md-template</figcaption>
</figure>

ดังนั้นโครงสร้างไฟล์โดยทั่วไปจึงเป็นดังนี้:

| ส่วน | มีอะไรอยู่ข้างใน | เหตุผลที่เอเจนต์ต้องใช้ |
|----|----|----|
| **โทนผลิตภัณฑ์** | 2–3 ประโยคอธิบายว่าอินเทอร์เฟซมีน้ำเสียงอย่างไร | กำหนดทิศทางสำหรับข้อความสั้นใน UI |
| **หลักการออกแบบ** | กฎ 4–6 ข้อ เช่น “มินิมอลโดยไม่ลดทอนความอ่านง่าย” | ชี้นำเอเจนต์เมื่อต้องเลือกระหว่างตัวเลือกที่ดีพอ ๆ กัน |
| **สี** | ชุดสี hex พร้อมชื่อ (primary, secondary, accent, surface, text) + โหมดมืด/สว่าง | เอเจนต์ใช้รหัสที่แน่นอนแทนการคิดขึ้นเอง |
| **ตัวอักษร** | ฟอนต์ (ชื่อและ fallback stack), สเกลขนาด (10–12 ขั้น), น้ำหนัก (ปกติ ปานกลาง หนา), ความสูงบรรทัด | ป้องกันไม่ให้ทั้งเว็บไซต์กลายเป็น Inter 16px แบบเดียว |
| **ระยะห่าง** | หน่วยพื้นฐาน (4px, 8px, 16px) และสเกลของจำนวนเท่า | ระยะ padding และ margin จะไม่ “ลอยไปมา” |
| **องค์ประกอบ** | กฎสำหรับปุ่ม การ์ด ฟอร์ม และการนำทาง ทั้งขนาด สถานะ และรูปแบบ | เอเจนต์ไม่คิดรูปแบบใหม่ขึ้นเอง |
| **เลย์เอาต์** | กริด จุดเปลี่ยนขนาดหน้าจอ ความกว้างสูงสุดของคอนเทนเนอร์ | ทุกหน้าของเว็บไซต์สร้างบนกริดเดียวกัน |
| **การเคลื่อนไหว** | ระยะเวลา easing และทรานซิชันที่อนุญาต | แอนิเมชันจะเรียบง่าย ไม่ย้อนกลับไปเป็น Bootstrap-2010 |
| **น้ำเสียงและโทน** | ตัวอย่างข้อความสำหรับปุ่ม หัวเรื่อง และข้อผิดพลาด | ข้อความบนเว็บไซต์ฟังดูเป็นแบรนด์เดียวกัน |
| **ห้ามใช้** | รายการข้อห้าม (“ห้ามใช้ `box-shadow: 0 10px 30px`”) | เอเจนต์จะไม่ย้อนกลับไปใช้วิธีแบบเทมเพลต |

ผู้สร้างยังเน้นหลักการที่ช่วยแก้ปัญหาการออกแบบ AI ได้ 80%:

<figure>
<blockquote>
<p>บริบทที่เฉพาะเจาะจงได้ผลดีกว่าคำคุณศัพท์ที่บอกความชอบ</p>
</blockquote>
<figcaption>— ทีม Refero Styles, https://styles.refero.design/ai-agents/design-md-examples</figcaption>
</figure>

กล่าวคือ รหัส hex `#5E6AD2` ชัดเจนกว่า “เหมือน Linear” ค่า `font-size: 13px / line-height: 18px` แน่นอนกว่า “ข้อความกะทัดรัด” รายละเอียดเฉพาะเอาชนะการตีความ



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

## วิธีสร้างเว็บไซต์สไตล์ Linear ใน 4 ขั้นตอน

<div class="aside" data-semantic="key-takeaway" role="note" aria-label="Key takeaways">

ประเด็นสำคัญ

ขั้นตอนทำงานสั้น ๆ: ติดตั้ง Claude Code เปิด styles.refero.design เลือกแบรนด์ (เช่น Linear) คัดลอก DESIGN.md ไปยัง `docs/DESIGN.md` หรือ `.claude/DESIGN.md` เพิ่มบรรทัดอ้างถึงไฟล์นี้ใน `CLAUDE.md` แล้วขอให้ Claude สร้างหน้าเว็บ ในทางปฏิบัติ ใช้เวลา 30 นาทีตั้งแต่โปรเจกต์ว่างจนได้หน้าแรกที่ใช้งานได้

</div>

สี่ขั้นตอนนี้คือกระบวนการที่อธิบายไว้สำหรับเริ่มเว็บไซต์ใหม่ ไม่ใช่ “สี่ขั้นตอนโดยทั่วไป” แต่เป็นลำดับเฉพาะที่มีหนึ่งการกระทำในแต่ละขั้น

1.  ### ติดตั้ง Claude Code

    ตัวติดตั้งแบบ native ที่ใช้คำสั่งเดียว: `curl -fsSL https://claude.ai/install.sh | bash` (วิธีที่แนะนำในเอกสารทางการ) บน macOS ใช้ `brew install --cask claude-code` ได้ ส่วน Windows ใช้ `winget install Anthropic.ClaudeCode` หากติดตั้งไว้แล้ว ให้ตรวจสอบเวอร์ชันด้วย `claude --version` (ต้องใช้เวอร์ชัน 2.1.178 ขึ้นไป ซึ่งเป็นเวอร์ชันที่เพิ่มสิทธิ์ `Tool(param:value)` และการบล็อกคำสั่ง git ที่เป็นอันตรายในโหมดอัตโนมัติ) ลงชื่อเข้าใช้บัญชีของคุณ: `claude` จะเปิดตัวช่วยตั้งค่า Claude Code รวมอยู่ในสมาชิก Pro (\$17/เดือนเมื่อชำระรายปี หรือ \$20/เดือนเมื่อชำระรายเดือน)

2.  ### เปิด Refero Styles แล้วเลือกแบรนด์

    ไปที่ <https://styles.refero.design> แล้วเปิดแคตตาล็อก เกณฑ์หลักในการเลือกคือความใกล้เคียงกับผลิตภัณฑ์ของคุณ ไม่ใช่ว่า “คุณชอบหน้าตาหรือเปล่า” กำลังสร้างแดชบอร์ด SaaS อยู่หรือไม่? ลองดู Linear, Vercel และ Notion กำลังสร้างผลิตภัณฑ์ fintech หรือไม่? ลองดู Stripe, Mercury และ Column กำลังสร้างผลิตภัณฑ์สำหรับสมาชิกหรือไม่? ลองดู Duolingo เปิดการ์ดแบรนด์แล้วคลิก “Copy DESIGN.md”

3.  ### ใส่ DESIGN.md ในโปรเจกต์เพื่อใช้เป็นบริบท

    สร้างไฟล์ `docs/DESIGN.md` ที่รูทของโปรเจกต์ แล้ววางเนื้อหาที่คัดลอกไว้ จากนั้นเปิด `CLAUDE.md` แล้วเพิ่มหนึ่งบรรทัด: `@docs/DESIGN.md` นี่คือคำสั่งนำเข้า Claude Code จะโหลดเนื้อหาเข้าไปในบริบทเมื่อเริ่มเซสชัน อ่านเพิ่มเติมเกี่ยวกับการนำเข้าใน CLAUDE.md ได้จาก [คู่มือไฟล์คำสั่งเดียวสำหรับ Claude Code, Codex และ Cursor](https://ailoot.ai/blog/th/agents-md-claude-md-one-instruction-file/)

4.  ### สั่งให้สร้างหน้าเว็บที่เจาะจง

    อย่าพูดว่า “ทำให้สวย” ให้ระบุให้ชัดเจน: “ใช้ DESIGN.md ที่อยู่ในบริบท สร้างหน้าแรกสำหรับผลิตภัณฑ์จัดการงานแบบ SaaS โครงสร้าง: hero ที่มีหัวเรื่องและหัวเรื่องรอง ปุ่ม CTA สองปุ่ม (หลักและรอง) บล็อกด้านล่างที่มีฟีเจอร์ 3 รายการพร้อมไอคอน แล้วตามด้วยบล็อกคำรับรอง ใช้สีและตัวอักษรจาก DESIGN.md อย่างแม่นยำ ห้ามคิดค่าของคุณเองขึ้นมา”

หลังขั้นตอนที่สี่ Claude จะสร้างหน้าเว็บ ในประสบการณ์ที่อธิบายไว้ หน้าแรกใช้เวลาเฉลี่ย 8–12 นาที และหน้าตาก็ใกล้เคียงกับสไตล์แบรนด์ที่เลือกจริง ๆ ไม่ใช่สำเนาที่ตรงทุกพิกเซล แต่เป็นรูปลักษณ์ที่จดจำได้: ฟอนต์ชุดเดียวกัน จานสีเดียวกัน จังหวะระยะห่างเดียวกัน และรายละเอียดเล็ก ๆ ของปุ่มแบบเดียวกัน

ผู้สร้าง Refero อธิบายหลักการสามขั้นตอนเดียวกันแบบย่อกว่าเล็กน้อยในหน้า ai-agents/design-resources:

<figure>
<blockquote>
<p>เลือกงาน เปิดแหล่งข้อมูลที่เกี่ยวข้อง ให้บริบทแก่เอเจนต์: ใส่ DESIGN.md ไว้ในบริบทของเอเจนต์ อธิบายผลิตภัณฑ์ และขอหน้าจอที่เฉพาะเจาะจง</p>
</blockquote>
<figcaption>— ทีม Refero Styles, https://styles.refero.design/ai-agents/design-resources</figcaption>
</figure>

ลำดับสี่ขั้นตอนนี้ใช้ตรรกะเดียวกัน โดยเพิ่มขั้นตอนที่ระบุชัดเจนคือการติดตั้ง Claude Code และนำเข้าไฟล์ไปยัง `CLAUDE.md`

## ควรเลือกสไตล์ใดให้ผลิตภัณฑ์ของคุณ?

<div class="aside" data-semantic="key-takeaway" role="note" aria-label="Key takeaways">

ประเด็นสำคัญ

เลือกตามความหนาแน่นของข้อมูลและโทน ไม่ใช่ตามแบรนด์ เครื่องมือ SaaS สำหรับทีม (UI หนาแน่น ข้อมูลมาก) — Linear หรือ Vercel ผลิตภัณฑ์การเงิน (ความน่าเชื่อถือ ความแม่นยำ) — Stripe, Mercury, Column ผลิตภัณฑ์สำหรับผู้บริโภค (ความอบอุ่น อารมณ์) — Duolingo, Notion สำหรับทีม, Airbnb เครื่องมือ AI/นักพัฒนา (มินิมอล ธีมมืด) — ElevenLabs, xAI, Modal ผลิตภัณฑ์สำหรับสมาชิก (การเข้าถึงได้ ความอ่านง่าย) — Duolingo หากไม่แน่ใจ Linear เป็นตัวเลือกปลอดภัยที่ใช้ได้รอบด้าน

</div>

ผู้สร้าง Refero ให้คำแนะนำนี้ตั้งแต่ขั้นแรกในคู่มือ: เลือกข้อมูลอ้างอิงโดยพิจารณาทั้งชื่อแบรนด์ ความหนาแน่น โทน และกลุ่มเป้าหมาย

ในทางปฏิบัติ สี ตัวอักษร ลำดับชั้น และการเคลื่อนไหวพอดีจาก Apple เหมาะกับ dashboard SaaS ได้ แต่ระยะห่างโล่งของหน้าการตลาดผลิตภัณฑ์บางหน้าอาจไม่เหมาะ ต้องดู reference เฉพาะ ไม่เลือกจากแบรนด์อย่างเดียว dashboard บัญชีต้องกำหนดความสูงแถว ระยะ และความหนาแน่นให้กระชับ พร้อมรักษาตัวเลขและปุ่มให้อ่านได้ อย่าคัด layout นำเสนอที่โล่งมาโดยไม่ปรับ

คู่มือเลือกตามประเภทผลิตภัณฑ์แบบง่าย:

| ประเภทผลิตภัณฑ์ | สไตล์ Refero ที่เหมาะสม | ลักษณะร่วมกัน |
|----|----|----|
| แดชบอร์ด SaaS สำหรับทีม | Linear, Vercel, Notion, PostHog; tokens แนว Apple พร้อม layout กระชับที่ปรับแล้ว | UI หนาแน่นที่อ่านได้ ลำดับชั้นชัด ตัวอักษรกระชับ |
| ผลิตภัณฑ์การเงิน | Stripe, Mercury, Column | จานสีที่สร้างความเชื่อมั่น ตัวอักษรชัดเจน ฟอนต์ monospace สำหรับตัวเลข |
| เครื่องมือ AI/นักพัฒนา | ElevenLabs, xAI, Modal, Anthropic | ธีมมืด สีเน้นที่ไม่ฉูดฉาด สีโมโนโครมพร้อมสีสว่างหนึ่งสี |
| ผลิตภัณฑ์ผู้บริโภค | Duolingo, Airbnb, Notion | จานสีอบอุ่น ภาพประกอบที่แสดงอารมณ์ น้ำเสียงเป็นมิตร |
| เว็บไซต์การตลาด | Linear, Vercel, Stripe (หน้าแรก) | หัวเรื่องขนาดใหญ่ ลำดับชั้นชัดเจน พื้นหลังสงบ |
| พอร์ตโฟลิโอมินิมอล | Apple, Mercury, Modal | พื้นที่ว่างสูงสุด ฟอนต์ sans-serif สีเน้นที่ไม่ฉูดฉาด |

หากยังลังเล ให้เลือก Linear เพราะมีพื้นฐานที่ยืดหยุ่นที่สุด: จานสีกลาง ตัวอักษรอ่านง่าย (Inter / Söhne) และระยะห่างพอดี เว็บไซต์ที่อิง Linear จะดูเป็นมืออาชีพสำหรับผลิตภัณฑ์ 9 ใน 10 ประเภท

## ทำไมจึงควรให้ DESIGN.md เป็นส่วนหนึ่งของบริบทถาวรของโปรเจกต์?

<div class="aside" data-semantic="key-takeaway" role="note" aria-label="Key takeaways">

ประเด็นสำคัญ

DESIGN.md ไม่ใช่ชิ้นงานที่ใช้ครั้งเดียว แต่เป็นส่วนหนึ่งของบริบทถาวรของโปรเจกต์ เช่นเดียวกับ `CLAUDE.md` และโฟลเดอร์ `business/` เมื่อไฟล์อยู่ในรีโพซิทอรี ทุกเซสชัน Claude สมาชิกทุกคนในทีม และเอเจนต์ AI ใหม่ทุกตัว (Codex, Cursor, Gemini CLI) จะเข้าถึงมาตรฐานภาพเดียวกัน จัดโครงสร้างความรู้ครั้งเดียว แล้วนำไปใช้ได้ต่อเนื่อง

</div>

ตามแนวทางที่อธิบายไว้ จะเก็บ `DESIGN.md` ไว้ข้าง `CLAUDE.md` ในทุกโปรเจกต์ที่จัดการด้วยเอเจนต์ AI ไฟล์นี้ไม่ถือว่า “ใช้ชั่วคราวสำหรับงานเดียว” แต่เป็นมาตรฐานถาวรที่ทุกเซสชันในอนาคตอ้างอิงได้ อีกหนึ่งเดือน คุณอาจขอให้ Claude เพิ่มหน้าใหม่ให้โปรเจกต์ มันจะเปิด DESIGN.md ฉบับเดิมและสร้างหน้าในสไตล์เดียวกัน อีกหกเดือน คุณอาจส่งต่อโปรเจกต์ให้สมาชิกทีมคนอื่น พวกเขาก็ใช้ Claude และได้ผลลัพธ์ที่สอดคล้องกันได้ เพราะ DESIGN.md อยู่ในรีโพซิทอรี

ในงานออกแบบ หลักการนี้ทำงานดังนี้: ตัดสินใจครั้งเดียวเรื่องจานสี ตัวอักษร และจังหวะระยะห่าง หลังจากนั้นเอเจนต์ AI ทุกตัวก็ยึดสิ่งเหล่านี้เป็นข้อกำหนด

กล่าวคือ ดีไซน์อยู่ในรูปโค้ด (markdown คือโค้ด) ไม่ใช่ไฟล์ Figma ที่ AI อ่านไม่ได้ เมื่อดีไซน์เป็นไฟล์ในรีโพซิทอรี Claude Code ก็อ่านได้ Codex ก็อ่านได้ และเครื่องมือใด ๆ ในอนาคตก็อ่านได้ แต่เมื่อดีไซน์อยู่ใน Figma ก็แยกไปอยู่อีกพื้นที่หนึ่ง และต้องแปลงเป็นคำอธิบายด้วยมือสำหรับทุกเซสชัน

ในโปรเจกต์เสริมที่กล่าวถึง ใช้โครงสร้างนี้:

```
project/
├── CLAUDE.md            (imports @docs/DESIGN.md)
├── docs/
│   ├── DESIGN.md        (visual canon, copied from Refero)
│   ├── ARCHITECTURE.md  (project structure)
│   └── BRAND.md         (tone of voice, vocabulary)
└── ...
```

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

## Refero MCP และ refero_skill คืออะไร?

<div class="aside" data-semantic="key-takeaway" role="note" aria-label="Key takeaways">

ประเด็นสำคัญ

Refero MCP เป็นเซิร์ฟเวอร์ที่ api.refero.design/mcp ซึ่งให้ Claude Code เข้าถึงหน้าจอมากกว่า 150,000 หน้าจอจากแอปจริง และ user flow มากกว่า 6,000 รายการจากในแชตโดยตรง Refero_skill คือ skill อย่างเป็นทางการสำหรับ Claude Code (`npx skills add`) ซึ่งครอบ MCP ไว้และทำให้ “การวิจัยด้านดีไซน์” เป็นขั้นแรกที่ต้องทำก่อนเขียนโค้ด

</div>

Refero Styles เป็นชั้นพื้นฐาน (DESIGN.md ในรูปไฟล์) คลื่นถัดไปคือการผสานระบบที่ทำให้เอเจนต์ AI เข้าถึงคลังได้อย่าง “native”

**Refero MCP (ทางการ)** นี่คือ API เซิร์ฟเวอร์ที่ `https://api.refero.design/mcp` ซึ่ง Claude Code เชื่อมต่อด้วย bearer token จากนั้นเอเจนต์จะเข้าถึงหน้าจอมากกว่า 150,000 หน้าจอและ user flow มากกว่า 6,000 รายการจากผลิตภัณฑ์จริง ติดตั้งได้ด้วย skill:

```bash
npx skills add https://github.com/referodesign/refero_skill --skill refero-design
```

หลังติดตั้ง Claude จะเริ่ม “การวิจัยด้านดีไซน์” ตอนต้นของทุกเซสชันเป็นขั้นตอนแรกที่ต้องทำ โดยพิจารณาว่าตัวเลือกด้านภาพใดเหมาะกับงาน และหากจำเป็นก็เสนอทิศทางสามแบบที่เชื่อมโยงกับข้อมูลอ้างอิงที่เลือก ณ วันที่ 23 มิถุนายน 2026 รีโพซิทอรี refero_skill มี 67 commits และ 135 stars เป็นผลิตภัณฑ์ใหม่ที่กำลังพัฒนาอย่างต่อเนื่อง

แนวทางที่อธิบายไว้ใช้วิธีง่าย ๆ คือเปิดเว็บไซต์ด้วยตัวเอง คัดลอก DESIGN.md แล้วใส่ลงในไฟล์ MCP มีประโยชน์เมื่อต้องทำงานกับระบบออกแบบเป็นประจำ เช่น เมื่อจัดการโปรเจกต์ลูกค้าหลายโปรเจกต์และสลับมาตรฐานภาพทุกวัน อ่านเพิ่มเติมเกี่ยวกับการเชื่อมต่อเซิร์ฟเวอร์ MCP กับ Claude Code ได้ใน คู่มือ NotebookLM และ MCP

## ข้อผิดพลาด 4 อย่างใดทำให้ขั้นตอนนี้ใช้ไม่ได้ผล?

<div class="aside" data-semantic="key-takeaway" role="note" aria-label="Key takeaways">

ประเด็นสำคัญ

ข้อแรก ใช้พรอมป์ต์ “ทำให้ดูทันสมัย” โดยไม่แนบ DESIGN.md (เอเจนต์จะกลับไปหาค่าเฉลี่ยจากข้อมูลฝึก) ข้อสอง วาง DESIGN.md ในแชตเป็นข้อความแทนที่จะใส่ไว้ในรีโพซิทอรี (บริบทจะไม่คงอยู่ข้ามเซสชัน) ข้อสาม เลือกจากแบรนด์แทนหน้าจอและความหนาแน่นเฉพาะ เช่น คัด layout การตลาดโล่งมาใส่ dashboard บัญชี ข้อสี่ ไม่กล่าวถึง DESIGN.md อย่างชัดเจนในพรอมป์ต์ (เอเจนต์จะไม่สนใจ แม้ไฟล์จะอยู่ในบริบทก็ตาม)

</div>

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

**ข้อผิดพลาด 1. พรอมป์ต์ว่า “ทำให้ดูทันสมัย”** นี่เป็นรูปแบบข้อผิดพลาดที่พบบ่อยที่สุด ผู้คนเปิด Claude Code แล้วเขียนว่า “ทำเว็บไซต์ SaaS ให้หน่อย สไตล์ทันสมัย ดูพรีเมียม” ผลลัพธ์คือพื้นหลังมืดกับสีเน้นม่วง ในข้อมูลฝึก คำว่า “ทันสมัย” เชื่อมโยงกับหน้าแลนดิ้งเพจทั้งหมดในช่วง 2022–2024 ที่สร้างจากเทมเพลตเดียวกัน หากไม่มีพารามิเตอร์ที่ชัดเจนจาก DESIGN.md คำว่า “ทันสมัย” ก็หมายถึง “ค่าเฉลี่ย”

**ข้อผิดพลาด 2. วาง DESIGN.md ในแชตเป็นข้อความ** บางครั้งผู้คนคัดลอก DESIGN.md ไปยังหน้าต่างแชตของ Claude Code แล้วบอกว่า “นี่คือสไตล์ ใช้ตามนี้” วิธีนี้ใช้ได้ครั้งเดียวจนกว่าจะจบเซสชัน เปิดเซสชันใหม่ (หรือเปลี่ยนไปทำงานอื่น, /clear) บริบทก็หายไป หากต้องการให้สไตล์คงอยู่ ไฟล์ต้องอยู่ในรีโพซิทอรีและนำเข้าผ่าน `CLAUDE.md` อ่านเพิ่มเติมได้ใน [คู่มือหน่วยความจำของ Claude](https://ailoot.ai/blog/th/claude-memory-claude-md-auto-memory/) ว่าเหตุใด `CLAUDE.md` จึงเป็นจุดเก็บบริบทถาวร

**ข้อผิดพลาด 3. เลือกสไตล์เพราะ “ชอบ”** reference การตลาด Apple ที่โล่งอาจไม่เหมาะกับการคัดตรง ๆ สู่ dashboard อสังหาที่ต้องเห็นประกาศ 30 รายการ แต่ไม่ได้ห้ามใช้ตัวอักษร สี หรือลำดับชั้นแนว Apple ให้ปรับระยะและความหนาแน่นแถวตามงาน แล้วตรวจจำนวนข้อมูลที่เห็นจริงในขนาดหน้าจอเป้าหมาย เลือก reference เฉพาะจากความหนาแน่น โทน และผู้ชม ไม่ใช่ชื่อแบรนด์อย่างเดียว

**ข้อผิดพลาด 4. ไม่กล่าวถึง DESIGN.md ในพรอมป์ต์เอง** DESIGN.md อาจอยู่ในรีโพซิทอรี ถูกนำเข้าผ่าน `CLAUDE.md` และเอเจนต์มองเห็นได้ แต่หากพรอมป์ต์บอกเพียงว่า “สร้างเว็บไซต์” Claude อาจใช้วิธีมาตรฐานโดยไม่อ้างถึงไฟล์อย่างชัดเจน สำหรับพรอมป์ต์ด้านดีไซน์ทุกครั้ง ควรใส่ประโยคนี้: “ใช้สี ฟอนต์ และระยะห่างจาก docs/DESIGN.md อย่างแม่นยำ ห้ามคิดค่าใหม่เอง ให้ใช้ค่าจากไฟล์” วิธีนี้ทำให้เอเจนต์ใช้ DESIGN.md แทนที่จะข้ามไป

โทเค็นที่แน่นอนคือรหัส hex ขนาดฟอนต์เป็น pt และหน่วยระยะห่างใน DESIGN.md ส่วนภาษาธรรมชาติคือ “ทันสมัย” “พรีเมียม” “สะอาดตา” หรือ “เหมือน Apple” โทเค็นที่ชัดเจนใช้ได้ผล ส่วนคำพูดที่เปิดกว้างใช้ไม่ได้

## ควรทำอะไรต่อ?

<div class="aside" data-semantic="key-takeaway" role="note" aria-label="Key takeaways">

ประเด็นสำคัญ

DESIGN.md เป็นองค์ประกอบแรกของมาตรฐานภาพ ไม่ใช่องค์ประกอบเดียว มีสามแนวทางที่จะพัฒนาต่อ ได้แก่ Frontend Design Skill ใน Claude Code เพื่อรับข้อเสนอแนะด้านภาพผ่านภาพหน้าจอ, Refero MCP สำหรับการทำงานกับสไตล์ต่าง ๆ เป็นประจำ และการผสาน DESIGN.md เข้ากับ context engineering ของคุณ เพื่อให้เอเจนต์อ่านมาตรฐานภาพก่อน แล้วสร้างหน้าเว็บ และตรวจสอบผลลัพธ์ด้วยภาพหน้าจอด้วยตัวเอง

</div>

ตอนนี้คุณมีขั้นตอนพื้นฐานแล้ว: Claude Code + DESIGN.md จาก Refero + 4 ขั้นตอน = เว็บไซต์ที่ไม่ใช้เทมเพลต ครอบคลุมความต้องการ 70% ส่วนอีก 30% คือกรณีที่ต้องการความแม่นยำมากขึ้น ความเร็วมากขึ้น หรือการตรวจสอบ

สามแนวทางต่อยอดหลังจากเชี่ยวชาญพื้นฐานแล้ว:

1.  **Frontend Design Skill.** นี่คือ skill อย่างเป็นทางการสำหรับ Claude Code ที่เพิ่มการตอบกลับด้านภาพ เอเจนต์จับภาพหน้าจอของหน้าที่ประกอบเสร็จด้วย Puppeteer มองดูด้วย “สายตา” ของตน (โมเดลวิชัน) เปรียบเทียบกับ DESIGN.md แล้วเสนอการแก้ไขด้วยตัวเอง เป็นวงจรอัตโนมัติ “พรอมป์ต์ → โค้ด → ภาพหน้าจอ → วิจารณ์ → พรอมป์ต์” มีประโยชน์เมื่อหน้าเว็บซับซ้อนและทำให้ถูกต้องได้ยากในการทำซ้ำครั้งเดียว

2.  **Refero MCP ในโหมดใช้งานจริง** เมื่อจัดการโปรเจกต์ 3–5 รายการพร้อมกัน การเพิ่ม DESIGN.md ด้วยตนเองให้แต่ละโปรเจกต์กลายเป็นเรื่องน่าเบื่อ Refero MCP ค้นหาสไตล์ที่เหมาะสม 3 แบบจากคำอธิบายโปรเจกต์แล้วให้เลือกได้ ช่วยลดเวลาเริ่มโปรเจกต์ใหม่จาก 30 นาทีเหลือ 3 นาที

3.  **ผสานกับ Context Engineering.** DESIGN.md เป็นหนึ่งในชิ้นงานด้านบริบท โดยทั่วไปจะมี `ARCHITECTURE.md` (โครงสร้างโปรเจกต์), `BRAND.md` (น้ำเสียง) และ `business/audience.md` (กลุ่มเป้าหมาย) อยู่ด้วย ทั้งหมดถูกนำเข้าใน `CLAUDE.md` เมื่อ Claude สร้างหน้าเว็บ ก็อาศัยข้อมูลด้านภาพ กลุ่มเป้าหมาย และโครงสร้างผลิตภัณฑ์ กล่าวโดยสรุป นี่คือ [context engineering](https://ailoot.ai/blog/th/context-engineering/) หรือการจัดการอย่างเป็นระบบว่าคุณจะมอบข้อมูลอะไรให้เอเจนต์ก่อนส่งคำขอ

เอกสารเชิงปฏิบัติ: [เอกสารประกอบ Ailoot](https://ailoot.ai/docs/).

<div class="section" role="doc-bibliography" aria-label="Sources">

### แหล่งที่มา

- [Refero Styles - หน้าแรก](https://styles.refero.design/)
- [Refero Styles - ตัวอย่าง DESIGN.md](https://styles.refero.design/ai-agents/design-md-examples)
- [Refero Styles - แหล่งข้อมูลด้านการออกแบบ](https://styles.refero.design/ai-agents/design-resources)
- [Refero Skill บน GitHub](https://github.com/referodesign/refero_skill)
- [เอกสาร Claude Code - เอกสารทางการ](https://code.claude.com/docs/en/overview)
- [คู่มือเริ่มต้นอย่างรวดเร็วของ Claude Code - วิธีติดตั้งอย่างเป็นทางการ](https://code.claude.com/docs/en/quickstart)

</div>

เอกสารเชิงปฏิบัติ: [เอกสารประกอบ Ailoot](https://ailoot.ai/docs/).





เอกสารและเครื่องมือเพิ่มเติม: [Ailoot](https://ailoot.ai/).

## คำถามที่พบบ่อย

### reference Apple ใช้กับ dashboard SaaS หนาแน่นได้หรือไม่?

ได้หากปรับตามงาน ใช้สี ตัวอักษร ลำดับชั้น และการเคลื่อนไหวที่พอดี แต่กำหนดความสูงแถว ระยะ และความหนาแน่นให้กระชับชัดเจน แทนคัด layout การตลาดที่โล่ง

### ทำไมบันทึก DESIGN.md แล้วยังไม่ส่งผลต่อหน้าใหม่?

ตรวจว่าไฟล์อยู่ repository ถูก import จาก CLAUDE.md และระบุชื่อในคำขอออกแบบชัด ขอให้ใช้ค่าสี ฟอนต์ และระยะจริง แล้วเทียบหน้า render กับ reference ที่ต้องการ


## Ailoot · บริษัทและพอร์ตโฟลิโอโครงการของบริษัท

Ailoot อาศัยประสบการณ์การดำเนินงานที่สั่งสม ฐานลูกค้าขนาดใหญ่ บริการที่เสถียร และการติดตาม KPI อย่างต่อเนื่อง

บริษัทและพอร์ตโฟลิโอโครงการของบริษัท: ลูกค้าหลายล้านราย; ยอดขายระดับหลายพันล้านต่อเดือน.

Ailoot นำประสบการณ์การดำเนินงานนี้มาใช้เพื่อให้เข้าถึงฟังก์ชัน AI ผ่าน API ในผลิตภัณฑ์ของลูกค้า เอเจนต์ แอปพลิเคชัน และระบบอัตโนมัติ