วิธีสร้าง Open Source Browser Tools ด้วย Codex และ Claude Code

ทำไมถึงเขียนคู่มือนี้

บทความนี้อธิบาย workflow จริงที่ใช้สร้างชุดเครื่องมือ browser tools ของ DJAI ตั้งแต่การวางแผน การเขียนโค้ด การ review การควบคุมค่าใช้จ่าย ไปจนถึงการเตรียม repo สำหรับ open source โดยใช้ Claude Code และ Codex ร่วมกัน

โปรเจกต์นี้ถูกเตรียมให้เป็น open-source repository ภายใต้บัญชี lovecatisgood-sudo บน GitHub และเปิดภายใต้ MIT License ภายใน repo มีเครื่องมือ browser-based สำหรับ PDF, image conversion, image compression, OCR, DOCX conversion, AI token, RAG workflow, CSV, Excel และ QR code

DJAI Academy ภูมิใจที่ได้นำเสนอบทความนี้และ repo นี้ Siamese Cat Dev เป็น senior community member ของ DJAI และการเปิด source ครั้งนี้เป็นการแบ่งปันงานที่มีประโยชน์ให้ developer, creator, student, freelancer และธุรกิจที่อยากใช้เครื่องมือจริง หรืออยากมีตัวอย่าง workflow สำหรับการสร้าง product ด้วย AI coding

Workflow แบบสั้น

แนวทางที่ใช้ไม่ได้ซับซ้อน แต่ต้องมีวินัย:

• ใช้ Claude Code สำหรับการวางแผน architecture, review, audit และ feedback เชิง product
• ส่งงาน implementation หลักให้ Codex GPT-5.5 โดยเฉพาะระดับ medium เพราะสามารถทำงาน coding ยาว ๆ ได้ดี และมี practical rate limit ที่เหมาะกับการ execute งานจำนวนมาก
• ระหว่างทางนำ Claude กลับมา review เพื่อหา gap, risk และจุดที่ควรปรับ
• ส่ง feedback นั้นกลับไปให้ Codex แก้ code, implement เพิ่ม, run verification และทำให้ product เสถียร
• ทำซ้ำจนเครื่องมือไม่ใช่แค่ demo แต่เป็น product ที่ใช้งานได้จริง

จุดสำคัญคือการแยกงาน planning กับ execution ออกจากกัน งาน planning มักใช้ input token เยอะ เพราะ model ต้องอ่าน requirement, context, repo structure, ข้อจำกัด และเป้าหมายของ product ส่วนงาน implementation มักใช้ output token เยอะ เพราะ model ต้องเขียน code, patch file, แก้ error และทำ verification ซ้ำหลายรอบ

ถ้าใช้ model ที่แพงมากกับทุกขั้นตอน ค่าใช้จ่ายจะสูงขึ้นเร็วมาก โดยเฉพาะ output token ที่มักแพงกว่า input token หลายเท่า ดังนั้น workflow นี้จึงใช้ model ที่เหมาะกับงานวางแผนในจุดที่ judgment สำคัญ และใช้ Codex GPT-5.5 ซึ่งมี rate limit สูงกว่าและ cost-effective กว่าสำหรับงาน execute จำนวนมาก

ทำไม Claude Code เหมาะกับการวางแผน

การวางแผนที่ดีไม่ใช่แค่เขียน todo list แต่ต้องตัดสินใจว่าอะไรควรมี อะไรไม่ควรมี ควร build อะไรก่อน แต่ละส่วนเชื่อมกันอย่างไร risk อยู่ตรงไหน และ repo ต้องสื่อสารอย่างไรให้ developer คนอื่นเข้าใจทันที

ในโปรเจกต์นี้ Claude Code ถูกใช้ช่วยคิดเรื่องเช่น:

• ควรรวมเครื่องมืออะไรไว้ใน repo เดียวกัน
• เครื่องมือไหนควรเป็น app แยก
• route ภาษาไทยและอังกฤษควรจัดอย่างไร
• ส่วนไหนควรทำงานใน browser เพื่อ privacy
• feature ไหนสำคัญต่อ SEO และ GitHub discoverability
• README ควรใช้ title และ description แบบไหนให้คนค้นหาเจอง่าย
• จะขอ attribution อย่างไรโดยไม่ทำให้ MIT License กลายเป็นข้อจำกัด

Claude จึงถูกใช้เหมือน planning partner และ reviewer ที่ช่วยชี้จุดอ่อนก่อนเริ่ม implementation รอบใหญ่

ทำไม Codex ทำงาน implementation เป็นหลัก

Codex GPT-5.5 ทำงาน implementation ส่วนใหญ่ เพราะโปรเจกต์นี้ต้องใช้ repo work จำนวนมาก เช่น อ่านไฟล์ แก้ code สร้าง route ปรับ documentation run build ตรวจ security audit แก้ error และวนซ้ำจน stable

งานแบบนี้ต้องใช้ execution volume สูงมาก ต่อให้ model ฉลาดแค่ไหน ถ้า rate limit จำกัดมาก หรือ output token แพงเกินไป การ iterate จะช้าหรือแพงเกินจำเป็น ในกรณีนี้ Codex GPT-5.5 medium สามารถทำงานส่วนใหญ่ของ application ได้เกือบครบและค่อนข้างเสถียร จึงเหมาะเป็น implementation worker หลัก

ผลลัพธ์คือ workflow ที่ประหยัดกว่า:

• ใช้ model ที่แพงกว่าตรงจุดที่ judgment สำคัญที่สุด
• ใช้ model ที่ rate limit สูงกว่าสำหรับ coding session ยาว ๆ
• ใช้ review loop เพื่อรักษาคุณภาพ ไม่ใช่เชื่อ output แรกทันที
• ใช้ token budget ในขั้นตอนที่ให้ผลตอบแทนดีที่สุด

นี่ไม่ใช่การบอกว่า model หนึ่งดีกว่าอีก model เสมอ แต่เป็นการเลือกเครื่องมือให้ตรงกับงาน

Product ที่ได้จาก workflow นี้

repo นี้รวมเครื่องมือใช้งานจริงจำนวนมาก ผู้ใช้ทั่วไปสามารถเริ่มจาก DJAI Tools Hub ส่วน developer สามารถดู source จาก GitHub repo ที่เตรียมไว้สำหรับ open source

เครื่องมือหลักที่มีในโปรเจกต์ประกอบด้วย:

• สร้าง QR code และ export เป็น PNG หรือ SVG
• แปลงรูปภาพระหว่าง JPG, PNG, WebP, HEIC และ HEIF
• บีบอัดรูปภาพให้ใกล้ขนาดเป้าหมาย เช่น 100 KB หรือ 500 KB
• resize รูปภาพตาม pixel, percentage และ preset สำหรับ social media
• ลบ metadata ของรูปภาพ และดาวน์โหลดแบบ batch หรือ ZIP
• เครื่องมือ PDF สำหรับ merge, split, compress, rotate, watermark, protect, organize, add page numbers, remove metadata, images to PDF และ PDF to images
• แปลง DOCX เป็น PDF, HTML, Markdown และ text
• ดึง text จาก PDF และสร้าง Word จาก PDF ที่มี selectable text
• OCR ภาษาไทยและอังกฤษสำหรับ scanned document และรูปภาพ
• AI Token Counter สำหรับ text, code, PDF และ DOCX
• PDF to AI-ready Markdown
• AI Context Optimizer สำหรับลบ header, footer, page number, broken line และ spacing ที่รกเกินไป
• RAG Chunk Calculator พร้อม preview และ JSONL export
• Prompt Packager สำหรับรวม requirement, documentation, code และ reference เป็น prompt package
• CSV to JSON, JSON to CSV, CSV Cleaner, Merge CSV, Split CSV, CSV to XLSX และ XLSX to CSV
• หน้า interface ภาษาไทยและอังกฤษ พร้อม metadata และ canonical URL แยกตามภาษา

แนวคิดสำคัญคือ supported file processing ควรเกิดใน browser ให้มากที่สุด ผู้ใช้ไม่จำเป็นต้องสมัคร account และไม่จำเป็นต้อง upload ไฟล์ส่วนตัวไปยัง server ถ้าไม่จำเป็น

Review loop ที่ทำให้ product เสถียร

ข้อผิดพลาดใหญ่ของ vibe coding คือการคิดว่า AI output แรกคือของเสร็จแล้ว วิธีที่ดีกว่าคือทำให้ review เป็นส่วนหนึ่งของวงจร build

workflow ที่ใช้จริงคือ:

• ให้ Claude Code ช่วย plan หรือ review ส่วนสำคัญของ product
• ให้ Codex รับ target ที่ชัดเจนไป implement
• ให้ Codex อ่าน repo และแก้เฉพาะส่วนที่เกี่ยวข้อง
• run build, audit, local check และ route verification
• ส่งปัญหาหรือ feedback กลับไปให้ Codex แก้
• ทำซ้ำจน code และ product surface เสถียร

ขั้นตอนนี้สำคัญมาก เพราะปัญหาหลายอย่างจะเห็นหลัง integration แล้วเท่านั้น เครื่องมือหนึ่งอาจทำงานได้ แต่ route อาจพัง หน้าเว็บอาจดูถูกต้องแต่ SEO metadata ไม่ครบ README อาจมีข้อมูลครบแต่สื่อสาร value ไม่ชัด หรือ license อาจ permissive แล้วแต่ยังต้องมี attribution request ที่สุภาพใน README

คนอื่นใช้ repo นี้ทำ vibe coding project ได้อย่างไร

repo นี้เหมาะเป็นฐานสำหรับคนที่อยากสร้าง tool ด้วย AI โดยไม่ต้องเริ่มจาก blank folder

developer สามารถ fork แล้วใช้เป็น:

• browser tool starter kit
• ตัวอย่าง Next.js multi-tool project
• ตัวอย่าง bilingual Thai-English product
• reference สำหรับ privacy-first file processing
• ชุดเครื่องมือสำหรับ prompt engineering และ AI context workflow
• ฐานสำหรับ internal business tools
• template สำหรับ public SEO tool site
• portfolio project ที่แสดงการใช้ AI-assisted engineering อย่างจริงจัง

วิธีใช้ที่ดีที่สุดคือเลือก business problem หนึ่งอย่าง แล้วดัดแปลง pattern ของ tool ให้แก้ปัญหานั้น เช่น โรงเรียนอาจทำ portal เตรียมไฟล์ส่งงาน นักกฎหมายอาจทำ private document cleanup tool ร้านกาแฟหรือโรงแรมอาจทำ QR menu, image preparation และ guest document workflow เอเจนซี่การตลาดอาจทำ campaign asset converter ส่วนทีม software อาจต่อยอด AI tools ไปเป็น prompt library, RAG preparation system หรือ internal documentation packager

ไอเดียธุรกิจที่ต่อยอดจาก repo นี้ได้

repo นี้ไม่ได้จำกัดอยู่แค่เครื่องมือที่มีอยู่แล้ว แต่เป็น foundation สำหรับ product อื่น ๆ ได้ เพราะแนวทาง browser-based และ modular ทำให้ต่อยอดได้หลายแบบ:

• ชุด PDF และ image tools แบบ white-label สำหรับธุรกิจขนาดเล็ก
• portal แปลงเอกสารภาษาไทย-อังกฤษสำหรับโรงเรียน คลินิก โรงแรม หรือ agency
• private client-file preparation system สำหรับ freelancer
• QR campaign builder สำหรับร้านอาหาร event และธุรกิจท่องเที่ยว
• dashboard เตรียมรูปภาพสำหรับ social media
• เครื่องมือช่วยเตรียม resume, application และไฟล์ upload
• local-first AI prompt packaging tool สำหรับทีม development
• RAG dataset preparation tool สำหรับบริษัทที่สร้าง knowledge base
• bilingual utility website ที่สร้าง traffic จากเครื่องมือฟรี
• internal operations toolkit ที่ให้พนักงาน process ไฟล์โดยไม่ต้องส่งไป third-party service

นี่คือจุดที่ vibe coding มีประโยชน์กับธุรกิจจริง เป้าหมายไม่ใช่สร้าง app สุ่ม ๆ แต่คือการเปลี่ยนงานซ้ำ ๆ ใน operation ให้กลายเป็นเครื่องมือที่ประหยัดเวลา ลด error และสร้างประโยชน์ต่อสาธารณะได้

MIT License หมายความว่าอะไร

repo นี้เปิดภายใต้ MIT License ในทางปฏิบัติหมายความว่า developer และผู้ใช้สามารถ use, copy, modify, merge, publish, distribute, sublicense และ sell software ได้ รวมถึงใช้ใน commercial product ได้ ตราบใดที่ยังเก็บ copyright notice และ license text เอาไว้

เรื่องนี้สำคัญเพราะช่วยลด friction ในการนำไปใช้ license แบบ permissive ทำให้นักเรียน freelancer startup educator และธุรกิจทดลองใช้ code ได้ง่าย โดยไม่ต้องกลัวข้อจำกัดที่ซับซ้อนเกินไป

ใน README ยังมี attribution request แบบสุภาพ ขอให้คนที่ใช้ tool ใน public project หรือ commercial product ช่วยให้ credit หรือ backlink ไปที่ DJAI Academy, Siamese Cat Dev หรือ Siamese Cat Cafe หากสะดวก

request นี้ไม่ใช่ข้อบังคับทางกฎหมายแบบ license condition ตัว MIT License ยังคงเปิดกว้างและใช้ง่ายเหมือนเดิม แต่ credit, backlink, star, follow และการกล่าวถึงอย่างจริงใจช่วยให้ creator มี reputation ที่ดีขึ้น ช่วยให้คนค้นเจอ project มากขึ้น และช่วยสนับสนุน community work ที่เกี่ยวข้องกับ Siamese Cat Cafe และการสนับสนุน independent development

สิ่งที่ builder ควรเรียนรู้จาก workflow นี้

บทเรียนหลักคือ AI coding จะได้ผลดีที่สุดเมื่อมนุษย์ยังเป็นเจ้าของ product judgment

Claude Code ช่วยคิดแผนและ critique งาน Codex ทำ repo execution และ stabilization ส่วนใหญ่ แต่มนุษย์เป็นคนกำหนด mission: open source เครื่องมือที่มีประโยชน์ ใช้งานจริง bilingual ค้นหาเจอง่าย และเชื่อมกลับไปยัง DJAI Academy, Siamese Cat Dev และ Siamese Cat Cafe อย่างชัดเจน

pattern ที่ควรนำไปใช้คือ:

• เริ่มจาก user problem ที่ชัดเจน
• ใช้ AI ช่วยวางแผน system และ tradeoff
• ใช้ coding agent implement เป็น step ที่ตรวจสอบได้
• review ด้วย model อีกตัวหรืออีก pass หนึ่ง
• แก้สิ่งที่ review เจอ
• เขียน documentation ให้ value ชัดเจน
• release ด้วย license ที่ทำให้คน adopt ได้ง่าย

สรุป

โปรเจกต์นี้เป็นตัวอย่างของการสร้าง product ด้วย AI-assisted development แบบจริงจัง solo developer หรือทีมเล็กสามารถรวม planning model, coding agent, review loop และ open-source discipline เพื่อสร้างเครื่องมือที่มีประโยชน์ โดยไม่เผา budget เกินจำเป็น

DJAI Academy ภูมิใจที่ได้นำเสนอผลงานของ Siamese Cat Dev และแบ่งปัน repo นี้ให้ community นำไปศึกษา fork ดัดแปลง และต่อยอดเป็น project ของตัวเอง พร้อมให้ credit เมื่อทำได้