คู่มือ

ผสานเว็บไซต์อ้างอิงสองแห่งเป็นดีไซน์เดียวสำหรับต้นแบบ

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

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

เขียนสำหรับดีไซเนอร์และเอเจนซีที่ทำต้นแบบ อัปเดตเมื่อ

สิ่งที่คุณจะได้

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

การผสานทำงานอย่างไร

การผสานไม่ใช่การหาค่าเฉลี่ย การผสมพาเลตต์สีครึ่งหนึ่งจากเว็บไซต์หนึ่งกับอีกครึ่งจากอีกเว็บไซต์จะได้เว็บไซต์ที่ไม่เหมือนทั้งสองแห่ง สิ่งที่ได้ผลคือไฟล์ฐานหนึ่งไฟล์บวกส่วนที่ระบุชื่อไม่กี่ส่วนจากอีกไฟล์:

  • ฐาน ให้โครงสร้าง ได้แก่ สเกลตัวอักษร ระยะห่าง ความโค้งมุม และสูตรคอมโพเนนต์
  • ส่วนเสริม (accent) ให้ยืมทั้งกลุ่ม เช่น กลุ่มสี primary หรือฟอนต์ display ไม่ใช่ค่าเดี่ยว ๆ กระจัดกระจาย

ทั้งสองไฟล์เป็นไปตามสเปก DESIGN.md ของ Google กลุ่มต่าง ๆ จึงตรงกัน ได้แก่ colors, typography, rounded, spacing และ components ดูว่า DESIGN.md มีอะไรบ้างสำหรับโครงสร้างทั้งหมด

ขั้นตอน

  1. รับไฟล์ทั้งสอง

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

  2. วางไว้เคียงข้างกัน

    เปรียบเทียบสี primary พื้นหลัง ฟอนต์ ขนาดตัวอักษร และความโค้งมุม ตามตารางด้านล่าง

  3. เลือกฐาน

    เลือกเว็บไซต์ที่เลย์เอาต์และความหนาแน่นตรงกับต้นแบบ

  4. ระบุสิ่งที่ส่วนเสริมให้ยืม

    เขียนเป็นกลุ่มโทเค็น เช่น “กลุ่มสี primary ของเว็บไซต์นั้น”

  5. รวมด้วยมือหรือด้วยเอเจนต์

    ทั้งสองวิธีอยู่ด้านล่าง บันทึกผลลัพธ์เป็น DESIGN.md ใน repo ของต้นแบบ

  6. ตรวจสอบคอนทราสต์และโครงสร้าง

    วางไฟล์ที่รวมแล้วลงในตัวตรวจสอบ DESIGN.mdฟรี

ตัวอย่างจริง: Notion ผสาน Stripe

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

NotionStripe
Primary#0075DE#533AFD
พื้นหลัง#FFFFFF#FFFFFF
ข้อความ#000000#061B31
ฟอนต์Notion Inter, Lyon TextSohne
ตัวอักษรใหญ่ที่สุดhero-display, 96px, น้ำหนัก 600hero-display, 56px, น้ำหนัก 500
ตัวอักษรเนื้อหาbody, 16px, น้ำหนัก 400body-lg, 18px, น้ำหนัก 300
ความโค้งมุมของปุ่ม8px4px
โทเค็นสี2021
สูตรคอมโพเนนต์1471

วิธีหนึ่งในการผสาน

ใช้ Notion เป็นฐานสำหรับตัวอักษร ระยะห่าง ความโค้งมุม และคอมโพเนนต์ แล้วให้ Stripe ให้ยืมกลุ่มสี primary (primary, primary-focus, primary-bright, primary-pressed, primary-deep, primary-soft) นี่คือบรีฟคลาสสิกแบบ “เลย์เอาต์ของเรา พลังของเขา”

ตรวจสอบตัวเลขก่อนตัดสินใจ สี primary ของ Stripe บนพื้นหลังของ Notion มีคอนทราสต์ 6.1:1 ข้อความ on-primary ของ Notion บนสี primary ใหม่มีคอนทราสต์ 6.1:1 ข้อความเนื้อหาต้องมีอย่างน้อย 4.5:1 ตาม WCAG AA ส่วนข้อความขนาดใหญ่และไอคอนต้องมี 3:1

กับดักหนึ่งข้อ: สี primary เดิมของ Notion คือ #0075DE ปรากฏ 65 ครั้งในไฟล์ ส่วนใหญ่อยู่ในสูตรคอมโพเนนต์ การเปลี่ยนโทเค็นด้านบนอย่างเดียวไม่พอ ต้องเปลี่ยนทุกจุดที่ซ้ำ

ภาพประกอบของการรวมด้วยมือตามที่อธิบายด้านบน ซึ่งหน้านี้ประกอบขึ้นจากไฟล์สองไฟล์ในแกลเลอรี: โทเค็นของ Notion กับกลุ่มสี primary ของ Stripe แบบย่อ ภาพนี้ไม่ใช่ฟีเจอร์ของ Design Extractor และไม่ใช่ผลลัพธ์จากเอเจนต์
---
name: Notion and Stripe prototype
colors:
  primary: "#533AFD"
  primary-focus: "#5452FB"
  primary-bright: "#635BFF"
  primary-pressed: "#4032C8"
  primary-deep: "#2E2B8C"
  primary-soft: "#D6D9FC"
  on-primary: "#FFFFFF"
  ink: "#000000"
typography:
  hero-display:
    fontFamily: Notion Inter
    fontSize: 96px
    fontWeight: 600
    lineHeight: 1.05
    letterSpacing: -4.6px
  body:
    fontFamily: Notion Inter
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: normal
rounded:
  xs: 4px
  sm: 8px
  md: 12px
  full: 9999px
---

รวมด้วยมือ

  1. คัดลอกไฟล์ฐานเป็น DESIGN.md แล้วเปลี่ยน name
  2. ใน colors ให้แทนที่กลุ่มสี primary ของฐานด้วยค่าของส่วนเสริม
  3. ค้นหาค่า hex เดิมแต่ละค่าในทั้งไฟล์แล้วแทนที่ สูตรคอมโพเนนต์ใช้สีซ้ำใน CSS การแก้รายการโทเค็นอย่างเดียวจึงไม่พอ
  4. เขียนข้อความในส่วน Overview และ Colors ใหม่ให้อธิบายผลลัพธ์ที่ผสาน ไม่ใช่แบรนด์ใดแบรนด์หนึ่ง
  5. ตรวจสอบไฟล์ในตัวตรวจสอบและแก้คำเตือนเรื่องคอนทราสต์

รวมด้วยเอเจนต์

บันทึกทั้งสองไฟล์ใน repo ของต้นแบบ เช่น ใต้ design/ แล้วให้พรอมต์กับเอเจนต์ที่ระบุฐาน กลุ่มที่จะนำมาใช้ และการตรวจสอบที่ต้องทำ พรอมต์นี้เขียนขึ้นสำหรับคู่มือนี้โดยใช้ชื่อไฟล์และชื่อโทเค็นจริง

Read design/notion.DESIGN.md and design/stripe.DESIGN.md. Write DESIGN.md for our prototype:
- Start from the Notion file: keep its typography, spacing, rounded tokens and component recipes.
- Take Stripe's primary color family (primary, primary-focus, primary-bright, primary-pressed, primary-deep, primary-soft) and use it wherever the Notion file uses its own primary colors, including inside the component recipes.
- Rename the file and rewrite the Overview and Colors prose so they describe the blend, not either brand.
- Keep the section order of Google's DESIGN.md spec, and make sure text on the new primary meets 4.5:1 contrast.
List every value you changed.

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

FAQ

ผสานดีไซน์ของสองเว็บไซต์เป็นหนึ่งเดียว: คำถามที่พบบ่อย

คำตอบสั้น ๆ สำหรับคำถามที่คนมักถามก่อนลองทำ

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

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

ไฟล์ที่เลย์เอาต์และความหนาแน่นตรงกับต้นแบบ หากลูกค้าต้องการผลิตภัณฑ์ที่สงบเหมือนเอกสารแต่ใช้สีของอีกเว็บไซต์ เว็บไซต์ที่สงบคือฐาน และอีกเว็บไซต์ให้ยืมสี ไม่ใช่กลับกัน

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

รับไฟล์ทั้งสองสำหรับบรีฟของคุณ

วาง URL ของเว็บไซต์อ้างอิงแต่ละแห่งแล้วรับ DESIGN.md พร้อมเปรียบเทียบและรวม

ดึง DESIGN.md จากเว็บไซต์ใดก็ได้

คู่มือที่เกี่ยวข้อง

ดูคู่มือ DESIGN.md ทั้งหมด