Claude Skill

ดาวน์โหลด

SKILL.md — B.Grimm Brand Design & Content Specialist (Part 1 — Brand Identity & Content Reference)

ไฟล์นี้คือกฎแบรนด์ทั้งหมด (สี, ฟอนต์, โลโก้, imagery style, corporate voice, slide deck guideline) รวบรัดในไฟล์เดียว สำหรับให้ Claude โหลดเข้า context แล้วใช้ตอบ/สร้างงานให้ตรงแบรนด์ทันที โดยไม่ต้องอธิบายกฎซ้ำทุกครั้งที่เริ่มแชท

สถานะ: มี Part 1 แล้ว ส่วนที่เหลือยังไม่ครบชุด

SKILL.md ฉบับปัจจุบันระบุไว้ในตัวเองว่าเป็น "Part 1 of the B.Grimm Design skill" และควรใช้คู่กับ html-workshop-style.md (สำหรับสร้างหน้าเว็บ) และ chartjs-guide.md (สำหรับงาน data visualization) — ไฟล์ทั้งสองนี้ยังไม่ถูกสร้าง ในตอนนี้ ใช้ SKILL.md เพียงไฟล์เดียวไปก่อน และอ้างอิงเนื้อหาที่เกี่ยวข้องจากเว็บไซต์นี้แทน (Framework Implementation สำหรับ page build, Data Visualization สำหรับ Chart.js)

โครงสร้างไฟล์

Claude Skill แบบเต็มชุดวางเป็นโฟลเดอร์เดียว โดยมี SKILL.md เป็นแกนหลัก และ references/ เก็บไฟล์ย่อยที่โหลดเพิ่มเฉพาะเมื่อจำเป็น:

bgrimm-design/
├── SKILL.md                       ← แกนหลัก โหลดก่อนเสมอ (Part 1)
└── references/
    ├── html-workshop-style.md     ← โหลดเพิ่มเมื่อสร้างหน้าเว็บ (ยังไม่มี)
    └── chartjs-guide.md           ← โหลดเพิ่มเมื่อทำ data viz (ยังไม่มี)

แต่ละ section ใน SKILL.md ทำหน้าที่อะไร

Section	หน้าที่	อ้างอิงเต็มบนเว็บ
Role and Purpose	กำหนดบทบาท AI ว่าเป็น "B.Grimm Brand Design & Content Specialist"	AI Usage Principles
Core Brand Philosophy	ปณิธานและ vibe ของแบรนด์ (Sophisticated, Compassionate, Clean…)	AI Usage Principles
1. Color Palette & Rules	60-30-10 rule + hex codes + contrast rule (WCAG) ที่บังคับใช้	Color Palette, Accessibility & Contrast
2. Typography Guidelines	font stack สองบริบท (Thai/bilingual vs English headline)	Typography
3. Logo & Brand Architecture	clear space, Garuda vs Plain, naming, ห้าม AI วาดโลโก้	Logo Usage
4. Design & Media Aesthetic	มาตรฐานภาพ ultra photorealistic + scenario A–G	Image Generation Guide
5. Writing & Communication Style	corporate voice, Thai/English tone	Writing Style
6. Presentation & Slide Deck	visual hierarchy, สีหัวสไลด์, ห้ามใส่ footer	Slide Deck Guidelines
Output Instructions	สรุปคำสั่งบังคับที่ AI ต้องทำทุกครั้ง (สี/ฟอนต์/logo URL/prompt)	—

วิธีติดตั้ง / activate

1. วางไฟล์ — ก๊อป SKILL.md (พร้อมโฟลเดอร์ references/ ถ้ามี) ไว้ในไดเรกทอรี skill ที่ Claude อ่าน หรือแนบเข้า project/แชทโดยตรง
2. ตั้งชื่อ + คำอธิบายให้ชัด — บรรทัดแรกของไฟล์บอกว่า "Load this file for: brand color rules, typography, logo handling…" เพื่อให้ Claude ตัดสินใจได้ถูกว่าเมื่อไหร่ควรโหลด
3. activate อัตโนมัติ — ไม่ต้องสั่งโหลดเอง เมื่องานเข้าเงื่อนไข (เช่น "สร้างหน้า landing B.Grimm") Claude จะดึงเนื้อหาเข้า context ให้เอง

Progressive Disclosure ทำงานยังไงใน Claude

Claude Skills ออกแบบให้ โหลดเฉพาะสิ่งที่จำเป็นตามลำดับ แทนที่จะยัดทุกอย่างเข้า context ทีเดียว:

1. Claude เห็นแค่ชื่อ + คำอธิบายสั้นของ skill ก่อน (เหมือนสารบัญ)
2. เมื่องานที่ทำเข้าเงื่อนไข (เช่น กำลังสร้างหน้าเว็บ B.Grimm) Claude จึงโหลดเนื้อหาเต็มของ SKILL.md เข้า context
3. ถ้า SKILL.md อ้างอิงไฟล์ย่อยเพิ่ม (เช่น references/html-workshop-style.md) Claude จะโหลดไฟล์นั้นเพิ่มเฉพาะตอนจำเป็นจริงๆ — ไม่โหลดทุกไฟล์ล่วงหน้า

ข้อดีคือประหยัด context และทำให้ skill ขยายเป็นชุดไฟล์ใหญ่ได้โดยไม่ทำให้ทุกการสนทนาหนักขึ้นโดยไม่จำเป็น — โครงสร้างนี้คือเหตุผลที่ B.Grimm Design skill แยกเป็นหลายไฟล์ (Part 1 + references) แทนที่จะเป็นไฟล์เดียวยาวๆ แบบ Open WebUI Skill

ตัวอย่าง session (progressive disclosure จริง)

User: ช่วยร่าง landing page B.Grimm Power พร้อมกราฟกำลังการผลิตให้หน่อย

[1] Claude เห็นชื่อ skill "B.Grimm Brand Design & Content Specialist" → เข้าเงื่อนไขงานแบรนด์
[2] โหลด SKILL.md เต็ม → ได้ 60-30-10 rule, font stack, logo URL, contrast rule
    → ร่าง HTML/CSS โทน off-white + orange accent 10% ใช้ logo URL official
[3] เจอคำว่า "กราฟ" → ควรโหลด references/chartjs-guide.md เพิ่ม
    (ไฟล์ยังไม่มี → Claude อ้างอิง Data Visualization บนเว็บแทน)
[4] ส่งงานพร้อมเว้น negative space สำหรับโลโก้จริง

จะเห็นว่า Claude ไม่ได้โหลดกฎ Chart.js ตั้งแต่แรก แต่โหลดเพิ่มเมื่อเจองานที่ต้องใช้จริง — ประหยัด context ในแชทที่ไม่มีกราฟ

Update workflow

1. แก้ที่ source of truth บนเว็บไซต์นี้ก่อน (เช่นเปลี่ยน accent color rule)
2. อัปเดต section ที่เกี่ยวข้องใน SKILL.md ให้ตรงกัน แล้วเพิ่มเลขเวอร์ชัน
3. เปลี่ยนไฟล์เดิมด้วยไฟล์ใหม่ในทุก tool ที่โหลด skill นี้อยู่ (ก็คือแทนที่ไฟล์ แล้วเริ่มแชทใหม่)
4. บันทึกการเปลี่ยนแปลงลง Changelog ถ้าเป็นการเปลี่ยนกฎ

Troubleshooting

• Claude ไม่ใช้กฎแบรนด์เลย — ตรวจว่าไฟล์ถูกวางในตำแหน่งที่ Claude อ่าน และบรรทัด "Load this file for…" อธิบายขอบเขตชัดพอให้ trigger; ถ้าจำเป็นสั่งตรงๆ ว่า "ใช้ B.Grimm brand skill"
• ใช้กฎเวอร์ชันเก่า — น่าจะยังเปิดแชทเดิมที่โหลดไฟล์ก่อนอัปเดต ให้เริ่มแชทใหม่หลังแทนที่ไฟล์
• โลโก้ในภาพเพี้ยน — Claude ไม่ควรสั่ง image generator วาดโลโก้อยู่แล้วตาม Section 3; ถ้ายังเกิด ให้ย้ำ negative prompt no text, no logos, no watermarks (ดู Image Generation Guide)
• สี/contrast ตกเกณฑ์ — ย้ำให้ยึด Section 1.1 และตรวจซ้ำที่ Accessibility & Contrast ก่อน ship