Creative Hub

Context

ทีมต้องสร้างโปสเตอร์สินค้าซ้ำ ๆ หลายภาษา แต่ละชิ้นต้องการ layout ที่ยืดหยุ่นและ export ที่เร็ว เครื่องมือทั่วไปทำได้ทั้งสองอย่าง แต่ไม่มีอันไหนที่พอดีกับ workflow จริง

Problem

ไม่มีเครื่องมือที่ให้ทั้ง layout control และ multi-language export ในที่เดียว เครื่องมือที่มีให้เลือกมักยืดหยุ่นเกินไปจนใช้เวลานาน หรือตายตัวเกินไปจนปรับไม่ได้

Role

ออกแบบ UX และ workflow ทั้งหมด ใช้ AI ช่วยเขียนโค้ดบางส่วนระหว่างพัฒนา

Process

เริ่มจากสังเกตขั้นตอนการทำโปสเตอร์จริง แล้วแยกออกเป็นการตัดสินใจทีละขั้นที่ชัดเจน

ได้ workflow 5 ขั้น: ตั้งค่า Grid → เลือก Media → กรอกข้อมูลสินค้า → จัดวาง → เลือกภาษาและ Export

แต่ละขั้นบังคับให้คิดก่อนก้าวต่อ ไม่ใช่ drag-and-drop แบบ freeform

Decisions

เลือก Konva Canvas เพราะ render บน browser ได้โดยตรง ไม่ต้องพึ่ง server สำหรับ export และยังรองรับ interactive editing ได้

เลือก workflow แบบ step-by-step แทนที่จะให้ผู้ใช้ตัดสินใจพร้อมกัน — ลด cognitive load และทำให้ผลลัพธ์สม่ำเสมอขึ้น

Technical Decisions

ส่วน export ใช้ Konva toDataURL() แล้วแปลงเป็น Blob เพื่อ trigger download โดยตรงใน browser ไม่ผ่าน server:

import Konva from 'konva';

type ExportOptions = {
  stage: Konva.Stage;
  filename: string;
  pixelRatio?: number;
};

export function exportToPng({ stage, filename, pixelRatio = 2 }: ExportOptions) {
  const dataUrl = stage.toDataURL({ pixelRatio, mimeType: 'image/png' });

  const link = document.createElement('a');
  link.href = dataUrl;
  link.download = `${filename}.png`;
  link.click();
}

pixelRatio: 2 ทำให้ได้ภาพ retina-quality โดยไม่ต้องเพิ่มขนาด canvas จริง

Result

ใช้งานจริงภายในทีมและตัวเอง ลด friction ในการสร้าง marketing material หลายภาษา

Reflection

เครื่องมือที่ดีไม่จำเป็นต้องทำได้ทุกอย่าง บางครั้งการกำหนด workflow ที่ถูกต้องตั้งแต่ต้นทำให้งานเร็วกว่าการให้อิสระเต็มที่

AI ช่วยเร่งการพัฒนาได้จริง แต่การตัดสินใจด้าน design ยังต้องมาจากคนที่เข้าใจว่า user จะใช้งานจริงอย่างไร

import Konva from 'konva';

type ExportOptions = {
  stage: Konva.Stage;
  filename: string;
  pixelRatio?: number;
};

export function exportToPng({ stage, filename, pixelRatio = 2 }: ExportOptions) {
  const dataUrl = stage.toDataURL({ pixelRatio, mimeType: 'image/png' });

  const link = document.createElement('a');
  link.href = dataUrl;
  link.download = `${filename}.png`;
  link.click();
}