คุม CI ให้ AI ทำเว็บ: กำหนดสี ฟอนต์ และระยะห่างให้ทั้งเว็บไปทางเดียวกัน

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

โดย อ.กอร่า — Gorra Design | ทบทวน 29 ตุลาคม 2569

ภาพคอนเซ็ปต์และเดโมในบทนี้ใช้ประกอบการสอน แบรนด์และชิ้นงานตัวอย่างเป็นงานสมมติ

ทำไมบอกแค่สีส้มยังไม่พอ?

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

กำหนดกฎอะไรให้ AI?

ระบุสีหลักและรอง ฟอนต์ไทยกับอังกฤษ ขนาดหัวข้อ ระยะห่าง ปุ่ม รูปทรง และแนวภาพ เก็บกฎไว้ในไฟล์คำแนะนำของโปรเจกต์หรือเอกสารที่เครื่องมืออ่านได้ ภาพประกอบใช้แบรนด์สมมติเดียวกันและแสดงค่าตัวอย่าง ไม่ใช่ CI ทางการของ Gorra

Prompt คุมแบรนด์

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

ตรวจอะไรเมื่อเพิ่มหน้าใหม่?

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

คำถาม: ใช้กฎแบรนด์แล้วงานจะเหมือนกันหมดไหม?

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

เรียนต่อจากบทนี้

เริ่มต้น Codex และ Vibe Coding สำหรับนักออกแบบ

รายละเอียดคลาส AI Solo Creative กับ อ.กอร่า

อ้างอิง

ความหมายและบทบาทของ Codex: OpenAI — Code generation แนวทางออกแบบและภาพสาธิตในบทนี้เรียบเรียงโดย Gorra Design ตรวจข้อมูลผู้ผลิตอีกครั้งเมื่อเริ่มใช้งานจริง