Lab เสริม — สร้าง Brand-kit Board สำหรับเว็บไซต์ด้วย brandkit

Lab นี้ใช้ skill brandkit จาก leonxlnx/taste-skill เพื่อสร้างภาพรวมทิศทางแบรนด์แบบ 3 × 3 แล้วแปลงภาพนั้นกลับเป็นข้อกำหนดที่นักออกแบบและนักพัฒนาเว็บไซต์ตรวจได้ ใช้เวลาประมาณ 60–90 นาทีสำหรับเรียนต่อด้วยตัวเอง และไม่เพิ่มเวลา workshop 2 วัน × 4 ชั่วโมง รวม 8 ชั่วโมง ของ AI Web Studio ใน 977-121 Module: Website Design and Development, มหาวิทยาลัยสงขลานครินทร์ วิทยาเขตภูเก็ต

กรณีศึกษาคือ HUSH แบรนด์เครื่องเสียงสมมติในหลักสูตร เพราะมี brief, evidence, palette, font direction และภาพสินค้าสมมติพร้อมแล้ว ผลลัพธ์เป็น DRAFT visual-direction board ไม่ใช่ brandbook master, โลโก้ vector ที่อนุมัติแล้ว หรือ screenshot ของเว็บไซต์ที่ทำงานจริง

brandkit ทำอะไรและไม่ทำอะไร

ไฟล์ upstream ที่ตรวจเมื่อ 11 กันยายน 2026 เป็น instruction-only skill จำนวน 798 บรรทัด ภายใต้ MIT License จาก revision ccbc15639c97057cbfcf32ecebc38ef716e4bb37 ค่า SHA-256 ของ SKILL.md ที่เก็บในหลักสูตรคือ b0c4837e1bd140ca816ae54948754ddd2ac1e2a4d3619363777a80caf00b2ede

Skill วางหลัก “strategy first” แล้วสร้างภาพ overview board โดยค่าปริยายเป็น grid 3 × 3 อัตราส่วน 4:3 หรือ 16:10 แต่ละ panel อาจแสดง wordmark, construction, digital application, tagline, palette, typography, physical application, image direction และ system detail โดยเน้นพื้นที่ว่าง ตัวอักษรน้อย และระบบภาพที่ต่อเนื่องกัน อ่าน pinned upstream SKILL.md

สิ่งที่ skill ไม่มี ได้แก่ research/evidence workflow, CSS token exporter, SVG logo source, accessibility test, approval record และ website implementation ผู้เรียนจึงต้องทำ Research → Website brief → Brandbook ก่อน แล้วใช้ board เป็น reference ระหว่าง brief กับการเขียนหน้าเว็บ

รักษา Rawinnipa และ PSU identity

Rawinnipa Brand Guidelines v1.0 ที่ /home/dev/projects/rawinnipa-brandbook/01-strategy/Rawinnipa_Brand_Guidelines_v1.0.md เป็น source of truth ของบริษัท มี R–W mark, logo variants, clear space, palette, Inter/Noto Sans Thai และ voice ที่กำหนดแล้ว ห้ามใช้ brandkit สร้างโลโก้ Rawinnipa ใหม่ เปลี่ยนสีหลัก หรือยกระดับ concept จากภาพเป็นกฎบริษัท

เว็บไซต์หลักสูตรใช้ Rawinnipa identity ภายใต้ข้อกำหนดของ course shell แต่ HUSH มีระบบสี Lilac/Iris ของตนเอง ห้ามผสมโลโก้หรือ palette สองแบรนด์ใน board นี้ และห้ามสร้างตราหรือ logo PSU ขึ้นเอง ชื่อ module/สถาบันเป็นบริบทการสอน ไม่ใช่สิทธิ์ให้ออกแบบอัตลักษณ์มหาวิทยาลัยใหม่

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

1. ใครเป็นเจ้าของชื่อ/เครื่องหมาย และใครมีอำนาจอนุมัติ
2. มี trademark search, master logo หรือข้อห้ามใดแล้ว
3. audience, positioning, promise และ claim ใดมีหลักฐาน
4. reference ใดใช้ได้ และสิทธิ์ของภาพ/font เป็นอย่างไร
5. output ใช้เพื่อเรียน, internal review หรือเผยแพร่เชิงพาณิชย์
6. ใครตรวจ brand, legal/rights, accessibility และ implementation

การไม่มีคำตอบไม่ใช่เหตุผลให้ AI เลือกแทน ให้เก็บเป็น GAP หรือทำ fictional exercise แยก

1. ตรวจ source และเลือกวิธีใช้ skill — 10 นาที

ใน source หลักสูตรมีสำเนาที่ pin และตรวจแล้ว:

training-skills/brandkit/
├── SKILL.md
├── LICENSE
├── SOURCE.json
└── README.md

ดาวน์โหลด SKILL.md ที่ pin แล้ว · MIT License · revision และ SHA-256

ตรวจไฟล์ก่อนใช้:

sed -n '1,80p' training-skills/brandkit/SKILL.md
sha256sum training-skills/brandkit/SKILL.md
sed -n '1,80p' training-skills/brandkit/LICENSE

ทางหลักในห้องเรียน: ใช้สำเนา pinned แบบ repository scope

คัดลอก skill ไปยังตำแหน่ง repo-local ที่ Codex อ่าน โดยไม่แก้สำเนาต้นฉบับ:

mkdir -p .agents/skills/brandkit
cp training-skills/brandkit/SKILL.md .agents/skills/brandkit/SKILL.md
cp training-skills/brandkit/LICENSE .agents/skills/brandkit/LICENSE

เปิด Codex ใหม่แล้วใช้ /skills ตรวจว่ามีชื่อ brandkit จากนั้นเรียกแบบ explicit ด้วย $brandkit เอกสาร OpenAI ระบุว่า Codex ค้นหา skills จาก .agents/skills ระหว่าง current directory ถึง repo root และเรียกได้ด้วย /skills หรือ $skill-name OpenAI: Build skills

ทางเลือก user scope

ถ้าต้องการใช้สำเนาที่ตรวจแล้วในหลาย repository ให้คัดลอกไป user-scope ของตน:

mkdir -p "$HOME/.agents/skills/brandkit"
cp training-skills/brandkit/SKILL.md "$HOME/.agents/skills/brandkit/SKILL.md"
cp training-skills/brandkit/LICENSE "$HOME/.agents/skills/brandkit/LICENSE"

Restart Codex หาก /skills ยังไม่แสดง skill ห้ามลบ skill ชื่อเดียวกันโดยไม่ตรวจ path เพราะ Codex อาจพบทั้ง repo scope และ user scope

ทางเลือกจาก skills.sh

หน้า registry เผยแพร่คำสั่งนี้:

npx skills add https://github.com/leonxlnx/taste-skill --skill brandkit

คำสั่ง npx เรียก third-party installer และดึง repository ปัจจุบันจาก network จึงอาจต่างจาก revision ที่บทเรียนตรวจ ให้เปิด registry listing, ตรวจ source, LICENSE, destination และ diff ก่อนยอมรับการติดตั้ง อย่ารันพร้อมสิทธิ์ผู้ดูแลระบบ และอย่าถือว่ารายการใน registry เป็นการรับรองจาก OpenAI สำหรับชั้นเรียนที่ต้องทำซ้ำได้ให้ใช้สำเนา pinned ด้านบน

2. เตรียม HUSH input pack — 10 นาที

เปิดไฟล์เหล่านี้จาก source repository:

• inputs.md — source S1–S4 และรายการข้อมูลขาด
• evidence.csv — FACT, INFERENCE, PROPOSAL, GAP
• brief.md — เป้าหมาย, CTA และข้อห้ามแต่ง claim
• brandbook.md กับ tokens.css — ค่า palette/type ที่ใช้เป็น source of truth
• assets.csv — ที่มาและสถานะ assets
• public/images/headphones.webp — reference image สมมติที่มี provenance เดิม

HUSH ONE map กับสินค้า fixture headphones / “หูฟัง Studio One” ราคาในเว็บจริงมาจาก API ส่วน 40 มม. และ 30 ชั่วโมงเป็น fictional concept ข้อมูล audience และ emotional promise ยังเป็น PROPOSAL ไม่มี approved HUSH logo จึงใช้เพียง uppercase HUSH wordmark treatment เดิม และไม่สร้าง symbol ใหม่ในรอบนี้

Prompt A — ตรวจ source ก่อนสร้างภาพ

คัดลอก prompt นี้ใน Codex จาก root ของ course repository:

$brandkit

ยังไม่สร้างภาพในรอบนี้ ให้ตรวจความพร้อมของ HUSH brand-kit board แบบอ่านอย่างเดียว
อ่านเฉพาะไฟล์ต่อไปนี้:
- public/labs/hush-brand-kit/inputs.md
- public/labs/hush-brand-kit/evidence.csv
- public/labs/hush-brand-kit/brief.md
- public/labs/hush-brand-kit/brandbook.md
- public/labs/hush-brand-kit/tokens.css
- public/labs/hush-brand-kit/assets.csv
- docs/assets/image-provenance.md เฉพาะรายการ headphones
- public/images/headphones.webp ในฐานะ reference asset

สรุปเป็นตาราง: สิ่งที่จะปรากฏ | source ID/file | FACT/INFERENCE/PROPOSAL/GAP | ข้อห้ามสื่อเกินจริง
ยืนยันว่า HUSH เป็น fictional course brand, HUSH wordmark เป็น treatment ไม่ใช่ approved logo,
40 mm/30 ชั่วโมงไม่ใช่ verified performance และราคาไม่ควรอยู่ใน raster board
ตรวจ palette จาก brandbook/tokens โดยไม่ดูดสีจากภาพ
เสนอ panel plan 3 × 3 ให้ตรง workflow ของ brandkit แต่ยังไม่เรียก image generator
แยกคำถามที่ต้องถามเจ้าของออกจากข้อเสนอ และหยุดหาก source ขัดกัน
ห้ามสร้าง Rawinnipa/PSU logo, ห้ามแก้ไฟล์ และห้ามอ้างว่าได้สร้าง output แล้ว

Checkpoint: panel plan ทั้งเก้าช่องต้องอ้าง source/สถานะได้ ใช้ HUSH palette เท่านั้น และไม่มีข้อความขาย/สเปก/ราคาใหม่

3. สร้าง 3 × 3 Brand-kit Board — 15–25 นาที

เริ่ม session ใหม่หรือยืนยันว่า $brandkit active แล้ว แนบ public/images/headphones.webp เป็น reference image ตามวิธีที่ Codex surface รองรับ จากนั้นส่ง prompt ฉบับเต็มด้านล่าง

หากใช้ built-in image generation ใน Codex ไม่ต้องใส่ API key ใน prompt ใช้ GPT Image 2 เมื่อหน้าเครื่องมือมี model selector และเลือกได้จริง หาก surface ไม่แสดงชื่อ model ให้บันทึกชื่อเครื่องมือ/สถานะที่เห็นจริง และอย่าเขียนย้อนหลังว่าใช้ GPT Image 2 Skill brandkit เองไม่ได้กำหนด model หรือสิทธิ์บัญชี

Prompt B — Generate HUSH board

ส่วนภาษาอังกฤษใน prompt นี้ตรงกับไฟล์ generation-prompt.txt ของ worked example; $brandkit เป็นคำเรียก skill ใน Codex ก่อนส่งเนื้อหาส่วนภาษาอังกฤษเข้าเครื่องมือสร้างภาพ:

$brandkit

Use case: logo-brand / brand-kit overview image for a university website-design lab.
Create one art-directed 3x3 identity overview board for the fictional audio brand HUSH, landscape 4:3. Apply the brandkit skill principles: strategy first, clean grid, generous gutters, quiet visual hierarchy, sparse text, a coherent brand idea across all nine panels. Use GPT Image 2 if the generation surface supports model selection.
Reference image role: the supplied image is an existing AI-generated fictional lilac headphone product image from the HUSH course website. Use this exact product design and color as visual reference; do not turn it into a different product or add a famous brand mark.
Brand strategy: fictional headphones for calm, focused listening. Audience and emotional promise are course proposals, not validated customer research. Personality: calm, precise, considered. Metaphor: making space around the sound we choose.
Existing identity constraints: use the uppercase text HUSH as a simple bold sans-serif wordmark treatment consistently, no new symbol/mascot/approved-logo claim. HUSH ONE is the fictional product line. Typography direction is Inter Bold for the wordmark and IBM Plex Sans Thai for live website body text; the bitmap only needs a few large English labels.
Palette locked to current HUSH website: Cloud #F5F5F7, Ink #22202B, Lilac #DCD5FF, Iris #6551B7, Muted #686471, White #FFFFFF. Prefer a light editorial canvas with lilac surfaces and one dark ink panel. No arbitrary forest green, gold or neon.
Nine panels in order: 1 quiet HUSH wordmark cover, 2 typographic spacing/construction study of HUSH (concept exploration, not a certified clear-space rule), 3 sparse desktop website hero concept with the same headphones, 4 very large HUSH ONE text and calm negative space, 5 five clean palette swatches, 6 sparse large typography specimen Aa / HUSH, 7 unbranded concept packaging with HUSH text only, 8 cinematic macro crop of the reference headphones, 9 one mobile product card concept and a restrained row of simple outline interface symbols.
Only in-image text: HUSH, HUSH ONE, Aa, CONCEPT. No dense body copy, fake measurements, prices, feature claims, battery hours, customer quotes, awards, URLs, Apple marks, PSU logos or Rawinnipa logo. These panels are generated brand application concepts, not screenshots of a working application or final production assets.
Keep all repeated HUSH lettering consistent; use real negative space and refined alignment; avoid clutter, tiny fake UI, exaggerated neon, decorative gradients, unrelated landscapes and random luxury crests. Render one coherent presentation-ready image with the nine panels clearly separated by generous light gutters.

บันทึกไฟล์ต้นฉบับใหม่เป็น board.png และทำ delivery copy เป็น board.webp โดยไม่ overwrite headphones.webp เก็บ exact prompt, reference asset, tool/model metadata ที่ surface คืนจริง, วันที่, output size/hash และสถานะ draft-course-concept / unapproved ใน asset manifest

ถ้าไม่มี image-generation tool หรือสิทธิ์บัญชี ให้หยุดที่ prompt + panel plan และระบุ NOT GENERATED ยังสามารถทำขั้น review โดยใช้ worksheet เปล่าได้ ห้ามวางภาพอื่นแล้วอ้างว่าเป็น output ของรอบนี้

ตัวอย่างที่รันสำหรับหลักสูตร

ผลที่สร้างจริงใน worked example

ภาพ: ผลสร้างจริงผ่าน built-in image generation ใน Codex เมื่อ 11 กันยายน 2026 · 1448 × 1086 px · เป็นภาพ concept ไม่ใช่ screenshot ของเว็บไซต์ · เครื่องมือไม่รายงาน model ID จึงไม่อ้างชื่อ model ย้อนหลัง

เปิดหน้า worked example และตรวจทั้ง 9 panels · PNG ต้นฉบับ · Prompt ที่ส่งเข้าเครื่องมือจริง

Deviation ที่ยอมรับ: prompt ระบุความชอบให้มี dark Ink panel หนึ่งช่อง แต่ภาพจริงไม่มี panel พื้นมืด ผู้ตรวจยังรับเป็น direction เพราะใช้ Ink ใน wordmark/type และรักษา HUSH light/lilac direction เดิม จึงไม่อ้างว่าภาพตรง prompt ทุกข้อ และไม่เปลี่ยน exact prompt ย้อนหลัง

รอบนี้อ่านสำเนา skill ที่ pin ไว้และแนบภาพ public/images/headphones.webp จากเว็บ HUSH เดิม ใช้ built-in image tool โดยไม่ได้ติดตั้ง skill แบบ global ผลตรวจคือ ACCEPT FOR DIRECTION: ช่อง 2 เป็น spacing study ที่ยังใช้เป็นกฎโลโก้ไม่ได้, ช่อง 7 เป็น packaging concept ที่ไม่มีข้อมูลผลิตจริง และสัญลักษณ์ในช่อง 9 ไม่ใช่ไฟล์ SVG หรือฟังก์ชันใหม่ของเว็บไซต์

ไฟล์สำหรับทำตาม: source audit, review ราย panel, website handoff proposal และ manifest พร้อม hash/provenance สีและ font ที่ใช้เขียนเว็บยังอ่านจาก HUSH tokens.css เดิม ไม่ดึงจาก raster ภาพนี้ยังไม่ได้เปลี่ยน source หรือ behavior ของ /examples/store/

ภาพหน้าจอของหน้าตัวอย่างที่เปิดใช้งานจริง

ภาพหน้าจอ: capture จาก browser จริงขนาด 1440px ของหน้า /labs/brandkit-hush/ ในโหมดสว่าง ภาพ board ภายในหน้านี้เป็น AI-generated concept

ภาพหน้าจอ: capture จาก browser จริงขนาด 390px เพื่อดูการเรียงเนื้อหาบนมือถือ เป็นหน้าเอกสารตัวอย่าง ไม่ใช่ native mobile app หรือหน้าจอ Codex Desktop

ภาพตัวอย่างต้องระบุ prompt, input reference, output files และเครื่องมือที่ใช้จริง การเห็น HUSH, palette หรือ mockup ใน board ไม่ยืนยันว่า spelling, contrast, product shape หรือ website behavior ถูกต้อง

4. Review Board แบบ panel ต่อ panel — 15 นาที

อย่าเลือกภาพเพราะ “ดูแพง” เพียงอย่างเดียว เปิด board เทียบ source แล้วตรวจ panel 1–9 ให้ครบ หาก raster สะกด HUSH ผิด, เปลี่ยนรูปสินค้า, ใส่ข้อความต้องห้าม หรือสร้าง mark ใหม่ ให้ reject/regenerate โดยระบุ defect ไม่ใช้ภาพนั้นเป็น master asset

Prompt C — Source mapping และ defect review

$brandkit

Review ภาพ HUSH brand-kit board ที่แนบแบบอ่านอย่างเดียวเทียบกับ:
- public/labs/hush-brand-kit/inputs.md
- public/labs/hush-brand-kit/evidence.csv
- public/labs/hush-brand-kit/brandbook.md
- public/labs/hush-brand-kit/tokens.css
- public/labs/hush-brand-kit/assets.csv
- exact generation prompt ที่ใช้จริง

ตรวจ panel 1–9 แยกแถว โดยรายงาน:
panel | สิ่งที่เห็นจริง | source/constraint | ผ่าน/แก้/อ่านไม่ชัด | ผลกระทบต่อเว็บไซต์
ตรวจ spelling ของ HUSH/HUSH ONE/Aa/CONCEPT, ความสม่ำเสมอของ wordmark,
สีเทียบค่าจาก source, การคงรูป reference headphones, panel order, gutter และ visual hierarchy
ค้นหาข้อความ/สัญลักษณ์ต้องห้าม: ราคา, สเปก, battery hours, award, testimonial,
Apple mark, PSU logo, Rawinnipa logo, symbol/mascot ใหม่ หรือ fake functional UI
แยก defect ของ raster ออกจาก GAP ของ brand strategy
อย่าดูด hex, spacing หรือ font metrics จากภาพเพื่อเขียน token
อย่าเรียก board ว่า approved brandbook, vector logo, accessible UI หรือ website screenshot
ท้ายรายงานให้คำตัดสิน ACCEPT FOR DIRECTION / REGENERATE / REJECT พร้อมเหตุผลและรายการ owner decisions
ห้ามแก้ source หรือสร้างภาพใหม่ในรอบ review นี้

Checkpoint: review ต้องมีหลักฐานภาพจริงต่อ panel และคำตัดสินที่ไม่เกินขอบเขต หากอ่านข้อความเล็กไม่ได้ให้เขียน “อ่านไม่ชัด” ไม่เดาคำ

5. แปลง art direction เป็น website handoff — 15–20 นาที

Board ไม่ใช่ code ใช้ brief/brandbook/tokens เป็นค่าหลัก แล้วนำเฉพาะ pattern ที่ผ่าน review เช่น negative space, panel rhythm, product crop และความสัมพันธ์ Cloud/Lilac/Ink ไปใช้กับหน้า HUSH รักษา product ID, API pricing, quote-demo behavior, accessibility และ responsive rules จาก source เดิม

Prompt D — วางแผน integration โดยไม่ให้ raster กลายเป็น UI spec

ช่วยแปลง HUSH brand-kit board ที่ผ่าน review เป็น website handoff โดยยังไม่แก้ code
อ่าน brief.md, brandbook.md, tokens.css, handoff.md, evidence.csv, assets.csv ของ HUSH,
review panel-by-panel และหน้า examples/store/ ปัจจุบัน

สร้างตาราง:
website section/component | board pattern ที่นำมาใช้ | source of truth | token/asset จริง |
HTML copy | responsive behavior | accessibility check | สิ่งที่ไม่ควรนำจาก raster

กฎ:
- ใช้สี/font/spacing จาก brandbook และ tokens.css ไม่ sample จาก board
- ใช้ HUSH uppercase เป็น wordmark treatment เดิม ไม่ crop raster มาเป็น logo
- ข้อความ ราคา CTA และสถานะเป็น live HTML; ราคาอ่านจาก API เดิม
- board เป็น decorative/art-direction reference ไม่ใช่ screenshot หรือ functional prototype
- ไม่สร้าง product claim, audience fact, checkout, PSU/Rawinnipa mark หรือ component ที่ไม่มีใน brief
- ที่ 320/390px ให้ content/CTA อยู่ใน natural flow และภาพไม่ทำให้ horizontal overflow
- ระบุ alt intent, keyboard/focus, reduced motion, loading/empty/error/success และ test ที่ต้องรัน
- แยก ACCEPTED, ADAPTED, REJECTED และ GAP สำหรับทุกแนวคิดจาก board

ส่ง output เป็น handoff proposal พร้อมรายการไฟล์ที่อาจแก้และ acceptance criteria
ห้ามแก้ไฟล์จนเจ้าของงานเลือกข้อเสนอและอนุมัติขอบเขต

หลังเจ้าของเลือก handoff จึงค่อยใช้ บทเรียน 07 — GSAP product story หรือ Lab สร้างเว็บไซต์ด้วย Codex ทีละขั้น เพื่อ implement และตรวจ browser จริง

Output ที่ต้องส่ง

brandkit-hush/
├── source-audit.md
├── generation-prompt.txt
├── board.png
├── board.webp
├── panel-review.md
├── website-handoff.md
└── asset-manifest.json

หากไม่ได้ generate ให้ส่ง generation-prompt.txt, panel plan และไฟล์ NOT-GENERATED.md แทน ไม่สร้างไฟล์ภาพเปล่าหรือคัดภาพจากที่อื่นให้ดูเหมือนทำครบ

ใช้ asset-manifest.json เช่นเดียวกับ ไฟล์ worked example โดยอย่างน้อยมี status, created, tool, model ตามที่เครื่องมือรายงาน, skillCommit, skillSha256, reference, referenceSha256, dimensions, rightsNote และ files ที่เก็บ SHA-256/bytes ของแต่ละ output รวม generation-prompt.txt ไม่ต้องสร้าง CSV อีกชุด

ไม่ใส่ API key, access token, private path, student data หรือ unpublished brand strategy ลง prompt/manifest การใช้ image service เป็นการส่งข้อมูลออกนอกเครื่อง ให้แนบเฉพาะ excerpt/asset ที่มีสิทธิ์และตรงขอบเขต

Rubric 20 คะแนน

Definition of Done

• ตรวจ upstream identity, pinned revision, license และ skill path ก่อนใช้
• เรียก $brandkit ได้จาก path ที่ผู้เรียนตรวจจริง หรือระบุว่าติดตั้งไม่สำเร็จ
• input pack ไม่ผสม Rawinnipa, PSU และ HUSH identity
• exact generation prompt และ reference asset ถูกบันทึก
• model/tool record ตรงกับสิ่งที่ surface แสดง ไม่เดาชื่อ model
• board เป็น draft concept และไม่ถูกใช้เป็น logo, token source หรือ accessible UI
• ทุก panel มี review; rejected defect ไม่ถูกส่งต่อเข้าเว็บ
• website handoff รักษา API pricing, fictional labels, live text และ UI states เดิม
• output manifest มี hash/status/rights note และไม่มี secret
• สิ่งที่ยังต้องถามเจ้าของคงเป็น GAP พร้อมผู้มีอำนาจตัดสินใจ

ผลสำเร็จของ Lab คือผู้เรียนอธิบายได้ว่า skill ช่วยสร้าง visual argument อย่างไร และรู้ว่าต้องตรวจ/แปลงอะไรต่อก่อน board จะมีผลต่อเว็บไซต์จริง ไม่ใช่เพียงได้ภาพสวยหนึ่งภาพ