TIPEP.191:02
ออกแบบเว็บด้วย Artifact
เห็นหน้าตาเว็บก่อน แล้วค่อยส่งให้ Claude Code สร้างจริง
ของแจกฟรีของคลิปนี้ · PDF 4 หน้า
ออกแบบเว็บด้วย Artifact
ชุดพรอมต์ 4 ขั้น: ขอหลายแบบ แก้ด้วยคำพูด เช็กก่อนแชร์ แล้วส่งให้ Claude Code สร้างจริง
ใจความสำคัญ
- 01สั่ง AI สร้างเว็บแล้วแก้หน้าตาทีหลัง = แก้โค้ดจริงไปเรื่อยๆ เสี่ยงพัง ให้ออกแบบใน Artifact ก่อน
- 02Artifact ใช้ได้ทุกแผนรวมแผนฟรี เริ่มจากแท็บ Artifacts → เทมเพลต Design แล้วขอ 3 แบบให้เลือก
- 03เลือกแบบที่ชอบ แล้วสั่งแก้ด้วยคำพูด เช่น สีอบอุ่นขึ้น ปุ่มใหญ่ขึ้น
- 04แชร์ลิงก์ให้คนอื่นดูได้ในแผน Pro ขึ้นไป และคนเปิดต้องมีบัญชี Claude
- 05Export เป็น HTML แล้วส่งให้ Claude Code: สร้างเว็บจริงตามดีไซน์นี้
- 06artifact ไม่ขึ้น: เปิด Code execution และ File creation ในหน้า Settings
ที่มา: support.claude.com (What are artifacts) · support.claude.com (Publishing and sharing artifacts)