Browse commands

/impeccable document

Document

สร้าง DESIGN.md ที่สอดคล้องกับสเปคซึ่งบันทึกระบบภาพของคุณเพื่อให้ทุกเอเจนต์ AI อยู่ในแบรนด์

DESIGN.mdGoogle Stitch format
01Overview

Creative North Star: “The Editorial Sanctuary.” ตัวอักษรเงียบ อากาศอุดม สีเน้นเดียวที่มุ่งมั่น

02Colors
03Typography
AaCormorant Garamond · Instrument Sans
04Elevation

แบนโดยดีฟอลต์ เงาปรากฏเฉพาะเป็นการตอบสนองต่อสถานะ

05Components
06Do’s and Don’ts
ปรับโทนกลางๆ ไปทางเฉดสีเน้นข้อความไล่สีเพื่อเน้น

หกส่วนถูกกำหนดไว้ ในลำดับที่กำหนดไว้ ด้วยชื่อที่กำหนดไว้ ควบคู่กันนั้น DESIGN.json ถูกส่งมอบเป็นไซด์แคร์แบบอ่านได้ด้วยเครื่องสำหรับแผงการออกแบบ Live Mode

เมื่อไรควรใช้

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

ใช้เมื่อ:

  • คุณเพิ่งรัน /impeccable teach และ PRODUCT.md มีอยู่แล้ว Document คือไฟล์ด้านภาพที่ตรงกัน
  • คำสั่งเตือนคุณ Live, craft และ polish ทั้งหมดอ่าน DESIGN.md หากมันหายไป สกิลแนะนำให้รัน document ก่อน
  • การออกแบบเบี่ยงเบน จาก DESIGN.md เก่าแล้วไฟล์ไม่ได้อธิบายระบบจริงอีกต่อไป
  • ก่อนการออกแบบใหม่ครั้งใหญ่ เพื่อบันทึกสถานะปัจจุบันเป็นข้อมูลอ้างอิงสำหรับทิศทางถัดไป

สำหรับโปรเจกต์ที่ยังไม่มีโค้ด (รัน teach ใหม่ ยังไม่ได้สร้างอะไร) มีโหมด seed: /impeccable document --seed ถามห้าคำถามกลยุทธ์ที่รวดเร็ว (กลยุทธ์สี ทิศทางตัวอักษร พลังงานการเคลื่อนไหว การอ้างอิง การอ้างอิงตรงข้าม) และเขียนโครง รันใหม่ในโหมดสแกนเมื่อมีโค้ดแล้ว

วิธีการทำงาน

พาสสแกนหาสินทรัพย์การออกแบบตามลำดับความสำคัญ: CSS custom properties, การตั้งค่า Tailwind, ธีม CSS-in-JS, ไฟล์โทเคนการออกแบบ, ซอร์สคอมโพเนนต์, สไตล์ชีตส่วนกลาง และสุดท้ายสไตล์ที่คำนวณจากผลลัพธ์ที่เรนเดอร์จริงหากมีเบราว์เซอร์ มันดึงอัตโนมัติทุกอย่างที่สามารถ แล้วถามคำถามกลุ่มเดียวสำหรับส่วนที่ต้องการข้อมูลเชิงสร้างสรรค์: Creative North Star (อุปมาอุปไมยที่มีชื่อเดียวสำหรับทั้งระบบ เช่น “The Editorial Sanctuary”) ชื่อสีแบบอธิบาย ปรัชญาระดับความสูง และลักษณะคอมโพเนนต์

ผลลัพธ์คือ DESIGN.md ที่มีหกส่วนพอดี: Overview, Colors, Typography, Elevation, Components, Do’s and Don’ts ส่วนหัวถูกกำหนดอักขระต่ออักขระเพื่อให้ไฟล์สามารถแยกวิเคราะห์ได้ด้วยเครื่องมืออื่น ควบคู่กันนั้น DESIGN.json ถูกเขียนเป็นไซด์แคร์แบบอ่านได้ด้วยเครื่อง ไซด์แคร์นั้นคือสิ่งที่แผงการออกแบบโหมดไลฟ์ใช้เรนเดอร์ปุ่ม อินพุต นำทาง และไทล์การ์ดของ โปรเจกต์นี้ จริงๆ แทนที่จะเป็นการประมาณแบบทั่วไป

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

ลองใช้งาน

/impeccable document

บนโปรเจกต์ที่มีโทเคนกำหนดไว้แล้ว ใช้เวลาประมาณสองนาที: สแกนหาพาเลตและสแตกตัวอักษรของคุณ คุณเลือก North Star จาก 2-3 ตัวเลือก ยืนยันชื่อสีแบบอธิบาย (“Deep Muted Teal-Navy” ไม่ใช่ “blue-800”) แล้วไฟล์ลงที่รูทโปรเจกต์

บนโปรเจกต์ใหม่:

/impeccable document --seed

ห้าคำถาม ประมาณห้านาที ไฟล์เป็นโครง ทำเครื่องหมายด้วยความคิดเห็น <!-- SEED --> เพื่อให้ซื่อสัตย์เกี่ยวกับสิ่งที่มันเป็น รันใหม่โดยไม่มีแฟลกเมื่อคุณสร้างโทเคนแล้ว

ข้อควรระวัง

  • รันเร็วเกินไป บนโปรเจกต์ที่ไม่มีโทเคนที่สร้างแล้ว โหมด seed ถูกต้อง อย่าสร้างสเปคเต็มรูปแบบที่โค้ดไม่สามารถสนับสนุนได้ DESIGN.md ปลอมแย่กว่าไม่มี DESIGN.md
  • ถือว่า DESIGN.md เป็นเอกสารสำหรับมนุษย์เท่านั้น มันเป็นหลักสำหรับ AI ทุกคำสั่งอื่นอ่านมัน ความแรงของรูปแบบ (“never”, “always”, Named Rules) เป็นการตั้งใจ
  • เพิ่มส่วน Layout / Motion / Responsive ระดับบนสุด สเปคมีหกส่วน ในลำดับที่กำหนดไว้ ด้วยชื่อที่กำหนดไว้ พับเนื้อหาเลย์เอาต์หรือการเคลื่อนไหวเข้าใน Overview (กฎระดับปรัชญา) หรือ Components (พฤติกรรมต่อคอมโพเนนต์)
  • เขียนทับ DESIGN.md ที่มีอยู่แบบเงียบๆ Document ยืนยันเสมอก่อนเสมอ หากคุณต้องการเริ่มใหม่ เปลี่ยนชื่อไฟล์เดิมหรือบอกสกิลอย่างชัดเจนให้เขียนทับ