AI ช่วยงานดีไซน์ 1 ชิ้น · 5 สกิลที่ผมใช้ต่อกัน
เวลาผมให้ AI ช่วยงานดีไซน์สักชิ้น ไม่ว่าจะเป็นหน้าเว็บ หน้า HTML สรุปงาน หรือภาพในคลิป ผมไม่ได้ใช้สกิลเดียวจบ แต่จะหยิบหลายสกิลมาใช้ต่อกันตามจังหวะของงาน ผมลองย้อนดูแชทที่ทำงานกับ Claude Code และ Codex ว่าสกิลไหนถูกเรียกใช้จริงบ่อยๆ แล้วเรียงออกมาเป็นลำดับ 5 สกิลตามนี้ครับ
ใครอยากดูแบบคลิปสั้นก่อน กดดูด้านล่างได้เลย
จำนวนดาวบน GitHub ในบทความนี้เป็นข้อมูล ณ 18 ต.ค. 2026
1. brainstorming ให้ AI ถามก่อน
brainstorming เป็นสกิลหนึ่งในชุด Superpowers ใช้ก่อนเริ่มงานสร้างสรรค์ทุกอย่าง แทนที่ AI จะรีบลงมือทำเลย มันจะถามก่อนว่างานนี้ทำให้ใคร อยากได้อารมณ์แบบไหน ต้องมีอะไรบ้าง แล้วสรุปออกมาเป็นโจทย์ให้เราดูก่อน
พอโจทย์ชัด สกิลถัดๆไปก็ทำงานได้ตรงกับที่เราต้องการมากขึ้น
- Repo: github.com/obra/superpowers (ดาวราว 301k)
2. design-taste-frontend เลือกทิศทางดีไซน์
พอได้โจทย์แล้ว ผมส่งต่อให้ design-taste-frontend จากชุด taste-skill ช่วยเลือกทิศทางดีไซน์ ตัวนี้เหมาะกับหน้า landing, portfolio หรือการ redesign มันจะอ่านโจทย์แล้วเลือกแนวทางที่เข้ากับงาน ให้หน้าตาออกมามีเอกลักษณ์ ไม่เหมือน template ทั่วไป ผมใช้ตัวนี้ตอนปรับหน้าเว็บ iampoom.com
- Repo: github.com/Leonxlnx/taste-skill (ดาวราว 98.7k)
3. Lucide + Simple Icons ไอคอนกับโลโก้
ส่วนนี้เป็นสกิลที่ผมตั้งกติกาไว้เอง ชื่อ lucide-icons-frontend-default คือไอคอนในหน้าเว็บใช้ Lucide ส่วนโลโก้ของแบรนด์ต่างๆใช้ Simple Icons ไม่เอาไอคอนทั่วไปมาแทนโลโก้ จะได้โลโก้จริง สีตรงตามแบรนด์
โลโก้แบรนด์ในคลิปของผม รวมไปถึงไอคอน TikTok ที่เพิ่งใส่บนเว็บนี้ ก็ทำตามกติกานี้
- Lucide: lucide.dev (ดาวราว 25.1k)
- Simple Icons: simpleicons.org (ดาวราว 26k)
4. impeccable เกลางานให้เนี้ยบ
impeccable ทำตัวเหมือน design director มีคำสั่งอย่าง polish, critique และ audit ให้เลือกใช้ ผมมักใช้ตอนงานเริ่มเป็นรูปแล้ว ให้มันช่วยเกลาทั้งระยะห่าง ตัวอักษร และสี
ภาพนี้คือ style frames ของคลิป timeline โมเดล AI ก่อนและหลังเกลา
- Repo: github.com/pbakaus/impeccable (ดาวราว 82.6k)
5. Playwright ให้ AI ตรวจงานตัวเอง
สุดท้ายผมให้ AI ใช้ Playwright เปิดหน้างานจริงขึ้นมาถ่ายภาพหน้าจอ แล้วตรวจเองว่ามีอะไรล้น ทับกัน หรือผิดไปจากที่ตั้งใจไหม เจอแล้วก็แก้ต่อจนเรียบร้อย
อย่างตอนทำคลิป timeline รอบแรก ภาพที่จับมาเจอป้าย "19 เดือน" ล้นขอบการ์ด ก็เลยแก้ก่อนเรนเดอร์คลิปจริง
- Playwright: github.com/microsoft/playwright (ดาวราว 98k)
- ฝั่ง Codex ผมใช้สกิล playwright จาก github.com/openai/skills
ตัวอย่างงานจริง
- เว็บ iampoom.com ใช้ design-taste-frontend ตอนปรับหน้าเว็บ และใช้กติกาไอคอนกับโลโก้จากสกิลที่ 3
- คลิป timeline โมเดล AI เกลาภาพด้วย impeccable ใช้โลโก้จริงจาก Simple Icons และตรวจภาพด้วย Playwright ดูบทความของคลิปนี้ได้ที่ AI ผลัดกันเก่ง · timeline โมเดล Anthropic กับ OpenAI
สรุป
โดยส่วนตัวผมคิดว่า งานแต่ละชิ้นที่ออกมาดี ไม่ได้เกิดจากสกิลเดียว แต่เกิดจากการนำหลายๆสกิลมาช่วยเสริมในจุดที่เหมาะของแต่ละงาน และตัวเราเองที่เป็นคนใช้ AI ก็เป็นแกนหลักในการคุมทิศทางและคุณภาพให้งานออกมาได้แบบที่ต้องการครับ
ใครมีสกิลดีไซน์ตัวไหนที่ใช้แล้วชอบ มาแชร์กันได้นะครับ