ไม่มีดีไซเนอร์? ยืมระบบดีไซน์ที่พิสูจน์แล้วมาใช้กับแอปของคุณ

วิธีเลือกเว็บไซต์อ้างอิง#

เว็บไซต์ที่คุณยืมมาเป็นตัวกำหนดความรู้สึกส่วนใหญ่ของแอป ใช้เวลาตรงนี้สักสิบนาที เว็บไซต์อ้างอิงที่ดีมีลักษณะดังนี้:

• ผลิตภัณฑ์ประเภทเดียวกัน แดชบอร์ดยืมจากแดชบอร์ดอื่นได้ดี ไม่ใช่จากร้านแฟชั่น
• ความหนาแน่นใกล้เคียงกัน หากแอปของคุณเป็นฟอร์มและตาราง ให้เลือกเว็บไซต์ที่มีฟอร์มและตาราง ไม่ใช่เว็บไซต์ที่มีแค่ hero ขนาดใหญ่
• สีการกระทำที่ชัดเจนหนึ่งสี เมื่อมีสีเดียวที่บอกว่าต้องคลิกตรงไหน การรีแบรนด์ก็แค่เปลี่ยนกลุ่มสีนั้นกลุ่มเดียว
• ตัวอักษรที่อ่านได้สบาย เปิดเว็บไซต์บนมือถือแล้วอ่านหนึ่งย่อหน้า หากอ่านสบาย สเกลตัวอักษรก็คุ้มค่าที่จะนำมาใช้
• สว่างหรือมืด ตามที่คุณต้องการ การเปลี่ยนระบบที่เน้นธีมมืดให้เป็นธีมสว่างคือการออกแบบใหม่ ไม่ใช่การปรับเล็กน้อย
• หน้าตาที่ไม่ใช่ตัวแบรนด์เอง หากคุณจำเว็บไซต์ได้จากสีเพียงอย่างเดียว คุณจะต้องเปลี่ยนมากเกินไป

แกลเลอรี DESIGN.mdกรองตามหมวดหมู่ได้ ช่วยให้เปรียบเทียบตัวเลือกไม่กี่ตัวได้อย่างรวดเร็ว

ขั้นตอน#

1. 1

   คัดเลือกเว็บไซต์สองหรือสามแห่ง

   ใช้ลักษณะด้านบน ภาพหน้าจอของหน้าที่คุณชอบช่วยให้ตัดสินใจภายหลังได้ง่ายขึ้น

2. 2

   รับ DESIGN.md ของเว็บไซต์ที่ชอบที่สุด

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

3. 3

   ปรับให้เป็นของคุณ

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

4. 4

   วางไว้ใน repo แล้วบอกเอเจนต์ให้ใช้

   บันทึกเป็น DESIGN.md ที่ root ของ repository คู่มือ Claude Code และ Cursorมีข้อความอ้างอิงที่ต้องเพิ่ม

5. 5

   ตรวจสอบ

   วางไฟล์ที่แก้ไขแล้วลงในตัวตรวจสอบ DESIGN.mdฟรี ซึ่งตรวจโครงสร้างและแจ้งเตือนสีข้อความที่คอนทราสต์ต่ำเกินไป

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

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

สิ่งที่ควรเก็บไว้และสิ่งที่ควรเปลี่ยน

### Note on Font Substitutes
Notion Inter is a proprietary cut; use open-source **Inter** (variable) and keep the token tracking values exactly, since the negative display tracking is calibrated for Inter's metrics. Lyon Text is commercial; substitute **Source Serif 4** or **Newsreader** at the `quote` size and 1.55 line height, or fall back to Georgia as the site's own stack does. Check that the serif's x-height doesn't make 18px quotes read larger than surrounding 16px body.

ปรับให้เป็นของคุณด้วยพรอมต์เดียว#

Make DESIGN.md our own design system:
- Rename it from "Notion" to "Acme" in the front matter name and the title.
- Replace primary (#0075DE) with our brand color #2F6FEB, and recompute primary-focus, primary-link, primary-pressed, primary-tint as matching shades.
- Replace the old primary hex values everywhere they appear, including in the component recipes.
- Where Notion Inter or Lyon Text is a commercial font, swap it for the open-source stand-in the Typography section names.
- Rewrite the Overview in our voice: Acme helps small teams plan their week.
Keep every other token as it is, and check that text on the new primary meets 4.5:1 contrast.

ทำไมไม่ควรลอกแบรนด์ทั้งหมด#

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

จุดเริ่มต้นที่ดีจากแกลเลอรี แต่ละหน้ามี DESIGN.md ฉบับเต็ม พาเลตต์สี และตัวอย่างตัวอักษร

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

  Notion

  Notion หน้าแรกของหน้าการตลาดใช้ส่วนฮีโร่สีน้ำเงินเข้มโทนลึก (#02093a) คู่กับเนื้อหาส่วนอื่นพื้นสว่าง (#f6f5f4) โดยใช้ฟอนต์เฉพาะ NotionInter กับข้อความทุกระดับ ดีไซน์ใช้กริดสิบสองคอลัมน์ที่มีร่อง 28px และระบบมุมโค้งสองแบบ คือ 8px สำหรับการ์ด และ 9999px สำหรับปุ่มทรงแคปซูล สำหรับองค์ประกอบลอยตัวใช้ระบบเงาหลายชั้นที่เข้มขึ้นตามลำดับ ปุ่มเรียกการกระทำและจุดเน้นสำคัญใช้สีน้ำเงินของแบรนด์ (#2537b1) ส่วนลำดับความสำคัญของข้อความและพื้นผิวทั้งหมดจัดโครงสร้างด้วยชุดสีเทาตามความหมาย ตั้งแต่ gray-200 ถึง gray-900

• 
  การท่องเที่ยว การขนส่ง และโลจิสติกส์

  Airbnb

  Airbnb ใช้ระบบการออกแบบที่ตั้งอยู่บนฟอนต์แบบ variable ตัวเดียวที่เป็นกรรมสิทธิ์ (Airbnb Cereal VF) และชุดสีกลางเกือบเป็นขาวดำ โดยมีสีถ่านเข้ม (#222222) และสีเทาอ่อนเป็นหลัก ส่วนสีชมพูปะการัง "Rausch" (#ff385c) ซึ่งเป็นเอกลักษณ์ของแบรนด์ ถูกสงวนไว้เฉพาะสำหรับปุ่มเรียกร้องการกระทำหลัก (CTA) และโลโก้เท่านั้น เลย์เอาต์เป็นกริดการ์ดภาพที่ปรับตามขนาดหน้าจอ มีสัดส่วนพื้นที่ภาพต่อข้อความที่กว้างขวาง การ์ดมีมุมโค้งมน 20px ที่นุ่มนวล และระบบเงาแบบหลายชั้นที่ช่วยสร้างความลึกอย่างละมุน โดยไม่มีความตัดกันที่แข็งกระด้าง แถบค้นหาเป็นกล่องรูปแคปซูลที่เด่นชัด ทำหน้าที่รวมการกระทำหลักของผู้ใช้เข้าด้วยกัน

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

  Shopify

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

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