เลิกใช้ AI เป็นเทเลพรอมพ์เตอร์ แล้วสร้าง Subagents, Skills และ Commands

ก้าวจากการพึ่งพาพรอมต์ ไปสู่ระบบเอเจนต์อัจฉริยะ

คนส่วนใหญ่ยังใช้ AI เหมือนเทเลพรอมพ์เตอร์อยู่

พิมพ์พรอมต์ รอ ได้คำตอบ คัดลอกไปวางที่ไหนสักแห่ง แล้วก็ทำซ้ำอีกครั้ง และอีกครั้ง ทุกการสนทนาเริ่มจากศูนย์ ทุกบทสนทนาลืมสิ่งที่เกิดขึ้นก่อนหน้า

นี่ไม่ใช่การทำงานร่วมกัน แต่เป็นการสั่งให้จดที่มีขั้นตอนเพิ่มขึ้นมาเท่านั้น

ในปี 2026 หากคุณยังเป็นฝ่ายป้อนบทให้ผู้ให้บริการ AI อ่านอยู่ คุณกำลังพลาดการเปลี่ยนแปลงครั้งใหญ่ที่เกิดขึ้นใต้เท้าคุณ

ปัญหาของโมเดลเทเลพรอมพ์เตอร์

เมื่อใช้ AI เป็นเทเลพรอมพ์เตอร์ คุณกำลังปฏิบัติต่อระบบที่ทำงานอัตโนมัติได้ ราวกับเป็นเครื่องสร้างข้อความแบบครั้งเดียวจบ รูปแบบเป็นแบบนี้:

1. คุณเขียนพรอมต์อย่างละเอียด
2. คุณรอคำตอบ
3. คุณประเมินผลลัพธ์ด้วยตัวเอง
4. คุณปรับแก้แล้วสั่งใหม่
5. คุณสูญเสียบริบททั้งหมดเมื่อปิดแชต

โมเดลนี้มีข้อบกพร่องร้ายแรงสามข้อ:

ไม่มีความรู้ที่คงอยู่ถาวร ทุกการสนทนาเป็นกระดานว่างเปล่า คุณต้องอธิบายบริบทเดิมซ้ำแล้วซ้ำอีก AI ของคุณไม่รู้จักโค้ดเบส ความชอบ ข้อจำกัด หรือประวัติของคุณเลย

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

ไม่มีความเชี่ยวชาญเฉพาะทาง คุณใช้ช่องทางทั่วไปช่องเดียวกับทุกอย่าง ทั้งเขียนโค้ด เอกสาร ออกแบบ ทดสอบ และดีพลอย ใช้พรอมต์สไตล์เดียว หน้าต่างบริบทเดียว และบทสนทนาเดียวที่ต้องทำงานของคนหลายคน

โมเดลเทเลพรอมพ์เตอร์มอง AI เป็นเพียงเครื่องมือ แต่เครื่องมือไม่ได้ขยายความเป็นอิสระในการทำงาน เอเจนต์ต่างหากที่ทำได้

อะไรเปลี่ยนไปเมื่อคุณคิดแบบเอเจนต์

ใน Claude Code สถาปัตยกรรมเอเจนต์ประกอบด้วยองค์ประกอบพื้นฐานสามอย่าง:

• Subagents: อินสแตนซ์ Claude เฉพาะทางที่มีหน้าต่างบริบทแยกอิสระ (~/.claude/agents/)
• Skills: โมดูลความรู้ที่ทำงานอัตโนมัติ พร้อมไฟล์ SKILL.md (~/.claude/skills/)
• Commands: คำสั่ง /slash ที่ผู้ใช้เรียกเองเพื่อทำสิ่งที่ต้องการอย่างชัดเจน (~/.claude/commands/)

ความแตกต่างสำคัญจากการเขียนพรอมต์แบบเดิม:

• Skills ถูกเรียกใช้โดย Claude โดยอัตโนมัติตามบริบท
• Commands ต้องให้คุณพิมพ์ /command เอง
• Subagents ทำงานในบริบทแยกต่างหากพร้อมเครื่องมือของตัวเอง

ลองเปรียบเทียบดู:

แนวทางเทเลพรอมพ์เตอร์:

"ช่วยเขียนคอมโพเนนต์การ์ดที่มีรูปภาพ ชื่อเรื่อง เนื้อหา และปุ่มหลัก ตามรูปแบบของดีไซน์ซิสเต็มและมาตรฐานการเข้าถึงของเรา..."

แนวทางของ Claude Code:

/generate card --variant=default --with-image=true --with-button=true

แบบแรกเป็นเพียงคำขอ ส่วนแบบที่สองเรียกใช้ skill ที่รู้อยู่แล้วว่าการ์ดคืออะไร ดีไซน์ซิสเต็มของคุณต้องการอะไร มาตรฐานการเข้าถึงข้อใดที่ใช้ และจะตรวจสอบผลลัพธ์ของตัวเองอย่างไร

สถาปัตยกรรม: Subagents, Skills & Commands

นี่คือโครงสร้างที่มาแทนโมเดลเทเลพรอมพ์เตอร์:

ระดับ 1: Subagents

Subagents คือไฟล์ markdown แยกเดี่ยวใน ~/.claude/agents/ ที่ทำงานแบบขนาน มีหน้าต่างบริบทของตัวเอง และเรียกใช้ skills ได้

~/.claude/agents/
├── header-builder.md
├── footer-builder.md
└── dashboard-builder.md

ไฟล์ subagent แต่ละไฟล์มี YAML frontmatter:

• name: ชื่อที่ระบุตัวตนชัดเจน
• description: ทำอะไรได้ และควรเรียกใช้เมื่อไร
• tools: ความสามารถที่อนุญาต (Read, Write, Bash, Grep, Glob)

ตัวอย่าง subagent (header-builder.md):

---
name: header-builder
description: Build complete header components with navigation
tools: Read, Write, Bash, Glob, Grep
---  You are a header component specialist...

ระดับ 2: Skills

Skills คือโมดูลความรู้ที่ทำงานอัตโนมัติ เมื่อคุณถามอะไรบางอย่างที่ตรงกับวัตถุประสงค์ของ skill Claude จะนำมันมาใช้เอง

~/.claude/skills/
├── card/
│   ├── SKILL.md
│   ├── workflows/
│   │   ├── generate.md
│   │   ├── validate.md
│   │   └── improve.md
│   ├── references/
│   │   └── schema.yml
│   └── scripts/
│       └── validate.py

แนวคิดนี้เป็นไปตามระเบียบวิธี Atomic Design: อะตอม โมเลกุล ออร์แกนิซึม แต่ละ skill เป็นผู้เชี่ยวชาญด้านเรื่องเดียวอย่างแท้จริง เมื่อคุณต้องการการ์ด skill การ์ดก็ทำงานเอง

แต่ละ skill รู้เรื่องต่อไปนี้:

• สคีมาของคอมโพเนนต์ (props, slots, variants)
• ข้อกำหนดของดีไซน์ซิสเต็มของคุณ
• รูปแบบเฉพาะของเฟรมเวิร์ก
• ข้อกำหนดการเข้าถึง WCAG
• skills ที่เกี่ยวข้องซึ่งอ้างอิงถึงได้

ระดับ 3: Commands

Commands คือทางลัดที่ผู้ใช้เรียกเอง คุณพิมพ์ /command เพื่อเรียกใช้ โดยอยู่ในเวิร์กโฟลว์ของ skill หรืออยู่ในระดับส่วนกลาง:

~/.claude/skills/card/workflows/
├── generate.md    # /generate card
├── validate.md    # /validate card
├── improve.md     # /improve card
├── document.md    # /document card
├── test.md        # /test card
└── a11y.md        # /a11y card

Commands เรียก subagents มาวางแผนได้ จากนั้น Claude หลักจะลงมือทำ ทำให้คุณได้เวิร์กโฟลว์ที่เป็นระบบพร้อมสิทธิ์ใช้เครื่องมือเต็มรูปแบบ

ตัวอย่างฉบับเต็ม: Card Skill

ผมจะแสดงให้เห็นชัด ๆ ว่ามันทำงานอย่างไรด้วย skill จริง:

โครงสร้างของ Skill

~/.claude/skills/card/
├── SKILL.md           # Core prompt and instructions
├── workflows/         # Slash commands
│   ├── generate.md
│   ├── validate.md
│   ├── improve.md
│   ├── document.md
│   ├── test.md
│   └── a11y.md
├── references/        # Documentation loaded into context
│   └── schema.yml
└── scripts/           # Executable Python/Bash scripts
    └── validate.py

ไฟล์ SKILL.md

---
name: card
description: Generate and validate card components 
  for any design system with accessibility checks
---  # Card Skill  When user requests card components, this skill 
auto-triggers based on context.
 ## Schema  props:
  title: string
  body: string
  image: { src, alt, width }
  variant: default | horizontal | overlay
 slots:
  header: Custom header content
  footer: Buttons, links
 ## Related Skills  This skill can reference:
- image
- heading
- button
- link
- text

การใช้ Slash Commands

สร้างการ์ดใหม่:

/generate card \   --variant="default" \   --title="Welcome" \   --with-image=true \   --with-button=true

ตรวจสอบการ์ดที่มีอยู่:

/validate card \   --file="components/card.jsx"

ตรวจสอบการปฏิบัติตามมาตรฐานการเข้าถึง:

/a11y card --level="AA"

ปรับปรุง UX สำหรับบริบทเฉพาะ:

/improve card \   --context="e-commerce product listing" \   --focus="conversion"

เบื้องหลังเกิดอะไรขึ้น

เมื่อคุณเรียก /generate card Claude จะ:

1. เรียกใช้ skill การ์ด: SKILL.md ถูกโหลดเข้าสู่บริบท
2. อ่านสคีมา:  ตรวจสอบพารามิเตอร์ของคุณกับ props ที่อนุญาต
3. อ้างอิง skills อื่น:  skills image, heading, button ช่วยเสริมความเชี่ยวชาญของตน
4. รันเวิร์กโฟลว์: workflows/generate.md ถูกประมวลผล
5. ตรวจสอบตัวเอง: รันเวิร์กโฟลว์ validate กับผลลัพธ์ของตัวเอง
6. ส่งผลลัพธ์กลับ:  ให้คอมโพเนนต์พร้อมคำเตือนต่าง ๆ (ถ้ามี)

skill การ์ดไม่ได้แค่สร้างมาร์กอัป แต่ประสานงานระบบของผู้เชี่ยวชาญ โดยแต่ละตัวเติมความรู้ในสาขาของตนเข้ามา

ทำไมเรื่องนี้สำคัญ: จากผู้ลงมือสร้าง สู่นักคิดเชิงระบบ

โมเดลเทเลพรอมพ์เตอร์ทำให้คุณเป็นแค่ผู้ปฏิบัติการ โมเดล skill ทำให้คุณเป็นสถาปนิก

เมื่อผมเปลี่ยนจากการเขียนพรอมต์มาออกแบบ skills หลายอย่างก็เปลี่ยนไป:

ผมเลิกพูดบริบทซ้ำ แต่ละ skill รู้เรื่องในโดเมนของตัวเองอยู่แล้ว ผมไม่ต้องอธิบายว่าการ์ดคืออะไรทุกครั้งที่ต้องการใช้

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

ผมมอบหมายการตรวจสอบ แทนที่จะตรวจทุกผลลัพธ์ด้วยตัวเอง คำสั่ง /validate ตรวจโครงสร้าง /a11y ตรวจการปฏิบัติตาม WCAG และ /test รันการตรวจสอบอัตโนมัติ ผมตรวจเฉพาะข้อยกเว้น ไม่ใช่ทุกผลลัพธ์

ผมสร้างองค์ความรู้ขององค์กร เมื่อผมปรับปรุง SKILL.md ของ skill การปรับปรุงนั้นคงอยู่ถาวร ระบบฉลาดขึ้นเรื่อย ๆ ไม่ใช่แค่ในบทสนทนาเดียว

นี่คือความต่างระหว่างการใช้ AI กับการสร้างสรรค์ไปพร้อมกับ AI

ดีไซน์คือโค้ด

จากงานด้านดีไซน์ซิสเต็ม ผมได้หลักการข้อหนึ่งคือ ดีไซน์คือโค้ด (The Design Is the Code)

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

เอเจนต์ทำให้สิ่งนี้เป็นจริงได้อย่างไร:

# The schema IS the source of truth schema:   props:     variant:       type: string
      enum: [primary, secondary, success, danger, warning, info]       default: primary
    size:       type: string
      enum: [sm, md, lg]       default: md
 tokens:   colors:     - --btn-bg
    - --btn-color
    - --btn-border-color

สคีมานี้ไม่ใช่แค่เอกสาร แต่เป็นแหล่งความจริงหนึ่งเดียว เอเจนต์สร้างคอมโพเนนต์จากมัน ตัวตรวจสอบเทียบกับมัน ดีไซน์โทเคนอ้างอิงมัน หนึ่งไฟล์ ใช้ได้หลายทาง

เมื่อนักออกแบบอัปเดตค่าโทเคนใน Figma การตั้งค่าเอเจนต์ก็อัปเดตตาม เมื่อการตั้งค่าเอเจนต์อัปเดต คอมโพเนนต์ที่สร้างขึ้นก็อัปเดตตาม ดีไซน์ คือโค้ด เพราะทั้งสองมาจากสคีมาเดียวกัน

เริ่มสร้างด้วย Claude Code อย่างไร

หากพร้อมก้าวข้ามโมเดลเทเลพรอมพ์เตอร์ นี่คือเส้นทางที่ทำได้จริง:

ขั้นที่ 1: ระบุโดเมนของคุณ

งานด้านใดของคุณที่ซ้ำซาก มีกฎชัดเจน และขึ้นกับบริบท? สิ่งเหล่านั้นคือผู้ท้าชิงที่เหมาะจะเป็น skill:

• การสร้างโค้ด
• เอกสาร
• การทดสอบ
• การรีวิวและตรวจสอบ
• การจัดการดีไซน์ซิสเต็ม
• การดีพลอยและ DevOps

ขั้นที่ 2: สร้าง Skill แรกของคุณ

เริ่มจาก SKILL.md ง่าย ๆ:

---
name: my-component
description: Generate and validate my-component
---  # My Component Skill  When user asks about my-component, apply these rules...

ขั้นที่ 3: เพิ่มเวิร์กโฟลว์ (Commands)

สร้างหกคำสั่งหลักใน workflows/:

แต่ละคำสั่งคือไฟล์ markdown ที่มีคำสั่งการทำงาน

ขั้นที่ 4: กำหนดการอ้างอิงระหว่าง Skills

Skills อ้างอิง skills อื่นได้:

## Related Skills  This skill uses:
- image (for card images)
- button (for CTAs)
- heading (for titles)

ลองทำแผนผังความสัมพันธ์เหล่านี้ โครงสร้างลำดับชั้นควรสอดคล้องกับโครงสร้างตามธรรมชาติของโดเมนคุณ

ขั้นที่ 5: สร้าง Subagents สำหรับงานซับซ้อน

เมื่อต้องการบริบทแยกหรือการทำงานแบบขนาน ให้สร้างไฟล์ subagent ใน ~/.claude/agents/:

---
name: header-builder
description: Build complete header components with navigation, logo, and search
tools: Read, Write, Bash, Glob, Grep
---  You are a header component specialist. When building headers:
1. Check existing header patterns in the codebase
2. Use the nav, button, logo skills for sub-components
3. Ensure responsive design and accessibility

สร้างคลัง Skills ของคุณ

จัดโครงสร้าง skills ตามหลัก Atomic Design:

แต่ละ skill:

• มีไฟล์ตั้งค่า SKILL.md ของตัวเอง
• มี workflows/ พร้อม slash commands
• มี references/ พร้อมเอกสารประกอบ
• มี scripts/ สำหรับระบบอัตโนมัติ
• รู้ว่าตัวเองอ้างอิง skills อื่นใดบ้าง

วิธีนี้สร้างระบบที่สม่ำเสมอและขยายได้ ซึ่ง Claude จะเรียกใช้ skill ที่ถูกต้องโดยอัตโนมัติตามบริบท

อนาคตเป็นของเอเจนต์

Brad Frost ผู้สร้าง Atomic Design พูดถึงการเปลี่ยนแปลงนี้ไว้ว่า ดีไซน์ซิสเต็มต้องกลายเป็นโครงสร้างพื้นฐานที่เครื่องอ่านได้ เพราะตอนนี้เอเจนต์ AI ประกอบ UI ด้วยคอมโพเนนต์ชุดเดียวกับที่ทีมมนุษย์ใช้

นี่ไม่ใช่การพยากรณ์ถึงปี 2030 แต่กำลังเกิดขึ้นแล้วตอนนี้

หากดีไซน์ซิสเต็มของคุณให้เอเจนต์แยกวิเคราะห์ไม่ได้ มันกำลังกลายเป็นของเก่า หากเวิร์กโฟลว์การพัฒนาของคุณต้องให้คนสั่งพรอมต์ทุกขั้นตอน มันก็ขยายขนาดไม่ได้ หากการใช้ AI ของคุณเริ่มจากศูนย์ทุกครั้ง คุณกำลังสิ้นเปลืองความรู้ที่สะสมมา

โมเดลเทเลพรอมพ์เตอร์ใช้ได้ดีตอนที่ AI ยังเป็นของใหม่ แต่ใช้ไม่ได้อีกต่อไปเมื่อ AI เป็นโครงสร้างพื้นฐาน

เลิกเขียนพรอมต์ เริ่มออกแบบ

สร้างเอเจนต์ มอบ skills ให้ แล้วปล่อยให้พวกมันประสานงานกัน

อนาคตเป็นของผู้ที่ออกแบบระบบ ไม่ใช่ผู้ที่เขียนสคริปต์

กำลังสร้างดีไซน์ซิสเต็มแบบเอเจนต์ เพื่ออนาคตของการพัฒนาเว็บ

อ่านต่อ

• The Design Is the Code  การสำรวจแนวคิดเซลลูลาร์ออโตมาตาในดีไซน์ซิสเต็มของผม
• Atomic Design by Brad Frost  ระเบียบวิธีเบื้องหลังลำดับชั้นของคอมโพเนนต์
• Designing Systems That Build Themselves  จากผู้ลงมือสร้าง สู่นักคิดเชิงระบบ