04 · Track A — Beginner
04 · สายเริ่มต้น
Stage one — the page.
ขั้นที่หนึ่ง หน้าเว็บ
A landing page that doesn't look generated, built as a single file, verified before anyone looks at it.
หน้าแลนดิ้งที่ไม่ดูเหมือนของที่ AI ปั๊มออกมา ทำเป็นไฟล์เดียว ตรวจให้เรียบร้อยก่อนใครจะเห็น
Why one file, and no framework
ทำไมไฟล์เดียว ไม่ใช้เฟรมเวิร์ก
The site in this manual is plain HTML with the CSS and JavaScript inside it. No build step,
no bundler, no dependencies for the pages themselves. This is not nostalgia. It is a deliberate
reduction of the surface where things go wrong.
เว็บในคู่มือนี้คือ HTML ล้วน ๆ มี CSS กับ JavaScript อยู่ในไฟล์เดียวกัน
ไม่มีขั้นตอน build ไม่มี bundler ตัวหน้าเว็บเองไม่มี dependency
นี่ไม่ใช่การโหยหาของเก่า แต่เป็นการจงใจลดพื้นที่ที่อะไร ๆ จะพังได้
| Choiceตัวเลือก |
What it removesตัดอะไรออกไป |
| No build step | ไม่มีขั้นตอน build |
Build failures. There is nothing to build. | build พัง เพราะไม่มีอะไรให้ build |
| No framework | ไม่ใช้เฟรมเวิร์ก |
Version conflicts, breaking upgrades, framework-shaped bugs | เวอร์ชันชนกัน อัปเกรดแล้วพัง บั๊กที่มาจากตัวเฟรมเวิร์กเอง |
| Inline CSS and JS | CSS กับ JS อยู่ในไฟล์ |
Broken relative paths, missing assets, load-order bugs | พาธเพี้ยน ไฟล์หาย ลำดับการโหลดผิด |
The design decisions that stop it looking generated
การตัดสินใจด้านดีไซน์ที่ทำให้มันไม่ดูเหมือนของ AI
Generated design has a signature: pure white background, one particular blue, a single
sans-serif everywhere, uniform rounded corners, everything centred. Avoiding it is a small
number of concrete decisions.
ดีไซน์ที่ AI ปั๊มออกมามีลายเซ็นของมัน พื้นขาวสนิท สีน้ำเงินเฉดหนึ่งที่เห็นบ่อย
ฟอนต์ sans-serif ตัวเดียวทั้งหน้า มุมโค้งเท่ากันหมด แล้วจัดกึ่งกลางทุกอย่าง
เลี่ยงได้ด้วยการตัดสินใจไม่กี่ข้อ
01
Two typefaces, and a real size jump.
ฟอนต์สองตัว กับการกระโดดขนาดที่ชัดจริง
One characterful face for headlines, one quiet face for body. The headline at
least two and a half times the body size. Large text wants tight line spacing; body text wants
the opposite.
ตัวหนึ่งมีคาแรกเตอร์ไว้ทำหัวเรื่อง อีกตัวเงียบ ๆ ไว้ทำเนื้อความ
หัวเรื่องใหญ่กว่าเนื้อความอย่างน้อยสองเท่าครึ่ง
ตัวใหญ่ต้องการระยะบรรทัดแน่น เนื้อความต้องการตรงข้าม
02
One spacing scale, no arbitrary values.
สเกลระยะห่างชุดเดียว ห้ามใส่ตัวเลขมั่ว
Powers of eight: 8, 16, 24, 32, 48, 64, 96, 128. Define them once and use nothing
else. Inconsistent spacing is the loudest amateur signal, and it is invisible as a cause — you
only see the effect.
คูณแปดไปเรื่อย 8, 16, 24, 32, 48, 64, 96, 128 ตั้งไว้ครั้งเดียวแล้วห้ามใช้ค่าอื่น
ระยะห่างที่ไม่สม่ำเสมอคือสัญญาณมือสมัครเล่นที่ดังที่สุด
และมองไม่เห็นว่าเป็นสาเหตุ เห็นแต่ผลลัพธ์
03
One accent colour, used sparingly.
สีเน้นสีเดียว ใช้ให้น้อย
Roughly sixty percent one background tone, thirty percent neutrals, ten percent
accent — and the accent only where the eye should land. If two things are colourful, neither is
important.
คร่าว ๆ คือพื้นหลังโทนเดียวหกสิบเปอร์เซ็นต์ สีกลางสามสิบ สีเน้นสิบ
และสีเน้นใส่เฉพาะจุดที่อยากให้สายตาไปหยุด
ถ้ามีของสองอย่างที่สีจัด แปลว่าไม่มีอันไหนสำคัญเลย
04
Off-white, not white. Near-black, not black.
ขาวนวล ไม่ใช่ขาวสนิท ดำเกือบสนิท ไม่ใช่ดำสนิท
A warm off-white background and a near-black text colour read as considered.
Pure white with pure black reads as a default nobody chose.
พื้นขาวนวลอุ่น ๆ กับตัวหนังสือดำเกือบสนิท อ่านแล้วรู้สึกว่ามีคนคิดมา
ขาวสนิทคู่ดำสนิท อ่านแล้วรู้สึกว่าเป็นค่าตั้งต้นที่ไม่มีใครเลือก
Copy that sounds like a person
คอปปี้ที่อ่านแล้วเหมือนคนเขียน
The failure mode of generated copy is not bad grammar. It is the absence of anything specific
enough to be wrong.
จุดพังของคอปปี้ที่ AI เขียน ไม่ใช่ไวยากรณ์ผิด
แต่คือไม่มีอะไรเฉพาะเจาะจงพอที่จะผิดได้เลยสักอย่าง
Be specific or cut it. Every abstract noun should become something you could photograph
or count. "Fast loading" becomes "it loads in 200ms; it used to hang for three seconds."
If a sentence would survive being pasted into a different company's website, it is saying nothing.
เจาะจง หรือตัดทิ้ง คำนามนามธรรมทุกคำควรกลายเป็นของที่ถ่ายรูปได้หรือนับได้
"โหลดเร็ว" กลายเป็น "โหลดใน 200ms เมื่อก่อนค้างสามวินาที"
ถ้าประโยคไหนย้ายไปวางในเว็บของบริษัทอื่นแล้วยังใช้ได้ แปลว่าประโยคนั้นไม่ได้พูดอะไรเลย
Break the rhythm. Uniform sentence length is the deepest tell, felt before it can be named.
Follow a long sentence with a short one. Read it aloud — one speed throughout reads as machine-made.
อย่าให้จังหวะเท่ากันหมด ประโยคยาวเท่ากันทุกประโยคคือสัญญาณที่ลึกที่สุด
คนรู้สึกได้ก่อนที่จะบอกถูกว่ามันคืออะไร ประโยคยาวแล้วต่อด้วยประโยคสั้น
ลองอ่านออกเสียง ถ้าความเร็วเท่ากันตลอด แปลว่าอ่านแล้วเหมือนเครื่องเขียน
Verify before anyone looks
ตรวจก่อนใครจะเห็น
# 1. do the tags balance?
grep -o '<div' index.html | wc -l
grep -o '</div>' index.html | wc -l
# 2. does every internal link point at a file that exists?
grep -o 'href="/[^"]*"' index.html | sort -u
# 3. does every image have alt text?
grep -c '<img' index.html
# 1. แท็กเปิดกับแท็กปิดเท่ากันไหม
grep -o '<div' index.html | wc -l
grep -o '</div>' index.html | wc -l
# 2. ลิงก์ภายในทุกอันชี้ไปที่ไฟล์ที่มีอยู่จริงไหม
grep -o 'href="/[^"]*"' index.html | sort -u
# 3. รูปทุกรูปมี alt text ไหม
grep -c '<img' index.html
In this build the three checks ran after each rewrite. The link check caught six dead
placeholder links that would otherwise have shipped.
ในงานนี้ สามข้อนี้รันทุกครั้งหลังเขียนใหม่
ข้อเช็กลิงก์จับลิงก์หลอกที่ตายแล้วได้หกอัน ไม่งั้นก็หลุดขึ้นเว็บไปหมดแล้ว
Habit
นิสัยที่ควรมี
Ask for the check in the same message as the work. "Build the page, then confirm
the tags balance and every link resolves." One turn, not two.
สั่งตรวจไปในข้อความเดียวกับสั่งงาน "ทำหน้านี้ แล้วยืนยันว่าแท็กครบและทุกลิงก์ไปถึงจริง"
หนึ่งรอบ ไม่ใช่สองรอบ
