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

Q: Can I share a Claude artifact with someone who does not use Claude?

Yes. You can copy the artifact source into Anima Playground, or use the Anima MCP from inside Claude. Anima gives you a normal browser link that anyone can open, with no Claude account or Claude seat required to view.

Q: How do I run AI-generated React code without setting up a project?

Paste the React code into Anima Playground. It runs in the browser with no local setup, no repo, no build step, and no deploy configuration. You also get a shareable link to the running app.

Q: Is the shared app editable?

Yes. The app stays editable in Anima Playground. You can change the code and keep using the same shareable link, instead of exporting or redeploying every time.

Q: Does it only work with HTML?

No. Anima Playground supports HTML, React, and Markdown, so it works for static pages, interactive components, and more app-like agent outputs.

Reading Time: < 1 minute

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

คุณสามารถเห็นมันทำงานได้ รหัสดูดี ตอนนี้เพื่อนร่วมทีมของคุณถามคำถามที่สมเหตุสมผลอย่างยิ่ง:

“ให้ผมไปส่งได้ไหม?”

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

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

วิธีที่ถูกต้องในการแชร์โค้ดที่สร้างโดย AI ขึ้นอยู่กับว่าจะเกิดอะไรขึ้นต่อไป

ประการแรก จริงๆ แล้วคุณกำลังแบ่งปันอะไรอยู่?

เมื่อมีคนถามถึงรหัสที่ตัวแทน AI ของคุณสร้างขึ้น พวกเขาอาจหมายถึงสามสิ่งที่แตกต่างกัน

1. ซอร์สโค้ด

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

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

2. เวอร์ชันที่ใช้งานได้

ผู้จัดการผลิตภัณฑ์ต้องการคลิกผ่านขั้นตอนการเริ่มต้นใช้งาน นักออกแบบต้องการดูเค้าโครงแบบตอบสนอง ผู้มีส่วนได้ส่วนเสียต้องการลองใช้แดชบอร์ด

การส่งไฟล์ต้นฉบับไม่มีประโยชน์อย่างยิ่งที่นี่ พวกเขาต้องการแอปหรือสิ่งประดิษฐ์ที่สามารถเปิดในเบราว์เซอร์ได้

3.งานที่คนอื่นจะทำต่อ

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

นี่คือแฮนด์ออฟประเภทอื่น ปลายทางต้องเก็บมากกว่าสแนปชอต จำเป็นต้องรักษาผลงาน ประวัติความเป็นมา และการเข้าถึงของใครก็ตามที่ดำเนินการต่อ

เวิร์กโฟลว์เหล่านี้ทับซ้อนกัน แต่ไม่สามารถใช้แทนกันได้

ความแตกต่างระหว่างการแชร์โค้ดและการมอบหมายงาน

ลองนึกภาพตัวแทนสร้างแดชบอร์ดการวิเคราะห์ลูกค้า

ประกอบด้วยการ์ด KPI สามใบ แผนภูมิการใช้งาน และตัวกรองวันที่

คุณสามารถส่งไฟล์ React ให้เพื่อนร่วมทีมของคุณได้ พวกเขาจะต้องมีสภาพแวดล้อมการพัฒนาเพื่อดูผลลัพธ์

คุณสามารถส่งภาพหน้าจอ พวกเขาจะเข้าใจเค้าโครงแต่ไม่สามารถทดสอบตัวกรองได้

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

ตอนนี้ลองจินตนาการถึงขั้นตอนการทำงานที่แตกต่างออกไปเล็กน้อย

เอเจนต์สร้างแดชบอร์ดในพื้นที่ทำงานอาร์ติแฟกต์ที่ใช้ร่วมกัน และให้ URL แก่คุณ

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

URL ยังคงเหมือนเดิม ผลงานมีประวัติ. ไม่จำเป็นต้องเริ่มการสนทนาใหม่และอธิบายว่าตัวแทนคนก่อนสร้างอะไรไว้

นั่นคือแฮนด์ออฟที่คุ้มค่าแก่การออกแบบ

วิธีแชร์โค้ดที่สร้างโดย AI กับทีมของคุณ

นี่คือขั้นตอนการทำงานจริงที่ใช้ AgentGrid.ioซึ่งเป็นพื้นที่ทำงานสิ่งประดิษฐ์ที่ใช้ร่วมกันสำหรับผู้คนและตัวแทน AI ที่สร้างโดย Anima

ขั้นตอนที่ 1: สร้างด้วยเครื่องมือเข้ารหัส AI ที่คุณต้องการ

ทำงานต่อใน Claude Code, Codex, Cursor หรือเครื่องมืออื่นที่คุณคุ้นเคย

ตัวอย่างเช่น:

สร้างแดชบอร์ดการวิเคราะห์ผลิตภัณฑ์ที่ตอบสนองด้วยแผนภูมิการใช้งาน ตัวกรองวันที่ และการ์ด KPI สามใบ ใช้ React

คุณไม่จำเป็นต้องเปลี่ยนเครื่องมือที่คุณใช้ในการสร้างโค้ด

ขั้นตอนที่ 2: วางผลลัพธ์ไว้ในที่ที่ทีมของคุณสามารถเข้าถึงได้

เชื่อมต่อตัวแทนของคุณกับ AgentGrid และถาม:

วางแดชบอร์ดนี้บน AgentGrid เป็นแอป ให้ลิงก์สิ่งประดิษฐ์แก่ฉันและเก็บไว้เป็นส่วนตัว

AgentGrid จัดเก็บแอปเป็นสิ่งประดิษฐ์โดยมี URL และประวัติเวอร์ชันของตัวเอง

หากคุณกำลังใช้ตัวแทนการเข้ารหัสที่สามารถเชื่อมต่อได้อย่างอิสระ ให้ปฏิบัติตาม คำแนะนำในการเชื่อมต่อ AgentGrid. ตัวช่วยที่ใช้เบราว์เซอร์ เช่น Claude หรือ ChatGPT ใช้การผสานรวมที่รองรับ

ส่วนสำคัญคือตัวแทนของคุณสร้างส่วนในพื้นที่ทำงานที่มีสิทธิ์ในการเข้าถึง

ขั้นตอนที่ 3: ให้สิทธิ์การเข้าถึงแก่เพื่อนร่วมทีมของคุณ

เปิดอาร์ติแฟกต์และคัดลอกลิงก์

ก่อนที่จะส่ง ตรวจสอบให้แน่ใจว่าเพื่อนร่วมทีมของคุณมีสิทธิ์เข้าถึงพื้นที่ทำงาน URL สิ่งประดิษฐ์ส่วนตัวระบุงาน มันไม่ได้ให้อนุญาตด้วยตัวเอง

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

ดูสิ การแบ่งปันสิ่งประดิษฐ์ทำงานอย่างไร.

ขั้นตอนที่ 4: รวบรวมคำติชมเกี่ยวกับผลลัพธ์ที่เกิดขึ้นจริง

เพื่อนร่วมทีมของคุณเปิดแดชบอร์ดและพบว่าตัวกรองวันที่ไม่ทำงานตามที่คาดไว้

แทนที่จะเขียนข้อความ Slack แยกต่างหากเพื่ออธิบายว่าส่วนประกอบใดเสียหาย พวกเขาสามารถฝากความคิดเห็นไว้กับส่วนที่เกี่ยวข้องของสิ่งประดิษฐ์ได้

AgentGrid รองรับความคิดเห็นเกี่ยวกับองค์ประกอบแอปและข้อความในเอกสาร บุคคลและตัวแทนที่ได้รับอนุญาตสามารถทำงานร่วมกันผ่านความคิดเห็นเหล่านั้นได้

นั่นทำให้การสนทนาใกล้เคียงกับสิ่งที่กำลังตรวจสอบอยู่

ขั้นตอนที่ 5: ให้ตัวแทนทำงานต่อไป

ตอนนี้คุณสามารถบอกตัวแทนที่เชื่อมต่อได้แล้ว:

เปิดส่วน AgentGrid นี้และแก้ไขตัวกรองวันที่ คงเค้าโครงที่มีอยู่และอัปเดตส่วนเดิม

รวม URL ของสิ่งประดิษฐ์จริง

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

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

ดูสิ ประวัติเวอร์ชันใน AgentGrid.

แล้ว Claude, ChatGPT, Cursor และ Codex ล่ะ

เครื่องมือ AI บางอย่างมีความสามารถในการแชร์แบบเนทิฟที่เป็นประโยชน์อยู่แล้ว

Claude สามารถแชร์อาร์ติแฟกต์ที่ได้รับการสนับสนุนภายในระบบนิเวศของตน GitHub เหมาะสำหรับการตรวจสอบโค้ด แพลตฟอร์มการพัฒนาสามารถจัดเตรียมการปรับใช้ตัวอย่างได้

คุณไม่จำเป็นต้องแทนที่เวิร์กโฟลว์เหล่านั้นเพียงเพื่อแชร์บางอย่าง

AgentGrid มีประโยชน์เมื่อขั้นตอนถัดไปเกี่ยวข้อง ผู้คนและตัวแทนที่ทำงานเกี่ยวกับสิ่งประดิษฐ์เดียวกันโดยเฉพาะเครื่องมือ AI ต่างๆ

ตัวอย่างเช่น ทีมของคุณอาจใช้ Claude เพื่อร่างอินเทอร์เฟซ, Codex เพื่อปรับแต่งพฤติกรรม และผู้ตรวจสอบที่เป็นมนุษย์เพื่อแสดงความคิดเห็น

อาร์ติแฟกต์ที่แชร์มีปลายทางทั่วไปสำหรับงานนั้น

เมื่อใดที่คุณควรเผยแพร่แทน

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

AgentGrid สามารถเผยแพร่แอปที่รองรับและอาร์ติแฟกต์ Markdown ไปยัง URL สาธารณะ

แต่การแบ่งปันและการเผยแพร่ไม่ใช่การดำเนินการเดียวกัน

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

เผยแพร่เฉพาะเมื่อนั่นคือสิ่งที่คุณต้องการเท่านั้น

คำถามที่ดีกว่าที่จะถามเมื่อตัวแทนเสร็จสิ้น

แทนที่จะจบทุกเซสชันการเข้ารหัสด้วย “ส่งออกไฟล์” ให้ถาม:

ใครต้องการสิ่งนี้ต่อไป และพวกเขาต้องทำอย่างไรกับมัน?

หากนักพัฒนาจำเป็นต้องรวมโค้ด ให้สร้างคำขอดึง

หากมีใครต้องการทดสอบแอป ให้แสดงตัวอย่างการทำงานให้พวกเขาดู

หากบุคลากรและตัวแทนจำเป็นต้องตรวจสอบและทำงานร่วมกันต่อไป ให้จัดให้มีบ้านที่ใช้ร่วมกัน

ผลลัพธ์ของเซสชันการเข้ารหัส AI ไม่จำเป็นต้องเป็นจุดสิ้นสุดของเวิร์กโฟลว์ อาจเป็นจุดเริ่มต้นสำหรับคนอื่นๆ

👉 สำรวจ AgentGrid

FAQs

Can I share a Claude artifact with someone who does not use Claude?