AI Smart Work
← คู่มือทั้งหมด

ทำแอนิเมชันด้วยโค้ดกับ Claude Code คลิปแรกใน 5 ขั้น (ไม่ต้องวาด ไม่ต้องเขียนโค้ดเอง)

ให้ Claude Code วาดและขยับแอนิเมชันเล่าเรื่องให้ทั้งคลิปด้วยโค้ด คุณแค่บอกเรื่องที่อยากได้ อนุมัติสตอรี่บอร์ด แล้วตรวจภาพทีละฉาก คู่มือนี้พาไปถึงภาพแอนิเมชันคลิปแรก (ยังไม่รวมเสียงและซับ) ใช้ชุดเครื่องมือโอเพนซอร์สของ John Heibel กับวิธีของ Kreycin ซึ่งทั้งคู่เปิดให้ใช้ฟรี

อัปเดตล่าสุด 29 ต.ค. 2569

⬇ ดาวน์โหลด PDF (ฟรี)

ต้องมีอะไรบ้าง

  • Claude Code แบบเสียเงิน (ถ้ายังไม่มี ดูคู่มือ "ติดตั้ง Claude Code ไม่ต้องเขียนโค้ด") — งานนี้ใช้โควตาพอสมควร เพราะต้องวาดและตรวจภาพหลายรอบ
  • คอมพิวเตอร์ Mac (เราใช้ Mac) · ต้องมี Node.js 20 ขึ้นไป, Google Chrome, ffmpeg และ git (ให้ Claude ติดตั้งให้ได้) · Windows เรายังไม่ได้ทดสอบ
  • ชุดเครื่องมือและวิธีทำเป็นโอเพนซอร์ส ใช้ฟรีตามใบอนุญาต MIT — ใส่เครดิตผู้พัฒนาทั้งสองคนถ้านำไปเผยแพร่ต่อ
  • คู่มือนี้จบที่ภาพแอนิเมชัน ไม่รวมเสียงบรรยาย เพลง และซับ
  1. 1

    ให้ Claude ติดตั้งของที่ต้องมี

    เปิด Claude Code ในโฟลเดอร์ว่าง แล้วบอกให้เช็กและติดตั้ง Node.js, ffmpeg และ git ให้ครบ ส่วน Google Chrome ติดตั้งเองจากเว็บ Google (ชุดเครื่องมือใช้ Chrome วาดภาพทีละเฟรม) ถ้าติดตั้งเสร็จ คำสั่งตรวจด้านล่างต้องไม่ขึ้นข้อผิดพลาด และ Node ต้องขึ้นเลข 20 ขึ้นไป

    ช่วยเช็กว่าเครื่องผมมี Node.js 20 ขึ้นไป, ffmpeg และ git หรือยัง ถ้าไม่มี ติดตั้งให้ด้วย แล้วรันคำสั่งตรวจเวอร์ชันให้ดู # คำสั่งตรวจ (ถ้าต้องการรันเอง) node -v && ffmpeg -version && git --version
  2. 2

    ดึงชุดเครื่องมือแอนิเมชันมา

    ชุดนี้ชื่อ ClaudeAnimationBase ของ John Heibel เป็นเครื่องยนต์วาดภาพสไตล์สีน้ำ/หมึกด้วยโค้ด และเรนเดอร์ผ่าน Chrome ทุกเฟรมคำนวณจากเวลา เลยเรนเดอร์แบ่งงานหลายตัวได้และเรนเดอร์ต่อจากที่ค้างได้ คำสั่งนี้ดึงชุดมาเป็นโฟลเดอร์ my-film แล้วติดตั้งไลบรารี (p5, p5.brush, puppeteer-core) ให้ Claude รันให้ก็ได้

    git clone https://github.com/JohnHeibel/ClaudeAnimationBase.git my-film cd my-film npm install
  3. 3

    ใส่สกิลวิธีทำ code-video

    วิธีทำทั้งหมด (สตอรี่บอร์ด → สไตล์ → ตัวละคร → ฉาก → ตรวจภาพ) Kreycin เขียนไว้เป็นสกิลของ Claude Code ชื่อ code-video ในโปรเจกต์ ton-sea ซึ่งเป็น MIT ให้ดึงมาเฉพาะโฟลเดอร์สกิลใส่โปรเจกต์ของเรา ก่อนใช้ เปิดอ่านไฟล์ SKILL.md ในโฟลเดอร์สกิลสักรอบ คุณควรรู้ว่า AI จะทำอะไรในเครื่อง อย่ารันของที่ไม่ได้อ่านเลย

    git clone https://github.com/Kreycin/ton-sea.git ../ton-sea mkdir -p .claude/skills cp -r ../ton-sea/.claude/skills/code-video .claude/skills/ # แล้วเปิด Claude Code ในโฟลเดอร์ my-film ขึ้นมาใหม่ สกิล code-video จะโหลดเอง
  4. 4

    บอกเรื่องที่อยากได้ แล้วขอสตอรี่บอร์ดก่อน

    อย่าให้ Claude วาดเลย ให้ขอตารางสตอรี่บอร์ดก่อน: เรื่องย่อ ตัวละคร ของที่เล่าเรื่อง สีของแต่ละช่วง และตารางช็อต (เวลา มุมกล้อง สิ่งที่เกิดขึ้น) อ่านแล้วแก้จนพอใจก่อนค่อยให้ทำต่อ นี่คือจุดที่ถูกที่สุดที่จะเปลี่ยนใจ เพราะวาดไปแล้วค่อยแก้เสียทั้งโควตาและเวลา เรื่องแรกให้สั้นและเรียบง่าย 1–2 ตัวละคร 1–2 ฉาก คลิปแนวตั้งสัก 20–30 วินาที

    ใช้สกิล code-video ทำแอนิเมชันสั้นแนวตั้ง 30 วินาทีให้ผม เรื่อง: [เล่าเรื่องที่คุณอยากได้ 1–2 ประโยค] ขอ STORYBOARD.md ก่อน: เรื่องย่อ ตัวละคร ของที่ช่วยเล่าเรื่อง สีที่เปลี่ยนตามช่วงเวลา และตารางช็อต อย่าเพิ่งวาดอะไรจนกว่าผมจะอนุมัติ
  5. 5

    วาดทีละฉาก ให้ Claude ดูภาพของตัวเองทุกครั้ง แล้วเรนเดอร์

    หลังอนุมัติ ให้ทำตัวละครก่อน (แผ่นตัวละครที่ขยับท่าได้) แล้วค่อยฉากและการแสดง ทีละฉาก กติกาข้อสำคัญที่สุดจากวิธีนี้คือ "ดูภาพทุกครั้งก่อนบอกว่าเสร็จ" ให้ Claude เรนเดอร์ภาพรวมหลายเฟรมออกมา แล้วอ่านภาพนั้นเองก่อนส่งให้คุณ ให้จดบันทึกงานไว้ในไฟล์ STATUS.md สั้น ๆ ทุกขั้น เปิดเซสชันใหม่เมื่อไหร่ก็อ่านต่อได้ พอพอใจภาพรวม สั่งเรนเดอร์เป็นไฟล์วิดีโอ

    ทำตัวละครก่อน ขอแผ่นตัวละคร (ท่าทางต่าง ๆ) ให้ผมดู แล้วทำฉากที่ 1 ทุกครั้งที่ทำเสร็จ เรนเดอร์ภาพตัวอย่างออกมาดูเอง แล้วบอกผมว่าเห็นอะไร มีอะไรผิดปกติไหม อัปเดต STATUS.md หลังจบแต่ละขั้น # คำสั่งที่ชุดเครื่องมือมีให้ (Claude รันให้ได้) npm run sheet # ภาพรวมหลายเฟรมรวมในรูปเดียว npm run video # เรนเดอร์เป็นไฟล์วิดีโอ out/video.mp4

ที่มาของวิธีนี้ (ใส่เครดิตเมื่อนำไปเผยแพร่)

  • ClaudeAnimationBase

    กลาง

    โดย John Heibel

    ชุดเครื่องมือวาดและเรนเดอร์แอนิเมชันสไตล์สีน้ำด้วยโค้ด (p5.brush + Chrome)

    ฟรี (ใบอนุญาต MIT)

    https://github.com/JohnHeibel/ClaudeAnimationBase

  • ton-sea (ต้นกับทะเล) และสกิล code-video

    กลาง

    โดย Kreycin

    หนังสั้นต้นแบบที่ทำด้วยวิธีนี้ พร้อมสกิล code-video และเอกสารวิธีทำทีละขั้น (docs/METHOD.md)

    โค้ดฟรี (MIT) · เรื่อง ตัวละคร และเพลงของหนังสั้นเป็นของผู้สร้าง อย่านำไปใช้เป็นของตัวเอง

    https://github.com/Kreycin/ton-sea

ติดตรงนี้ ทำยังไง

npm install ไม่ผ่าน หรือเรนเดอร์ไม่ออก

เช็กก่อนว่า Node.js เป็นเวอร์ชัน 20 ขึ้นไป และเครื่องมี Google Chrome ติดตั้งอยู่ (ชุดเครื่องมือใช้ Chrome เรนเดอร์) แล้วส่งข้อความผิดพลาดให้ Claude แก้

Claude วาดเลยโดยไม่รอสตอรี่บอร์ด หรือทำเกินที่ขอ

บอกให้หยุด แล้วย้ำว่าขอสตอรี่บอร์ดก่อนและรออนุมัติ ถ้ายังเลย ให้ลบสิ่งที่เกินและเริ่มสั่งใหม่ในเซสชันเดิมโดยอ้างถึง STATUS.md

ภาพออกมาไม่ตรงที่คิด

ให้ขอภาพรวมหลายเฟรมแล้วชี้ว่าเฟรมไหนผิดอะไร อย่าบอกกว้าง ๆ ว่าไม่สวย บอกสิ่งที่เห็นจริง เช่น ตัวละครลอย แขนทะลุตัว สีไม่เปลี่ยนตามช่วง

โควตา Claude หมดกลางงาน

งานนี้กินโควตาพอสมควร ทำทีละฉาก จดความคืบหน้าใน STATUS.md แล้วกลับมาทำต่อรอบโควตาถัดไปได้ ดูคู่มือ "โควตา Claude หมดไว? 5 นิสัย"

อยากได้เสียงบรรยาย ซับ และเพลงด้วย

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

อยากให้ AI ตัดคลิปพูดให้เลย?

ฉับฉับตัดช่วงเงียบ คำพูดผิด ใส่ซับไทยตรงปาก — ราคาเปิดตัว ฿990 ถึง 31 ต.ค. 2569 · ใช้ไม่ได้บนเครื่องที่ตรงสเปก คืนเงินเต็มจำนวนใน 7 วัน

ดูฉับฉับ

อ่านต่อ