Advanced Prompt for Coding GPT-5 เมื่อ ศิลปะกับวิทยาศาสตร์มาเจอกัน

Prompt Chaining เป็นวิธีที่เราใช้ในงานที่ซับซ้อนขึ้นมา โดยเราแตกงานเป็นหลายขั้นตอน เอาผลลัพธ์ของแต่ละ prompt มาต่อกัน เพื่อให้ได้คำตอบสุดท้ายที่เราต้องการ

Write a function in JavaScript that calculates the factorial of a number

function factorial(n) {
  if (n === 0) return 1;
  return n * factorial(n - 1);
}

From function above make the function iterative instead to avoid stack overflow for large numbers

function factorial(n) {
  if (typeof n !== "number" || n < 0) {
    throw new Error("Input must be a non-negative number");
  }

  let result = 1;
  for (let i = 1; i <= n; i++) {
    result *= i;
  }
  return result;
}

จะเห็นได้ว่าเราแยก prompt ออกเป็น 2 prompt โดยใช้คำตอบของ อันแรกมาเป็นตัวอย่างให้ prompt ครั้งต่อไป แบบนี้จะทำให้ AI เข้าใจ context และ สิ่งที่เราจะทำมากขึ้นนั้นเอง

เราดู 2 ตัวอย่างข้างบนเป็น advanced prompt ไปแล้ว เรามาลองเปรียบเทียบกับแบบที่เราไม่ใช้ prompting technique กัน

โดยตัวอย่างแรก prompt แบบไม่ใช้ technique

Write a JavaScript function that checks if a number is prime

function isPrime(n) {
  if (n <= 1) return false;
  for (let i = 2; i < n; i++) {
    if (n % i === 0) {
      return false;
    }
  }
  return true;
}

ในตัวอย่างนี้เราจะเห็นว่า Code ยังทำงานได้ก็จริง แต่! ไม่มีคำอธิบายว่า code นี้ทำงานยังไง และรวมไปถึงไม่ครอบคลุม Edge case เมื่อ input เยอะขึ้นเรามีการ loop ที่ไม่จำเป็น

ตัวอย่างที่สอง ใช้ Multimodal CoT Prompting

Think step by step using reasoning and if useful, show me a diagram or explanation before writing the JavaScript function that checks if a number is prime

Check n:
 ├─ If n ≤ 1 → Not prime
 ├─ If n = 2 → Prime
 ├─ If n % 2 = 0 → Not prime
 └─ Loop from 3 to √n, step 2:
        ├─ If divisible → Not prime
        └─ Else continue

function isPrime(n) {
  if (n <= 1) return false;
  if (n === 2) return true;
  if (n % 2 === 0) return false;

  for (let i = 3; i <= Math.sqrt(n); i += 2) {
    if (n % i === 0) {
      return false;
    }
  }
  return true;
}

โดยเราจะเห็นว่า AI แสดงวิธีการทำงานของ function นี้ รวมถึงการ optimization และ ครอบคลุม edge cases

โดยสรุปแล้ว การให้ AI ทำงานเหมือนกัน แต่ ผลลัพธ์กลับต่างกันในด้านการใช้งาน การครอบคลุมผลลัพธ์และการทำความเข้าใจในการนำไปใช้ เมื่อเทียบกับการไม่ใช้ technique อะไรเลย 

ผมยกมา 2 ตัวอย่างก็เริ่มงงกันแล้ว แต่!!! ผมมีวิธีเด็ดมานำเสนอ ที่จะเพิ่มประสิทธิ AI และรวมไปถึงได้ผลลัพธ์ที่มีสิทธิภาพใน Software development ผมมีวิธีการใหม่มานำเสนอคือ Gen-e2

PALO IT Gen-e2 Powered by GitHub Copilot

Gen-e2 ย่อมาจาก Generative AI Enhanced Engineering เป็นการปฏิรูปวิธีพัฒนา Software โดยการที่เรา focus ไปที่ end-to-end product มากกว่าที่จะมา focus ที่ software engineering

โดยภาพตัวอย่างเป็นข้อแตกต่าง ระหว่าง Traditional Approach กับ Gen-e2 โดยเราจะเห็นว่า Gen-e2 เน้นไปที่การเสริมสร้าง context ซึ่งสอดคล้องกับ GPT-5 ที่เน้น context และ reasoning เพื่อให้ AI สร้างผลลัพธ์ที่ตรงตามที่เราอยากได้ 

ทำไมต้อง Gen-e2 

1. Software delivers ได้เร็วขึ้น 2–5 เท่าในระยะเวลาเท่ากัน
2. Business team มีความมั่นใจในการ delivery with AI ถึง 90%
3. ลูกค้าประหยัดเวลาและต้นทุนถึง 25%-30%

ตารางเปรียบเทียบระหว่าง การทำงานแบบ Traditional Approach กับ Gen-e2

อธิบายคร่าวๆ สำหรับ Gen-e2 Powered by GitHub Copilot ไปแล้วเรามาดูวิธีการใช้ ในการ coding กันเลย โดยที่ผมจะจำลองว่าเราทำ dashboard เพื่อแสดงยอดขายในบริษัท PALO IT 

เริ่มจาก project ที่ชื่อว่า PALO IT dashboard แล้วสร้าง directory ชื่อว่า ai-rules อยู่ภายใน project เพื่อใช้เป็น context ที่ AI จะอ่านเมื่อเรา prompt โดยเราจะสร้าง instructions file เพื่ออธิบายให้ AI ได้รู้ว่าเราจะทำอะไร และ ทำยังไง ในตัวอย่างนี้ผมจะสร้าง rule ง่ายๆ โดย step ดังนี้

1. project-overview.instructions.md ใน file นี้เราจะอธิบายว่า project ของเรานั้นทำอะไร มีหน้าตาประมาณไหน มี business logic ยังไงบ้าง
2. design-system.instructions.md ใน file นี้เราจะอธิบายในเรื่องของ design เช่น การใช้สี การใช้ theme typography ขนาดของ font และ layout ของเรา
3. implementation-plan.instructions.md ใน file นี้เราจะอธิบายคร่าวๆ ว่า project ของเรามี development plan อย่างไร อะไรทำก่อน อะไรทำหลังและ status ของ plan

มาเริ่ม set up กันเลย โดยเราcopilot-instructions.md โดยเราจะสร้าง prompt โดยให้ AI สร้าง instruction ให้เรา

please create copilot-instructions.md to read my instructions in ai-rules directory

โดยหน้าตาของ directory เราก็จะได้แบบนี้

├── ai-rules
│   ├── design-system.instructions.md
│   ├── implementation-plan.instructions.md
│   └── project-overview.instructions.md
└──copilot-instructions.md

เรามาดู ในแต่ละ file ของเราดีกว่า เริ่มจาก Project overview กันก่อนเลย โดยเราจะให้ AI generate project overview ให้เรา โดยเราจะ prompt ไปกับ AI ในแบบ Multimodal CoT Prompting 

I am a developer I want you to create project overview for me, my project is to create sale dashboard for company named PALO IT

1. There will be 3 dashboards to show sale based on day,month, and year

2. When I click on dashboard I can compare my company sale with previous peroid 

3. Only company admin is able to access this dashboard

4. This dashboard will only be used internally

เราก็จะได้ผลลัพธ์แบบนี้ ใน file project overview 

---
description: Sales Performance Dashboard - Project Overview
applyTo: "**"
---

# Sales Performance Dashboard - Project Overview (PALO IT Internal)

## Product Vision
Provide PALO IT company administrators with a fast, reliable, single internal interface to monitor, compare, and analyze sales performance across daily, monthly, and yearly perspectives to enable timely, data‑driven decisions.

## Strategic Objectives
- Unify sales visibility (day / month / year) in one secure internal tool
- Accelerate decision cycles via instant comparative analytics
- Standardize KPIs and reduce manual spreadsheet effort
- Ensure only authorized company admins access sensitive revenue data

## Core User Journey
1. Authenticate (Company Admin SSO / IAM)  
2. Land on default (Today vs Previous Day) dashboard  
3. Switch tabs: Daily | Monthly | Yearly  
4. Apply filters (date range, business unit, region, product category)  
5. (Optional) Enable Compare Mode (e.g., This Month vs Last Month / This Year vs Last Year / Custom Period vs Period)  
6. Drill into variance explanations (delta, % change, contribution)  
7. Export snapshot / share internal link  
8. Sign out (session timeout enforced)

## Primary Persona
- Company Admin (Finance / Sales Ops / Leadership) – Full read access, comparison, export.

## Non-Persona (Explicitly Excluded)
- External users / clients (no access)  
- Standard employees without sales clearance  

เรามาดูในส่วนของ design system กันต่อเลย prompt สร้างตามนี้ได้เลย รอบนี้เราจะอ้างอิง doc จาก ตัว project overview ของเรา

From project-overview.instructions.md I’ve created project overview now let’s create design system I will be using

1.Chakra UI v2 as

2.React with TypeScript

3.My font will be `’Open Sans’, ‘Montserrat’, sans-serif` with different size

---
description: Any frontend implementation, this is the design guidelines
applyTo: "**"
---
## Design System Overview
Sale Dashboard System is built on **Chakra UI v2** and provides a 
comprehensive set of design tokens, components, and guidelines for 
building consistent user interfaces across the Impact Tracker platform. 
The system follows atomic design principles and emphasizes accessibility, 
customization, and developer experience.

**Key Technologies:**
- Chakra UI v2 as the foundation
- React with TypeScript
**Design Principles:**

- **Developer Experience**: Well-documented APIs and reusable components
## Typography

The typography system uses a hierarchical scale with semantic naming 
conventions for different text styles.

### Font Family
- **Primary**: `'Open Sans', 'Montserrat', sans-serif`
- **Weights**: 300 (Light), 400 (Regular), 500 (Medium), 
600 (SemiBold), 700 (Bold)

ส่วนสุดท้าย คือ implementation-plan โดยเราจะกำหนด develop ment plan ว่าอันไหนทำก่อน ทำหลัง และ status 

Refer to my design-system.instructions.md and project-overview.instructions.md create implementation plan that will be implement in next 4 weeks

---
status: draft
source: design-system + project-overview
scope: Sales Performance Dashboard (Internal)
lastUpdated: 2025-09-15
---

# Implementation Plan

## 1. Objectives Alignment
- Deliver an internal Sales Performance Dashboard enabling unified day/month/year KPIs, comparative analytics, and secure access.
- Adhere to design system basics (typography + Chakra UI v2 foundation) while anticipating expansion of tokens/components.
- Optimize for accessibility, reliability, and extensibility.

## 2. High-Level Architecture
- Frontend: React + TypeScript + Chakra UI v2 (component theming, responsive layout) 
- State Management: React Query (server cache) + lightweight local UI state via React Context or zustand if complexity grows.
- Auth: Placeholder SSO/IAM adapter (mock for initial phase, interface-driven for future integration).
- Data Layer: API service abstraction (REST endpoints; future GraphQL compatibility). 
- Feature Modules: `auth`, `dashboard-core`, `filters`, `analytics-comparison`, `exporting`.
- Theming: Central `theme` extending Chakra (typography scale, color palette once defined, spacing ramp).
- Testing: Jest + React Testing Library + MSW (API mocking) + Playwright (critical flows, later phase).

## 3. Delivery .... week 1 to 4
Phase 0: Set up tooling (Vite/TS/Chakra), theme scaffold, auth mock, API client, routing, and CI baseline.
Phase 1: Build core dashboard shell with daily KPIs, charts, filters, and resilient loading/error states.
Phase 2: Add monthly/yearly views, compare mode, and initial variance explanation drawer.
Phase 3: Introduce contribution breakdown, export (CSV/PNG groundwork), and sharable state links.
Phase 4: Harden performance, accessibility (WCAG AA), error boundaries, and security checks.
Phase 5: Finalize docs, monitoring hooks, backlog triage, and release readiness.

ผลลัพธ์ก็ตามนี้เลย

จะเห็นได้ว่า แค่นี้ set up ของเราก็เสร็จแล้วพร้อมใช้สำหรับ user story ของเราได้เลย โดย AI จะอิงจาก instruction ที่เราสร้างไว้แล้ว แล้วนำไป implement ให้เราโดยที่เราไม่ต้องลง technical เรื่อง prompt เลย โดยให้ AI implement ตาม plan ที่สร้างไว้แล้ว

จะเห็นได้ว่า set up แค่ไม่กี่นาที ก็สามารถสร้าง contextให้ AI ทำงานได้ในแบบที่เราต้องการได้แล้ว เพียงแค่ prompt Let’s create our app

เราก็จะได้ผลลัพธ์แบบนี้เลย โดยไม่ต้องใช้เทคนิคอะไรให้ยุ่งยาก 

หากองค์กรของคุณต้องการเพิ่ม Productivity ให้กับทีมงาน ด้วยการอัปสกิลให้ใช้ AI และ GPT-5 ได้อย่างเต็มประสิทธิภาพ ปลอดภัย และตรงตามมาตรฐานขององค์กร ติดต่อ PALO IT Thailand เพื่อช่วยประเมิน เทรนนิ่ง ออกแบบเวิร์กโฟลว์ หรือทำ Pilot Project แบบวัดผลได้ ติดต่อพวกเราได้ที่ Facebook Page: PALO IT Thailand