คุณจะได้สร้างงานบน Meridian แดชบอร์ดตัวอย่างของธนาคารรีเทลสมมติในประเทศไทย ทุกอย่างที่เห็น ทั้งบัญชี ยอดเงิน และรายการเดินบัญชี ล้วนเป็นข้อมูลตัวอย่างจำลอง ไม่มีอะไรจริงและไม่ได้เชื่อมต่อกับระบบใด เป็นพื้นที่ทดลองที่ปลอดภัย ลงมือสร้างได้เต็มที่
เวิร์กช็อปนี้พูดถึงอะไรกันแน่
ที่ Song เราไม่เคยทำงานแบบต่างคนต่างทำ เราสร้างโซลูชันระดับองค์กรที่ขยายผลได้ตลอดเส้นทาง ตั้งแต่การค้นหาโจทย์และออกแบบ ไปจนถึงการสร้าง การรัน และการดูแลระบบ เราอยู่ในธุรกิจของประสบการณ์ผู้บริโภคแบบครบวงจร
ไม่มีไซโล
ทีมเดียว สายงานเดียว ตั้งแต่บทสนทนาค้นหาโจทย์ครั้งแรกไปจนถึงสิ่งที่รันบนโปรดักชัน แต่ละสายงานไม่ใช่การส่งต่องานเป็นทอด ๆ แต่เป็นความพยายามเดียวที่ต่อเนื่องกัน
ประสบการณ์คือธุรกิจ
เราไม่ได้ส่งมอบชิ้นงานแบบแยกส่วน แต่เราส่งมอบประสบการณ์ผู้บริโภคที่ต้องขยายผลได้ และทุกสิ่งที่เราสร้างถูกวัดผลจากผลลัพธ์นั้น
คอนเท็กซ์เดียวร่วมกัน ไม่ใช่แยกตามบทบาท
harness สร้างคอนเท็กซ์ร่วมกันหนึ่งเดียวรอบงาน ไม่ว่าคุณจะรับบทบาทไหนก็ไม่สำคัญ ทุกคนอ่านและกำหนดทิศทางจากแหล่งข้อมูลความจริงเดียวกัน
harness คือวิธีที่เราสร้างคอนเท็กซ์รอบการสร้างประสบการณ์ที่ดีที่สุด ไม่ว่าคุณจะเล่นบทบาทใด: คอนเท็กซ์เดียวที่เป็นหนึ่งเดียวตลอดทั้งโปรแกรม รวมความคิดให้กลายเป็นผลลัพธ์เดียวที่ดีกว่าเดิม
เวิร์กช็อปนี้คืออะไร
คนที่ไม่เขียนโค้ดจะเห็นว่าลูปนี้คืองานฝีมือของตัวเองอยู่แล้ว ส่วนคนเขียนโค้ดจะเปลี่ยนบทบาทจากคนพิมพ์โค้ดเป็นผู้กำกับระบบ ไม่มีใครถูกแทนที่ ทุกคนก้าวขึ้นไปอีกขั้น
แนวคิดตั้งต้น
ทุกคนในห้องสามารถขับเคลื่อนการส่งมอบซอฟต์แวร์จริงได้ด้วยการอธิบายประสบการณ์ที่ต้องการ เมื่อจบเซสชัน ผู้เข้าร่วมทุกคนจะได้ส่งมอบฟีเจอร์จริงที่ผ่านการตรวจสอบแล้วหนึ่งอย่าง ด้วยคำพูดของตัวเอง
แกนหลักของแอป
แอปถูกสร้างเป็นเลเยอร์ที่ผู้ช่วยอ่านได้: คอนเท็กซ์ (.planning/), ดีไซน์ (dls/), ข้อมูล (data/), ตัวแอป และรายงานสรุปที่มันสร้างให้ตอนจบ
เลเยอร์ดีไซน์ของคุณ
หน้าตาของแอปอยู่ใน dls/ ซึ่งเป็นดีไซน์ซิสเทมของคุณ ประกอบด้วย tokens และ components ลองขอดูเลเยอร์ DLS ของคุณ แล้วทุกฟีเจอร์ที่คุณสร้างจะออกมาตรงแบรนด์
เมื่อจบเซสชัน ผู้เข้าร่วมจะสามารถ
- รันลูป SpectrumOS กับงานจริง และสร้างการเปลี่ยนแปลงที่คอมมิตและตรวจสอบแล้ว
- อ่าน
.planning/และเลเยอร์ดีไซน์dls/ในฐานะแหล่งความจริงร่วมกัน และตามรอยหนึ่งคำขอไปจนถึงคอมมิตของมัน - ระบุงานที่ต้องทำซ้ำ ๆ ของตัวเองหนึ่งอย่างที่ระบบช่วยรับไป และดุลยพินิจที่ระบบช่วยปลดล็อกให้เราได้ไปโฟกัส
คู่มือและ repo ที่คุณจะโคลน
คู่มือนี้ (ส่วนตัว)
ชุดเครื่องมือสำหรับผู้ดำเนินเวิร์กช็อป: อีเมลงานเตรียมตัว, รันชีต, เช็กลิสต์การตั้งค่า, สไลด์, เอกสารแจกผู้เข้าร่วม รวมถึงสคริปต์ปูพื้น AI และสคริปต์ปิดท้าย เอกสารนี้เป็นส่วนตัวตามปกติ ไม่มีใครต้องโคลน ทุกอย่างที่คุณต้องใช้อยู่บนเว็บไซต์นี้แล้ว
workshop-starter-repo (ผู้เข้าร่วมโคลน)
แดชบอร์ดตัวอย่าง Meridian, โครง .planning/, เลเยอร์ดีไซน์ dls/, API ข้อมูลจำลอง และ SpectrumOS ที่รวมมาให้ใน vendor/ มาพร้อม git tag ชื่อ baseline สำหรับรีเซ็ตกลับได้ทันที
สิ่งที่ต้องทำก่อนมา
ใช้เวลาสิบห้านาที ทำให้เสร็จก่อนถึงวัน เพื่อให้คุณเดินเข้ามาพร้อมลงมือสร้าง ไม่ใช่มานั่งแก้ปัญหาการติดตั้ง ทำเสร็จข้อไหนก็ติ๊กข้อนั้นไป
ขอสิทธิ์เข้าใช้ Claude และติดตั้งเครื่องมือ
ตรวจสอบว่าคุณล็อกอิน Claude ได้ ติดตั้ง Claude Code (เครื่องมือแบบคอมมานด์ไลน์ที่คุณจะใช้ควบคุม) และ แอป Claude สำหรับเดสก์ท็อป จากนั้นยืนยันว่า Claude Code ทำงานได้:
claude --versionติดตั้ง Visual Studio Code
VS Code คือโปรแกรมแก้ไขโค้ดและเทอร์มินัลในตัวที่คุณจะใช้ในวันงาน ติดตั้งจาก Accenture software portal (ค้นหาคำว่า "Visual Studio Code") มีอยู่แล้ว? ข้ามไปได้เลย
ติดตั้ง Node.js
Node.js ใช้รันเครื่องมือของเวิร์กช็อปและพรีวิวแอป ติดตั้งเวอร์ชัน LTS ปัจจุบัน (Node 22 ขึ้นไป) มีอยู่แล้ว? ข้ามไปได้เลย
ถ้ามี Homebrew: brew install node ไม่มี Homebrew? ดาวน์โหลดตัวติดตั้งจาก nodejs.org
ดาวน์โหลดและรันตัวติดตั้ง LTS จาก nodejs.org
ยืนยันว่าใช้งานได้
node -vสร้างบัญชี GitHub
โปรเจกต์อยู่บน GitHub ถ้าคุณยังไม่มีบัญชี สมัครได้ฟรีที่ github.com โดยใช้อีเมล Accenture ของคุณ เตรียมแค่นี้ก็พอ เราจะดาวน์โหลดโปรเจกต์พร้อมกันตอนคุณนั่งลง ในหัวข้อ ตั้งค่าให้พร้อม ด้านล่าง
เรียน Anthropic 101 ให้จบ
เรียน Anthropic 101 ให้จบก่อนเซสชัน ใช้เวลาไม่นาน และช่วยให้แนวคิดที่เราใช้ในห้องรู้สึกคุ้นเคย คุณจะได้ประโยชน์สูงสุดจากสองชั่วโมงนี้
เตรียมใจมาสนุกและเรียนรู้
ไม่ต้องมีประสบการณ์เขียนโค้ด ขอแค่ความอยากรู้อยากเห็น คุณจะได้อธิบายสิ่งที่ต้องการเป็นคำพูดธรรมดา แล้วดูมันกลายเป็นซอฟต์แวร์ที่ใช้งานได้จริง
เริ่มต้นใช้งานให้พร้อม
การตั้งค่าคือคำสั่งไม่กี่บรรทัดที่คุณวางลงในเทอร์มินัลทีละบรรทัด เหมือนกันสำหรับทุกคน ไม่ว่าจะเขียนโค้ดหรือไม่ และไม่มีอะไรตรงนี้ที่จะทำให้แล็ปท็อปคุณพังได้ เพิ่งเริ่มใช่ไหม? วางทีละบรรทัด หรือส่งสัญญาณเรียกเพื่อนข้าง ๆ หรือผู้ดำเนินเวิร์กช็อปได้เลย ขั้นที่ 4 จะเริ่ม Claude Code และจากนั้นคุณก็แค่บอกสิ่งที่ต้องการเป็นคำพูดธรรมดาได้เลย
เปิดเทอร์มินัล
เทอร์มินัลก็แค่กล่องที่คุณวางคำสั่งลงไป คุณจะใช้มันแค่ไม่กี่บรรทัดด้านล่าง จากนั้นก็คุยกับ Claude เป็นหลัก
กด Cmd + Space พิมพ์ Terminal แล้วกด Enter
เปิดเมนู Start พิมพ์ Terminal (หรือ PowerShell) แล้วกด Enter
ดาวน์โหลดโปรเจกต์
วางสองบรรทัดนี้ บรรทัดแรกคัดลอกโปรเจกต์มาไว้ที่ Desktop ของคุณ บรรทัดที่สองพาคุณเข้าไปในโฟลเดอร์นั้น ถ้า GitHub ขอให้ล็อกอิน ให้ใช้บัญชีจากงานเตรียมตัวของคุณ
git clone https://github.com/kaushikdas0/workshop-starter-repo.git spectrumos-workshop
cd spectrumos-workshopรันจาก: Desktop ของคุณ คำสั่งนี้จะสร้างโฟลเดอร์ spectrumos-workshop และพาคุณเข้าไปข้างใน
เปิดใช้งานคำสั่ง SpectrumOS
SpectrumOS มาพร้อมในโปรเจกต์ อยู่ในโฟลเดอร์ vendor/ วางสองบรรทัดนี้เพื่อเปิดใช้งานคำสั่ง /spec- ที่คุณจะใช้ตลอดวัน
npm install -g ./vendor/spectrum-os-2.0.3.tgz
spectrum-osรันจาก: ข้างใน spectrumos-workshop
เริ่ม Claude Code
คุณติดตั้ง Claude Code ไว้แล้วก่อนวันงาน ตอนนี้เริ่มมันข้างในโปรเจกต์ จากนี้ไปคุณจะขอสิ่งต่าง ๆ เป็นคำพูดธรรมดาก็ได้ หรือจะพิมพ์คำสั่งต่อไปก็ได้ แล้วแต่ถนัด
claudeรันจาก: ข้างใน spectrumos-workshop เคล็ดลับ: กด Shift + Tab เพื่อเปิดโหมด Auto ให้ลื่นไหลขึ้น
ดูตัวแอป และเช็กว่าตอนนี้อยู่ตรงไหน
ตอนนี้ Claude กำลังทำงานแล้ว ให้มันเปิดแอปให้คุณ เก็บแท็บเบราว์เซอร์ที่มันเปิดไว้ และรีเฟรชทุกครั้งหลังมีการเปลี่ยนแปลง จากนั้นพิมพ์ /spec-progress ด้วยตัวเองเพื่อดูว่าโปรเจกต์คืบหน้าถึงไหนแล้ว
"เปิด local web server สำหรับโฟลเดอร์นี้ที่พอร์ต 5173 แล้วเปิดแดชบอร์ดในเบราว์เซอร์ให้ฉันหน่อย"
จากนั้นใน Claude Code พิมพ์
/spec-progressแดชบอร์ดจะเปิดที่ http://localhost:5173 และ /spec-progress ควรกล่าวถึงโฟลเดอร์ .planning อยากรันเซิร์ฟเวอร์เองมากกว่า? ใช้ npx serve . -l 5173 ในแท็บเทอร์มินัลที่สอง เพื่อให้ Claude ทำงานต่อไปได้
ไม่มีสิ่งที่คุณพิมพ์อันไหนทำให้แล็ปท็อปพังได้ หากต้องการกลับไปจุดเริ่มต้นที่สะอาด ให้บอก Claude ว่า "รีเซ็ตโปรเจกต์กลับไปที่ baseline tag" หรือพิมพ์ git reset --hard baseline ยังติดอยู่? เรียกผู้ดำเนินเวิร์กช็อปได้เลย
สิ่งที่เราจะทำในห้อง
กระชับและได้ลงมือทำจริง สี่อย่าง แต่ละอย่างคือประโยคธรรมดาที่คุณพูดกับ Claude ไม่ต้องเขียนโค้ด ไม่ต้องเตรียมอะไร แค่ทำตามไปด้วยกัน และติ๊กแต่ละข้อเมื่อทำเสร็จ
เรียนรู้วิธีขอความช่วยเหลือ
เริ่มด้วยการเรียนรู้วิธีแก้เมื่อติดขัด อธิบายปัญหาของคุณเป็นคำพูดธรรมดา เช่น บั๊กที่อยากให้แก้ แล้ว Claude จะช่วย และ /spec-help จะแสดงคำสั่งทั้งหมดพร้อมหน้าที่ของมัน
"แก้บั๊กด้วย SpectrumOS ทำยังไง?" /spec-help
นิสัยที่ดีตลอดทั้งวัน: ไม่แน่ใจว่าจะทำอะไรต่อ? ถามเป็นคำพูดธรรมดา หรือรัน /spec-help
ดูเลเยอร์ดีไซน์ของคุณ หรือ DLS
แอปของคุณมีดีไซน์ซิสเทมที่เรียกว่า DLS ซึ่งทำให้ทุกอย่างตรงแบรนด์ ลองขอให้ Claude แสดงให้ดู มันจะชี้ไปที่โฟลเดอร์ dls/ ของคุณ: tokens (สี ระยะห่าง ฟอนต์) และ components ที่ทุกฟีเจอร์ถูกสร้างขึ้นจากมัน
"ขอดูเลเยอร์ DLS ของฉันหน่อย อยู่ที่ไหนและมีอะไรอยู่ในนั้นบ้าง?"
มันอยู่ใน dls/ ในโปรเจกต์ของคุณ: tokens.css, components.css และกฎต่าง ๆ ทุกฟีเจอร์อ่านจากตรงนี้ ผลลัพธ์จึงออกมาหน้าตาถูกต้อง
เปลี่ยน Spend by category ให้เป็นกราฟวงกลมแบบมีอนิเมชัน
ถึงเวลาสร้างของจริง เอาวิดเจ็ต Spend by category มาเปลี่ยนเป็นกราฟวงกลมแบบมีอนิเมชัน ให้ตรงแบรนด์ โดยใช้ design skill อ่านแผนที่ Claude เสนอ อนุมัติ แล้วดูมันสร้างให้
/spec-quick "เปลี่ยน Spend by category ให้เป็นกราฟวงกลมแบบมีอนิเมชัน ใช้ design skill ของเราเพื่อให้ยังตรงแบรนด์"
การอนุมัติแผนคือจังหวะที่คุณได้ควบคุม รีเฟรชแอปหลังจากมันสร้างเสร็จเพื่อดูกราฟวงกลม
ให้เอกสารฟีเจอร์เขียนตัวมันเอง
จากคอนเท็กซ์เดียวกับที่สร้างฟีเจอร์ของคุณ สร้างเอกสารฟีเจอร์เชิงธุรกิจสั้น ๆ เป็น HTML อธิบายสิ่งที่คุณเพิ่งส่งมอบ ไม่ต้องมีขั้นตอนเขียนแยกต่างหาก
/spec-fast "เขียนเอกสารฟีเจอร์เชิงธุรกิจหนึ่งหน้าเป็น HTML สำหรับ landing page ที่เรามีตอนนี้"
เปิดไฟล์ HTML ที่มันสร้างในเบราว์เซอร์ นั่นคือลูปแบบครบวงจร: คุณพูด มันส่งมอบ และมันเขียนสรุปให้
ต่อยอดที่บ้าน
ลูปเดิม ในเวลาของคุณเอง แต่ละข้อคือประโยคธรรมดา หยิบ /spec-fast มาใช้กับการปรับเล็ก ๆ น้อย ๆ หรือ /spec-quick สำหรับงานแบบครบวงจร ทำเสร็จข้อไหนก็ติ๊กข้อนั้น
เพิ่มอนิเมชันนับถอยหลังให้ fund buckets
ด้านบนของแอปคือ fund buckets ของคุณ ได้แก่ Everyday fund และ Holiday fund ลองขอให้ SpectrumOS ใส่อนิเมชันนับถอยหลังให้พวกมัน
"เพิ่มอนิเมชันนับถอยหลังให้ fund buckets ด้านบน (Everyday fund และ Holiday fund)"
เปลี่ยนโลโก้แบรนด์
สลับโลโก้ของแอปเป็นโลโก้แบรนด์อื่น ใช้ไฟล์รูปโลโก้จริง แทนการวาดขึ้นในโค้ด
"เปลี่ยนโลโก้แบรนด์ในส่วนหัวของแอปเป็นโลโก้ในไฟล์รูปนี้"
วางไฟล์โลโก้จริงลงในโปรเจกต์แล้วชี้ให้ Claude เห็น อย่าวาดโลโก้แบรนด์ด้วยมือ
เพิ่มฟุตเตอร์ให้แอป
ใส่ฟุตเตอร์ที่เข้ากับแดชบอร์ดธนาคารให้แอป: ชื่อธนาคาร บรรทัดลิขสิทธิ์ และลิงก์ไม่กี่อัน
"เพิ่มฟุตเตอร์ให้แอป โดยมีชื่อธนาคาร บรรทัดลิขสิทธิ์ และลิงก์ไม่กี่อัน"
ทำสไลด์นำเสนอลูกค้า 3 หน้า
สร้างงานนำเสนอเชิงธุรกิจสั้น ๆ สามหน้า ที่พาลูกค้าดูฟีเจอร์ที่คุณสร้างให้แอปธนาคาร รวมถึงดีไซน์ด้วย ใช้อันไหนก็ได้ที่เหมาะ /spec-fast หรือ /spec-quick
"สร้างงานนำเสนอเชิงธุรกิจ 3 หน้า ที่ลิสต์ฟีเจอร์ที่เราสร้างให้แอปธนาคาร รวมถึงดีไซน์ เพื่อนำไปเสนอลูกค้า"
ตั้งนิสัยตรวจสอบเสมอ
สอนกฎประจำให้ Claude: ทุกครั้งที่ SpectrumOS สร้างฟีเจอร์ ให้มันทดสอบด้วย responsive design ก่อน แล้วค่อยขอให้คุณทดสอบ คุณภาพจะถูกตรวจก่อนถึงมือคุณ
"ตั้งแต่นี้เป็นต้นไป ทุกครั้งที่คุณสร้างฟีเจอร์ ให้ทดสอบด้วย responsive design ก่อนจะขอให้ฉันทดสอบ"
แบบนี้จะทำให้ "พิสูจน์ว่าใช้งานได้บนมือถือ" เกิดขึ้นอัตโนมัติ ไม่ใช่สิ่งที่คุณต้องคอยจำ
ชีตสรุปของคุณ
ลูปเดียวกันที่ปรับเข้มหรือเบาได้ พร้อมคำสั่งไม่กี่ตัวที่คุณจะใช้ เปิดหน้านี้ค้างไว้ระหว่างสร้างงาน
ลูปเดียวกัน ไม่ว่าคุณจะสร้างอะไร
สี่จังหวะเดิมทุกครั้ง คุณแค่ลงลึกในจังหวะที่งานต้องการ และเลือกคำสั่งที่ตรงกัน คิดซะว่าแต่ละอันคือลูปเดียวกันที่ปรับเข้มหรือเบา
งานจิ๊บ ๆ ทำครั้งเดียว
/spec-fastมันแค่ทำแล้วคอมมิตเลย: แก้คำผิด, ค่าคอนฟิก, เอกสารสั้น ๆ ไม่มีแผน ไม่มีพิธีรีตอง
งานเล็ก ๆ ที่ทำให้ถูกต้อง
/spec-quickมันเสนอแผน สร้างตามแผน และคอมมิตพร้อมประวัติที่สะอาด เติม --validate แล้วมันจะตรวจงานของตัวเองด้วย
ไอเดียดีไซน์หรือ UI
/spec-sketchอธิบายไอเดีย แล้วมันจะร่างม็อกอัปแบบใช้แล้วทิ้งสองสามชิ้นให้คุณลองดูและให้ความเห็น
ฟีเจอร์เต็มรูปแบบ ครบวงจร
/spec-phaseลูปทั้งหมด: /spec-discuss-phase, /spec-plan-phase, /spec-execute-phase แล้วตามด้วย /spec-verify-work รัน /spec-progress เมื่อไหร่ก็ได้เพื่อดูว่าจังหวะถัดไปคืออะไร
คำสั่งต่าง ๆ
| คำสั่ง | ทำอะไร |
|---|---|
claude | เริ่ม Claude Code ในโฟลเดอร์ปัจจุบัน |
/spec-help | แสดงคำสั่งทั้งหมดพร้อมหน้าที่ เริ่มที่นี่เมื่อไม่แน่ใจ |
/spec-progress | แสดงว่าโปรเจกต์อยู่ตรงไหนและควรทำอะไรต่อ |
/spec-fast | ทำงานเล็ก ๆ หนึ่งอย่างแบบเร็ว ๆ: ปรับนิดหน่อย, เอกสาร, เปลี่ยนแปลงเล็กน้อย |
/spec-quick "..." | ทำงานหนึ่งอย่างแบบครบวงจร: เสนอแผน สร้าง และคอมมิต |
/spec-verify-work | ตรวจงานที่เสร็จแล้วเทียบกับสิ่งที่คุณขอ รวมถึงบนมือถือด้วย |
git log --oneline | ประวัติที่สะอาดของสิ่งที่ถูกสร้าง |
git reset --hard baseline | กลับไปจุดเริ่มต้นที่สะอาดถ้ามีอะไรผิดพลาด |