แฮนด์ออฟใหม่: วิธีแชร์โค้ดของตัวแทน AI กับทีมของคุณ1 min read

เอเจนต์การเข้ารหัสของ AI กำลังสร้างโค้ดได้ดีอย่างไม่น่าเชื่อ คลอดด์สามารถสร้างสิ่งประดิษฐ์ได้ Codex สามารถเขียนไฟล์ได้ เคอร์เซอร์สามารถสร้างส่วนประกอบได้ ChatGPT สามารถสร้าง HTML, React และแนวคิดแอปแบบเต็มในพื้นที่ทำงาน

แต่ยังคงมีช่องว่างที่น่าหงุดหงิดอยู่ประการหนึ่ง:

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

งานก็มีอยู่. มันแค่ติดอยู่ผิดที่

สิ่งประดิษฐ์ของ Claude อาศัยอยู่ภายในการสนทนาของ Claude Codex เขียนโค้ดลงดิสก์ของคุณ เคอร์เซอร์อัพเดตไฟล์ในเครื่อง ChatGPT ให้โค้ดแก่คุณภายใน ChatGPT ในทุกกรณี คุณมีบางสิ่งที่มีประโยชน์ แต่ยังไม่ใช่สิ่งที่ทีมของคุณสามารถใช้ได้จริง

นั่นคือการส่งต่อที่ขาดหายไประหว่างเจ้าหน้าที่และมนุษย์

ภาพหน้าจอของตัวแทนจรวดแฮนด์ออฟ: เริ่มต้น

ภาพหน้าจอของตัวแทนจรวดแฮนด์ออฟ: สิ้นสุด

ด้วย Anima Playgroundคุณสามารถวาง HTML, React หรือ Markdown จากตัวแทน AI ใดก็ได้ แล้วเปลี่ยนให้เป็นแอปที่ใช้งานจริงได้ทันที มันทำงานในเบราว์เซอร์ แก้ไขได้ และให้ลิงก์ที่แชร์ได้ซึ่งใครๆ ก็สามารถเปิดได้

อัปโหลดอาร์ติแฟกต์ของคุณไปที่ Anima Playground

และด้วยการที่ Anima เอ็มซีพีตัวแทนสามารถส่งผลลัพธ์ไปที่ Playground ได้โดยตรงและส่งคืนลิงก์สด

เชื่อมต่อตัวแทนของคุณกับ Anima MCP:

https://public-api.animaapp.com/v1/mcp

ตัวแทนของคุณเป็นคนสร้างมันขึ้นมา Anima รันครับ ทีมงานของคุณสามารถเปิดมันได้

ปัญหา: เจ้าหน้าที่ AI สร้างโค้ดโดยไม่มีที่สำหรับเรียกใช้

เครื่องมือเข้ารหัส AI ส่วนใหญ่จะแก้ปัญหาส่วนแรกของเวิร์กโฟลว์: การสร้างโค้ด

พวกเขาสามารถสร้างส่วนประกอบ หน้า Landing Page แดชบอร์ด ต้นแบบ หรือเครื่องมือภายในขนาดเล็กได้ แต่เมื่อสร้างโค้ดแล้ว ขั้นตอนต่อไปมักจะเกิดขึ้นกับคุณ

คุณต้องรู้ว่าจะวางไว้ที่ไหน ใช้งานอย่างไร โฮสต์อย่างไร และแบ่งปันอย่างไร

นั่นคือสาเหตุที่ปัญหาเดียวกันนี้ปรากฏขึ้นในเวิร์กโฟลว์ของตัวแทนเกือบทั้งหมด:

• Claude ให้สิ่งประดิษฐ์แก่คุณ แต่มันอาศัยอยู่ภายใน Claude

• Codex เขียนไฟล์ แต่มันอยู่บนเครื่องของคุณ

• เคอร์เซอร์สร้างโค้ด แต่คุณยังคงต้องมีแอปในเครื่องหรือปรับใช้เป้าหมาย

• ChatGPT ให้รหัสแก่คุณ แต่ทีมของคุณไม่สามารถเปิดเป็นผลิตภัณฑ์ที่ใช้งานได้เท่านั้น

ตัวแทนให้คุณ. แหล่งที่มา.
มันไม่ได้ให้คุณ สิ่งแวดล้อม.

และหากไม่มีสภาพแวดล้อม คุณจะไม่มีแอปที่ใช้งานจริง คุณมีบล็อกของรหัส

วิธีปกติในการแชร์โค้ดที่ AI สร้างขึ้นนั้นใช้งานไม่ได้

เมื่อคุณต้องการแสดงให้คนอื่นเห็นถึงสิ่งที่ตัวแทนสร้างขึ้น คุณมักจะมีตัวเลือกใดตัวเลือกหนึ่งเหล่านี้

1. ส่งภาพหน้าจอ

รวดเร็วแต่ทำให้ผลิตภัณฑ์เสียหาย

ปุ่มไม่คลิก แผนภูมิไม่ตอบสนอง แบบฟอร์มไม่ทำงาน ปฏิสัมพันธ์หายไป

คุณไม่ได้แชร์แอป
คุณแชร์รูปภาพของแอป

2. วางโค้ดลงใน Slack

วิธีนี้ใช้ได้กับตัวอย่างเล็กๆ น้อยๆ แต่จะแตกสลายอย่างรวดเร็ว

ไม่มีใครต้องการเรียกใช้คอมโพเนนต์ React 200 บรรทัดจากข้อความ Slack โค้ดเลื่อนออกไป สูญเสียบริบท และแทบจะเป็นไปไม่ได้เลยที่จะตรวจสอบอย่างถูกต้อง

3. ปรับใช้ด้วยตนเอง

นี่คือโซลูชัน “ของจริง” แต่หนักเกินไปสำหรับเอาต์พุตเอเจนต์ส่วนใหญ่

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

สำหรับซอฟต์แวร์ที่ใช้งานจริงนั่นก็สมเหตุสมผลดี
สำหรับการแบ่งปันบางสิ่งที่ตัวแทนเพิ่งสร้างขึ้นอย่างรวดเร็วนั้นถือว่าเกินสัดส่วนอย่างมาก

4. ใช้เครื่องมือแบ่งปัน HTML แบบคงที่

เครื่องมือบางอย่างสามารถโฮสต์ไฟล์ HTML ไฟล์เดียวได้ ที่ช่วยสำหรับเพจสแตติกธรรมดา

แต่ตัวแทนกำลังผลิตมากกว่า HTML แบบคงที่มากขึ้นเรื่อยๆ พวกเขาสร้างส่วนประกอบ React, เพจแบบโต้ตอบ, ต้นแบบแบบมีสถานะ, แดชบอร์ด และประสบการณ์ที่เหมือนกับแอป

หน้า HTML ที่ตรึงไว้นั้นไม่เพียงพอ

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

คุณต้องมีพื้นที่ทำงานสด

เลเยอร์ที่ขาดหายไป: สถานที่ที่โค้ดตัวแทนสามารถเรียกใช้ได้

ปัญหาที่แท้จริงไม่ใช่ว่าเจ้าหน้าที่ไม่สามารถเขียนโค้ดได้

ปัญหาก็คือว่า โค้ดที่สร้างโดย AI จำเป็นต้องมีพื้นที่ในการเป็นแอปที่ใช้งานได้.

สถานที่นั้นต้องทำบางสิ่งให้ดี:

• เรียกใช้ HTML, React และ Markdown โดยตรงในเบราว์เซอร์

• ให้ลิงก์แก่คุณที่ใครๆ ก็สามารถเปิดได้

• เก็บโค้ดไว้แก้ไขได้หลังจากแชร์แล้ว

• ทำงานกับเอาท์พุตจากตัวแทนใดๆ

• หลีกเลี่ยงการตั้งค่า การเก็บถาวร ขั้นตอนการสร้าง และปรับใช้การกำหนดค่า

นั่นคือสิ่งที่ Anima Playground สร้างขึ้นมาเพื่อ

คุณวางโค้ดจาก Claude, Codex, Cursor, ChatGPT หรือเอเจนต์อื่นๆ และ Playground จะเปลี่ยนโค้ดดังกล่าวให้เป็นแอปแบบโต้ตอบได้แบบเรียลไทม์

ไม่มีการตั้งค่าท้องถิ่น
ไม่มีการกำหนดค่าโฮสติ้ง
ไม่มีการปรับใช้ด้วยตนเอง
ไม่จำเป็นต้องมีบัญชีสำหรับผู้ชม

เพียงวางโค้ดแล้วแชร์ผลการวิ่ง

[เรียกใช้โค้ดที่ AI สร้างขึ้นใน Anima Playground]

เรียกใช้โค้ดจากตัวแทน AI

Anima Playground เป็นแบบไม่เชื่อเรื่องเอเจนต์ ไม่สำคัญว่ารหัสมาจากไหน

หากตัวแทนของคุณสามารถสร้างได้ HTML, Reactหรือ มาร์กดาวน์คุณสามารถเรียกใช้ได้ใน Playground

นั่นสำคัญเพราะทีมส่วนใหญ่ไม่ได้ทำงานในเครื่องมือ AI เดียว คนหนึ่งใช้คลอดด์ อีกอันใช้เคอร์เซอร์ คนอื่นใช้ ChatGPT นักพัฒนาอาจใช้ Codex PM อาจใช้สิ่งประดิษฐ์จากการแชท

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

จาก Claude: เปลี่ยนสิ่งประดิษฐ์ให้เป็นแอปที่แชร์ได้

สิ่งประดิษฐ์ของ Claude เหมาะอย่างยิ่งสำหรับการสร้างผลลัพธ์เชิงโต้ตอบภายในการสนทนา But sharing them with a team can be awkward, especially when the people you want feedback from are not Claude users.

ด้วย Anima มีสองวิธีในการเปลี่ยนสิ่งประดิษฐ์ของ Claude ให้เป็นแอปที่ใช้งานจริง

ตัวเลือกที่ 1: คัดลอกแหล่งที่มาของสิ่งประดิษฐ์ลงใน Playground

เปิดสิ่งประดิษฐ์ของ Claude คัดลอกแหล่งที่มา และวางลงใน Anima Playground

Playground ใช้งานได้เหมือนแอปจริงและให้ลิงก์ปกติที่คุณสามารถแชร์กับทีมของคุณได้

Anyone can open the link in a browser. พวกเขาไม่จำเป็นต้องมีบัญชีของ Claude หรือที่นั่งของ Claude ในการดูเท่านั้น

ตัวเลือกที่ 2: ใช้ Anima MCP ภายใน Claude

หากคุณทำงานภายใน Claude Anima MCP จะทำให้แฮนด์ออฟเร็วขึ้นอีก

แทนที่จะคัดลอกโค้ดด้วยตนเอง คุณสามารถขอให้ Claude แบ่งปันอาร์ติแฟกต์ผ่าน Anima ได้ Claude ส่งข้อมูลไปที่ Playground และส่งลิงก์สดกลับมาในการสนทนาโดยตรง

[เชื่อมต่อ Anima MCP]

จาก Codex: เปลี่ยนเอาต์พุตบนดิสก์ให้เป็นแอปถ่ายทอดสด

Codex can write files to your local environment, but a local file is not the same as a shareable app.

หาก Codex สร้างเพจ HTML, ส่วนประกอบ React หรือแอปขนาดเล็ก คุณไม่จำเป็นต้องสร้าง repo และปรับใช้ไปป์ไลน์เพียงเพื่อแสดงให้ผู้อื่นเห็น

วางโค้ดลงใน Anima Playground และรับลิงก์สด

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

จากเคอร์เซอร์: แบ่งปันสิ่งที่ตัวแทนของคุณสร้างขึ้น

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

ด้วย Playground คุณสามารถคัดลอกโค้ด HTML หรือ React จากเคอร์เซอร์ แล้ววางลงใน Anima แล้วเปลี่ยนให้เป็นแอปที่ใช้งานจริงได้ทันที

จาก ChatGPT: เปลี่ยนโค้ด Canvas ให้เป็นแอปที่ใช้งานได้

ChatGPT สามารถสร้าง HTML, React และ Markdown ที่เป็นประโยชน์ได้ แต่ผลลัพธ์มักจะอยู่ในแชทหรือแคนวาส

หากต้องการแชร์เป็นแบบโต้ตอบ ให้คัดลอกโค้ดลงใน Anima Playground

แอปทำงานในเบราว์เซอร์ รับลิงก์ที่แชร์ได้ และยังคงแก้ไขได้สำหรับเวอร์ชันถัดไป

ซึ่งเปลี่ยนเอาต์พุต ChatGPT จาก “นี่คือโค้ดบางส่วน” เป็น “นี่คือแอป”

เหตุใดการแชร์ที่แก้ไขได้จึงมีความสำคัญ

การแบ่งปันมักไม่ค่อยเป็นจุดสิ้นสุดของเวิร์กโฟลว์

มีคนเปิดลิงค์.. พวกเขาคลิกไปรอบๆ พวกเขาสังเกตเห็นสถานะที่ขาดหายไป ปัญหาการคัดลอก เค้าโครงที่เสียหาย หรือแนวคิดใหม่

ตอนนี้คุณต้องเปลี่ยนมัน

สำหรับหน้าที่โฮสต์แบบคงที่ ซึ่งมักจะหมายถึงการดาวน์โหลดไฟล์ แก้ไขที่อื่น อัปโหลดใหม่ และส่งเวอร์ชันใหม่

ด้วย Anima Playground แอปจะยังคงสามารถแก้ไขได้

คุณสามารถอัปเดตโค้ดได้ และลิงก์ที่แชร์เดียวกันนั้นจะแสดงเป็นเวอร์ชันล่าสุด

นั่นคือความแตกต่างระหว่างสิ่งประดิษฐ์ที่ถูกแช่แข็งและแอปที่มีชีวิต

การรองรับ React คือการทดสอบจริง

เครื่องมือ “แบ่งปันเอาต์พุต AI ของคุณ” จำนวนมากใช้งานได้กับ HTML แบบธรรมดาเท่านั้น

นั่นเป็นเรื่องปกติสำหรับเพจแบบคงที่ แต่พลาดตรงที่การเข้ารหัส AI ดำเนินไป

เอาต์พุตที่สร้างโดยเอเจนต์ที่มีประโยชน์ที่สุดมักจะเป็นแบบโต้ตอบ ประกอบด้วยส่วนประกอบ สถานะ การนำทาง แบบฟอร์ม ตัวกรอง แผนภูมิ แดชบอร์ด และขั้นตอนผลิตภัณฑ์

สิ่งเหล่านี้ไม่ได้เป็นเพียงเพจ HTML แบบคงที่
เป็นประสบการณ์ที่เหมือนกับแอป

และประสบการณ์ที่เหมือนกับแอปจำเป็นต้องมีสภาพแวดล้อมที่สามารถรัน React ได้โดยไม่ต้องบังคับให้คุณตั้งค่าโปรเจ็กต์ทั้งหมด

นั่นคือเหตุผลว่าทำไมการสนับสนุน React จึงมีความสำคัญ

Anima Playground ช่วยให้คุณสามารถเรียกใช้โค้ด React หรือ HTML ที่สร้างโดย AI ได้โดยตรงในเบราว์เซอร์ แชร์ด้วยลิงก์ และแก้ไขต่อไปเมื่อแนวคิดพัฒนาขึ้น

วิธีที่เร็วที่สุดในการแชร์โค้ดจากตัวแทน AI ของคุณ

ไม่ว่าโค้ดจะเริ่มต้นจากตรงไหน ผลลัพธ์ก็จะเหมือนเดิม:

แอปเชิงโต้ตอบที่แท้จริงที่ใครๆ ก็สามารถเปิดได้ในเบราว์เซอร์

ตัวแทนเขียนโค้ด มนุษย์จำเป็นต้องแบ่งปัน ทบทวน และจัดส่งมัน

ตัวแทน AI กำลังกลายเป็นส่วนหนึ่งของงานผลิตภัณฑ์ในชีวิตประจำวัน ช่วยให้นักออกแบบสร้างต้นแบบ PM ทดสอบแนวคิด นักพัฒนาสำรวจเส้นทางการใช้งาน และทีมย้ายจากแนวคิดหนึ่งไปยังอีกอินเทอร์เฟซได้เร็วขึ้น

แต่เพื่อให้เจ้าหน้าที่เข้ากับเวิร์กโฟลว์ของทีมได้จริง ผลลัพธ์ของพวกเขาจะต้องไม่ติดอยู่ในการแชท แคนวาส ไฟล์ในเครื่อง หรือภาพหน้าจอ

มันจะต้องเป็นสิ่งที่ผู้คนสามารถเปิดได้

สิ่งที่พวกเขาคลิกได้

สิ่งที่พวกเขาสามารถแก้ไขได้

บางสิ่งบางอย่างที่พวกเขาสามารถแบ่งปันได้

นั่นคือบทบาทของ Anima Playground: รันไทม์ที่ขาดหายไประหว่างเจ้าหน้าที่ AI และทีมงานมนุษย์

ตัวแทนของคุณเขียนโค้ด
Anima Playground รันเป็นแอปที่ใช้งานจริง
ทีมของคุณจะได้รับลิงก์