Talent Scale Design Framework

ข้อบังคับ

สิบสองข้อนี้ไม่ใช่คำแนะนำ ทุกหน้าใหม่ต้องผ่านครบก่อนขึ้นจริง

เรื่อง	กติกา
ฟอนต์	Prompt อย่างเดียว ห้ามปนฟอนต์อื่นบนหน้าเว็บ
ขนาด	ใช้ได้ 5 ขนาดเท่านั้น ห้ามคิดขนาดใหม่ ห้ามเขียนขนาดลงในไฟล์หน้าเว็บ
ระยะบรรทัด	display และ heading 1.30 (`--lh-display` `--lh-heading`) ให้หัวเรื่องอ่านเป็นก้อน — พอล 5 ก.ย. 2026 · ตรวจแล้วสระบน-ล่างของ Prompt ไม่ชนกันที่ 1.30 ห้ามต่ำกว่านี้ · body action label 1.50 (`--lh`) ตามระบบกลาง
ระยะตัวอักษร	0 ทุกที่ ค่าติดลบทำให้คำไทยติดกัน
การตัดบรรทัด	เบราว์เซอร์ตัดคำไทยด้วยพจนานุกรม ไม่รู้วลี — ครอบวลีที่ต้องอยู่ด้วยกันด้วย `white-space:nowrap` (คลาส `keep` · `keep-wide` ปล่อยบนจอแคบ) · หัวเรื่องหลายบรรทัดใช้ `text-wrap:balance` เลือกรูป ยาว-สั้น-ยาว ห้ามบรรทัดท้ายเหลือคำเดียว · เนื้อความและรายการใช้ `text-wrap:pretty` · ห้าม justify · สองคอลัมน์บนจอคอมแบ่งครึ่งเท่ากัน เส้นแบ่งอยู่กึ่งกลาง — พอล 5 ก.ย. 2026
การเน้นคำ	เน้นด้วยน้ำหนัก 600 เท่านั้น ห้ามขยายขนาด และเน้นได้เฉพาะในเนื้อความ
สีม่วง	ใช้ `#4834C2` เท่านั้น ห้ามใช้ `#4535BB` ซึ่งเป็นค่าจากไฟล์ต้นฉบับคนละระบบสี
สีทอง	หนึ่งจุดต่อหนึ่งพื้นผิว ไม่เกิน 4% ของพื้นที่ ห้ามเรืองแสง ห้ามเป็นกลุ่ม นับรวมประกาย SVG และสถานะ error
คู่สี	ระบายผ่านโทเคนตามบทบาทเท่านั้น `--ink --ink-2 --ink-3 --accent --gold --line` ห้ามระบายด้วย `--ts-*` ตรง ๆ ห้ามใช้ opacity บนตัวหนังสือ
พื้นเข้ม	สองสีสลับกัน หมึก `#17131A` และ Aubergine `#422869` ติด `data-theme` ที่ section แถบติดกันห้ามสีซ้ำ มีกระดาษคั่น ตัวหนังสือกระดาษ องค์ประกอบขาว ไม่มีม่วง
ปุ่ม	ปุ่มหลักตัวเดียวในเนื้อหา + ปุ่มลอย `ts-float-cta` โผล่เมื่อปุ่มหลักหรือฟอร์มหลุดจอ ป้ายคำเดียวกัน ห้ามปุ่มบน-ล่างซ้ำ เดสก์ท็อปที่ฟอร์มติดจอไม่มีปุ่มลอย
การแก้	คิด → ตอบ → ปรับโทเคนและสัญญา → รอคำสั่ง → แก้หน้าเฉพาะที่สั่ง แก้สีไม่แตะเลย์เอาต์
ฟอร์ม	ครอบด้วยคลาส `font-system` เพราะช่องกรอกและปุ่มไม่รับค่าตัวอักษรจากหน้า
ข้อความช่วยผู้ใช้	รอบช่องกรอกหนึ่งช่อง ที่มองเห็นตลอดมีแค่ป้ายช่องกรอกกับทางออกที่กดได้ (ลิงก์หรือปุ่ม) · คำอธิบายวิธีกรอก ที่มาของข้อมูล ข้อห้าม เก็บหลังปุ่ม `?` ข้างป้าย ด้วยชิ้นส่วนกลาง `ts-help` `ts-help-btn` `ts-help-note` โผล่เมื่อชี้ แตะ หรือโฟกัส ช่องกรอกอ้างคำอธิบายด้วย `aria-describedby` · ข้อความสถานะโผล่เฉพาะเมื่อเกิด · ห้ามโน้ตกระจายหลายจุดรอบกล่องเดียว — พอล 5 ก.ย. 2026

สัดส่วนสีที่ต้องรักษา

กระดาษ + หมึก 70–80% ม่วง 15–22% ขั้น 5–12% ทอง 2–4%

ความหลากหลายมาจากขนาด การตัดขอบ ความโปร่ง และผิวกระดาษ ไม่ใช่จากการเพิ่มม่วงเฉดที่สอง

ฟอนต์ของแบรนด์กับฟอนต์ของเว็บ ไม่ใช่ตัวเดียวกัน

ใช้ที่ไหน	ฟอนต์	ที่มา
โลโก้	ห้ามพิมพ์ใหม่ ใช้ไฟล์ภาพที่ล็อกไว้	01-LOGO-LOCKED
สไลด์ Canva PowerPoint	League Spartan 600 + IBM Plex Sans Thai	FONT-SYSTEM.md
หน้าเว็บทุกหน้า	Prompt เท่านั้น	ระบบตัวอักษรกลาง

ตัวเลขและคำเรียกในเนื้อหา

ห้าค่านี้ปรากฏบนหน้าขาย ประตูเทสต์ การ์ดสารบัญ เล่มรายงาน และอีเมลอีกสามฉบับ ถ้าค่าไหนไม่ตรงกัน ลูกค้าจะเห็นสินค้าคนละตัวระหว่างทาง

เรื่อง	ใช้ค่านี้	ห้ามใช้
จำนวนข้อ	18 ข้อ	20 ข้อ · 20 คำถาม
เวลา	5 นาที	9 นาที
เรียกสินค้าว่า	แบบประเมิน	แบบทดสอบ — แปลว่ามีถูกมีผิด ขัดกับที่หน้าขายเขียนเองว่าคะแนนมีไว้บอกทิศทาง ไม่ได้มีไว้ตัดสิน
ชื่อเต็ม	AI Talent Scale™ ขีดยาว —	ไม่มี ™ · ขีดสั้น -
ผลลัพธ์	คะแนนตัวเดียว	ตัวหารคะแนน · แถบคะแนนทั้งห้าระดับ

คำว่า แบบทดสอบ บนเมนูบนสุดของเว็บไม่ต้องแก้ นั่นคือชื่อหมวดของทั้งเว็บไซต์ ไม่ใช่ชื่อสินค้าตัวนี้

สี

แปดสี ไม่มีสีที่เก้า และไม่มีม่วงเฉดที่สอง

Talent Violet#4834C2 ตัวตนของแบรนด์ · ปุ่มหลัก · เส้นการเติบโต · หัวข้อเน้น

Deep Ink#17131A ตัวหนังสือ · พื้นเข้ม · โครงสร้างคอนทราสต์สูง

Master Warm Ivory#F8F0E2 กระดาษหลัก ใต้ผิวสัมผัส

Warm Ivory#F6F1E8 พื้นหลังรอง

Master Sun Gold#F2BA31 ประกายเดียวต่อหน้า · ปุ่มรับรหัสฟรี · ของแถม

Master Step Neutral#DDD2BF · 62% แถบระดับ 5 ขั้น เท่านั้น

Aubergine#422869 พื้นเข้ม สลับกับหมึก #17131A · ตัวหนังสือกระดาษ องค์ประกอบขาว ทองจุดเดียว ห้ามมีม่วง

คู่สีตามพื้นผิว

สีของตัวหนังสือ ปุ่ม และจุดเน้น ถูกกำหนดโดยพื้นที่มันอยู่ ไม่ได้เลือกทีละจุด ติด data-theme ที่ section แล้วโทเคนสลับทั้งชุดให้เอง

พื้น	ตัวหนังสือ	ตัวตน ปุ่ม เส้น	จุดเดียว	ห้าม
กระดาษ `#F8F0E2`	หมึก · รอง 68% · ป้าย 46%	ม่วง `#4834C2`	ทอง 1 จุด	ทองมากกว่า 1 จุด
หมึก `#17131A` `data-theme="dark"`	กระดาษ · รอง 72% · ป้าย 50%	ขาว	ทอง 1 จุด	ม่วงทุกเฉด
Aubergine `#422869` `data-theme="aubergine"`	กระดาษ · รอง 72% · ป้าย 50%	ขาว	ทอง 1 จุด	ม่วงทุกเฉด — `#4834C2` บน Aubergine อ่านไม่ออก 1.5:1
ม่วง `#4834C2` (ปุ่ม แถบเล็ก)	ขาว	ขาว	ทองเล็ก ๆ ถ้าจำเป็น	พื้นม่วงเต็มจอ ทำสัดส่วนม่วงเกิน

พื้นเข้มสลับสองสี ให้สายตาได้พัก

แถบแรก · Aubergine

ตัวหนังสือกระดาษ 74% คือทองจุดเดียวของแถบ อย่างอื่นเน้นด้วยน้ำหนัก ไม่ใช่สี

กระดาษคั่น

แถบถัดไป · หมึก

แถบเข้มที่อยู่ติดกันบนหน้าเดียวห้ามสีซ้ำ และมีกระดาษคั่นทุกครั้ง

ตัวอักษร

ห้าแถว หน้านี้ทั้งหน้าใช้แค่ห้าแถวนี้ ไม่มีขนาดที่หก

46 / 800
ประโยคใหญ่สุด
หน้าละหนึ่ง

รู้ว่าคุณอยู่ระดับไหน

36 / 600
หัวข้อของส่วน

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

16 / 400
เนื้อความอ่านทั่วไป

แบบประเมิน 18 ข้อ ใช้เวลา 5 นาที บอกว่าตอนนี้คุณติดอยู่ตรงไหน และเพราะอะไรถึงยังติดอยู่ตรงนั้น — คำที่ต้องเน้นใช้น้ำหนัก 600 ในบรรทัดเดียวกัน ขนาดไม่เปลี่ยน

16 / 600
ช่องกรอกและปุ่ม

เริ่มทำแบบประเมินทันที

14 / 400
ป้ายเล็ก · ป้ายช่องกรอก
ข้อความประกอบ

กรุณากรอกรหัสโทเค่น 9 หลัก

ชิ้นส่วนกราฟิก

เก้าชิ้น แต่ละหน้าหยิบใช้ตามสูตร ไม่ใช่หยิบทั้งหมด

เศษสัญลักษณ์ มุมบนซ้าย ทางเข้าของแบรนด์ ตัดให้ทะลุขอบบนซ้าย ใช้ครั้งเดียวต่อหน้า ห้าม โชว์ไอคอนเต็มวงในกรอบ

เศษสัญลักษณ์ มุมล่างขวา + จุด ปลายทางและความต่อเนื่อง จุดวางใกล้กัน ปล่อยให้โดนขอบตัดได้ ห้าม จุดกระจายมั่ว

ลูกศรการเติบโต มุมบนขวา ทิศทางเชิงกลยุทธ์ เส้นบาง ชัน หางจาง ห้าม ลูกศรอ้วนแบบการ์ตูน

เส้นกวาด มุมล่างซ้าย แรงส่ง วิ่งขึ้นเข้าหากลางภาพ ห้าม เส้นหนาเท่ากันตลอด หรือพาดทับตัวหนังสือ

แถบระดับ 5 ขั้น ตกแต่งขอบล่าง สื่อการเติบโตเป็นขั้น ช่องไฟแคบ สูงไล่ขึ้น ห้าม เอาแถบตกแต่งนี้ไปแสดงเป็นคะแนนจริง

ประกายสี่แฉก การค้นพบ หนึ่งดวงเล็ก ใกล้มุมบนขวา ห้าม เรืองแสง ผิวโลหะ เป็นกลุ่ม หรือโปรยเป็นคอนเฟตตี

สูตรการวางต่อหนึ่งหน้า

ประเภทหน้า	ใช้ชิ้นไหน
หน้าปก · หน้าขาย	เศษสัญลักษณ์ 2 มุม + เส้นเติบโต 2 เส้น + แถบ 5 ขั้น + จุด + ประกายทอง 1 + โลโก้กลาง
หน้าเนื้อหาทั่วไป	เส้นเติบโตบาง 1 เส้น + ประกายเล็ก 1 ดวง ไม่ใส่สัญลักษณ์ใหญ่
หน้าคั่นส่วน	เศษสัญลักษณ์ตัดขอบ 1 ชิ้น + แถบ 5 ขั้น หรือเส้นกวาด · เว้นที่ว่างอย่างน้อย 55%
หน้าพื้นเข้ม	โลโก้ขาว + เศษสัญลักษณ์ขาว 1 ชิ้น + สัญญาณทอง 1 จุด

ส่วนประกอบหน้าเว็บ

ถอดมาจากหน้าเก็บเงินจริงที่ moneyhub.alphamindthailand.com/assessment-talent-scale ทุกชิ้นในนี้ก๊อปไปใช้ได้เลย

ปุ่ม

หลัก · ม่วง · ปุ่มหลักตัวเดียวในเนื้อหา ปุ่มลอย ts-float-cta โผล่เมื่อปุ่มหลักหรือฟอร์มหลุดจอ ป้ายคำเดียวกัน ห้ามปุ่มบน-ล่างซ้ำ

ทางฟรี · ทอง · ใช้เมื่อไม่ต้องจ่ายเงิน

รอง · โปร่ง · ไม่แย่งสายตา

ปิดใช้งาน · รอจนกรอกรหัสครบ 9 หลัก

ช่องกรอกรหัสโทเค่น

กรุณากรอกรหัสโทเค่น 9 หลัก

ไม่มีเว้นวรรค · รหัสอยู่ในอีเมลที่ส่งให้หลังยืนยันการรับสิทธิ์

อีเมล

ใช้รับรายงานผลฉบับเต็ม

ข้อความช่วยผู้ใช้อยู่หลังปุ่ม ? ข้างป้าย ชี้ แตะ หรือโฟกัสเพื่อดู · ที่มองเห็นตลอดมีแค่ป้ายกับทางออกที่กดได้ · ชิ้นส่วนกลาง ts-help ในไฟล์ CSS และ JS กลาง

ของแถมในตะกร้า

The AI Founder — Executive Briefing คลาสสด 46 นาที บอกทางออกว่าต้องรื้ออะไร คิดใหม่ตรงไหน ลิงก์เข้าฟังส่งเข้าอีเมลทันทีหลังยืนยัน +฿300

เส้นขอบทองบอกว่านี่คือของเสริม ไม่ใช่สินค้าหลัก · ข้อความต้องเป็นไทยทั้งกล่อง

สรุปคำสั่งซื้อ

AI Talent Scale™ — แบบประเมินฟรี0 บาท

The AI Founder — Executive Briefing300 บาท

รวมทั้งสิ้น300 บาท

ผลลัพธ์ — คะแนนเดียว ไม่มีตัวหาร ไม่มีคะแนนราย 5 ระดับ

ระดับ 3 · Talent Encoder

นักถอดรหัสความเชี่ยวชาญ

ห้าม เขียน “41 จาก 59” และ ห้าม แสดงแถบคะแนนทั้ง 5 ระดับ

สถานะและหน้าที่ผิดพลาด

รหัสนี้ถูกใช้ไปแล้ว รหัสหนึ่งใช้ทำได้ครั้งเดียว ถ้าคุณทำเสร็จแล้ว เปิดผลจากลิงก์ในอีเมลรายงานผล

ไม่พบรหัสนี้ในระบบ ตรวจว่าพิมพ์ครบ 9 หลักและไม่มีเว้นวรรค หรือกู้รหัสจากอีเมลที่ใช้ลงทะเบียน

รายงานของคุณกำลังจัดทำ ใช้เวลาไม่เกินสองนาที เราจะส่งเข้าอีเมลให้ด้วย ไม่ต้องรอหน้านี้

ลิงก์ผลนี้หมดอายุแล้ว เปิดจากอีเมลรายงานผลฉบับล่าสุด หรือเข้าระบบสมาชิกด้วยอีเมลที่ลงทะเบียนไว้

ทุกหน้าที่ผิดพลาดต้องมีเมนู มีแบรนด์ และมีทางออกที่กดต่อได้ ห้ามเป็นกล่องเปล่ากลางจอ

หน้าที่ต้องใช้ระบบนี้

เขียนเต็มทุกเส้นทาง ไม่ตัด

หน้า	URL เต็ม	สถานะ
สารบัญ	`https://www.alphamindthailand.com/assessment/`	มี ยังไม่มี Talent Scale
รายละเอียด	`https://www.alphamindthailand.com/assessment/talent-scale/`	ยังไม่มี
ขาย เก็บเงิน	`https://moneyhub.alphamindthailand.com/assessment-talent-scale`	มี · เป็นหน้าต้นแบบ
ยืนยันหลังจ่าย	`https://moneyhub.alphamindthailand.com/complete`	มี · แก้ข้อความไม่ได้
ประตูใส่โทเค่น	`https://assessment.alphamindthailand.com/token/talent-scale`	ต้องย้าย
ทำข้อสอบ	`https://assessment.alphamindthailand.com/questions/talent-scale`	ต้องย้าย
ผลลัพธ์	`https://assessment.alphamindthailand.com/result/talent-scale/<รหัสสิทธิ์>`	ต้องย้าย
ดาวน์โหลดเล่ม	`https://assessment.alphamindthailand.com/api/v1/public/results/<รหัสสิทธิ์>/report`	มี
กู้โทเค่น	`https://assessment.alphamindthailand.com/test/recover`	มี
สมาชิก	`https://assessment.alphamindthailand.com/member`	มี · อีเมลไม่ถูกส่ง

ที่ต้องปิดและลบ

https://assessment.alphamindthailand.com/assessmentสารบัญซ้ำกับของ www

https://assessment.alphamindthailand.com/assessment/talent-scaleของฟรีแต่ขึ้นว่าสอบถามราคา ปุ่มชำระเงินไปหน้าที่ไม่มีอยู่

https://assessment.alphamindthailand.com/testให้เลือกเทสต์ซ้ำ ทั้งที่เข้ามาจากประตูของเทสต์แล้ว

https://assessment.alphamindthailand.com/test/registerถามชื่อ อีเมล เบอร์ ซ้ำกับที่กรอกไปแล้วตอนลงทะเบียน

https://moneyhub.alphamindthailand.com/talent-scaleไม่มีหน้านี้ ต้องทำเป็นทางเด้งไปหน้าจริง กันปุ่มเก่าที่ยังลอยอยู่ข้างนอก

ค่าที่ก๊อปไปใช้

วางไว้บนสุดของไฟล์สไตล์ แล้วเรียกใช้ผ่านชื่อค่าเท่านั้น ห้ามพิมพ์เลขซ้ำลงในหน้า · ปุ่มลอยใช้สคริปต์กลาง design-framework-talent-scale.js ในโฟลเดอร์เดียวกับไฟล์สไตล์

/* Talent Scale — สีแบรนด์ ห้ามแก้ */
--ts-violet : #4834C2;   /* ตัวตน ปุ่มหลัก เส้นเติบโต */
--ts-ink    : #17131A;   /* ตัวหนังสือ พื้นเข้ม */
--ts-paper  : #F8F0E2;   /* กระดาษหลัก */
--ts-ivory  : #F6F1E8;   /* พื้นหลังรอง */
--ts-gold   : #F2BA31;   /* ประกายเดียวต่อหน้า */
--ts-step   : #DDD2BF;   /* แถบ 5 ขั้น ใช้ที่ 62% */

/* ตัวอักษร — ห้ามเพิ่มขนาดที่หก */
--font           : 'Prompt', sans-serif;
--size-display   : 46px;  --weight-display : 800;
--size-heading   : 36px;  --weight-heading : 600;
--size-body      : 16px;  --weight-body    : 400;
--size-action    : 16px;  --weight-action  : 600;
--size-label     : 14px;  --weight-label   : 400;
--lh             : 1.50;  /* body action label */
--lh-display     : 1.30;  /* หัวเรื่อง (พอล 5 ก.ย. 2026) */
--lh-heading     : 1.30;
--track          : 0;

/* รูปทรงและระยะ */
--r-card  : 10px;   /* การ์ดและตัวควบคุม */
--r-inner : 8px;    /* ของที่ซ้อนอยู่ข้างใน */
--r-pill  : 999px;  /* ป้ายกลม */
--pad     : 14px;   /* ระยะขอบใน ไม่เกินค่านี้ */
--gap     : 10px;   /* ช่องไฟระหว่างชิ้น ไม่เกินค่านี้ */

ก่อนบอกว่าเสร็จ

รันคำสั่งตรวจกับทุกไฟล์ที่แก้ ถ้าไม่ผ่านคือยังไม่เสร็จ

bash ~/.claude/scripts/global-web-font-system.sh check <ไฟล์ที่แก้>