Tips Tricks for AI Coder
1.0.0
ยินดีต้อนรับสู่ เคล็ดลับและเคล็ดลับสำหรับผู้เริ่มต้น AI Coder ซึ่งเป็นทรัพยากรที่ครอบคลุมซึ่งออกแบบมาเพื่อช่วยให้ผู้ที่ไม่ได้ใช้เครื่องมือ AI อย่างมีประสิทธิภาพในการพัฒนาเว็บไซต์แอพและโครงการอื่น ๆ คู่มือนี้ขึ้นอยู่กับประสบการณ์ในโลกแห่งความเป็นจริงและคำแนะนำในทางปฏิบัติที่เหมาะสำหรับผู้เริ่มต้นอย่างแน่นอน
คู่มือนี้ยังทำหน้าที่เป็นเครื่องพิสูจน์ถึงการเดินทางของฉันในฐานะนักพัฒนามือใหม่ที่เรียนรู้ที่จะควบคุมพลังของ AI ทุกบทได้รับแรงบันดาลใจจากบทเรียนที่ฉันได้เรียนรู้ในขณะที่นำทางโลกของการพัฒนาที่ขับเคลื่อนด้วย AI เป้าหมายของฉันคือการแบ่งปันข้อมูลเชิงลึกเหล่านี้กับคุณเพื่อให้คุณสามารถหลีกเลี่ยงข้อผิดพลาดทั่วไปและเพิ่มศักยภาพของเครื่องมือเหล่านี้
ให้ฉันแบ่งปันกับคุณหนึ่งในบทเรียนที่ยิ่งใหญ่ที่สุดที่ฉันได้เรียนรู้ตั้งแต่เนิ่นๆ นี่คือ: วิธีที่คุณวลีสิ่งที่คุณขอให้ AI ทำคือทุกสิ่ง ความแตกต่างระหว่างการได้รับสิ่งที่ยอดเยี่ยมและการได้รับสิ่งที่ไร้ประโยชน์มักเกิดขึ้นกับวิธีที่คุณถาม ฟังดูง่าย แต่เคล็ดลับนี้เพียงอย่างเดียวสามารถช่วยคุณได้อย่างหงุดหงิด
ดังนั้นเรามาพูดถึงวิธีถาม "ผู้ช่วยโค้ด" AI ของคุณเพื่อขอความช่วยเหลือในวิธีที่ได้รับผลลัพธ์จริง ๆ - เพราะเชื่อใจฉันวิธีที่คุณพูดคุยกับ AI สร้างความแตกต่างทั้งหมด
นี่คือข้อตกลง: เครื่องมือ AI นั้นฉลาด แต่ไม่ใช่ผู้อ่าน พวกเขายอดเยี่ยมในทิศทางต่อไปนี้ แต่พวกเขาต้องการทิศทางเหล่านั้นให้ชัดเจนและเฉพาะเจาะจง หากคุณคลุมเครือหรือออกจากห้องพักเพื่อคาดเดาสิ่งต่าง ๆ สามารถไปด้านข้างได้อย่างรวดเร็ว
ลองคิดดูด้วยวิธีนี้: ลองนึกภาพว่าคุณกำลังจ้างผู้รับเหมาเพื่อสร้างบ้านให้คุณ ถ้าคุณพูดว่า“ สร้างสิ่งที่ดีให้ฉัน” คุณอาจจบลงด้วยบ้านต้นไม้เมื่อสิ่งที่คุณต้องการจริงๆคือฟาร์มสามห้องนอนที่มีสระว่ายน้ำ แต่ถ้าคุณส่งพิมพ์เขียวและพูดว่า“ ฉันต้องการบ้านที่แน่นอนนี้ด้วยคุณสมบัติที่แน่นอนเหล่านี้” พวกเขาจะรู้ว่าต้องทำอะไร
AI ทำงานในลักษณะเดียวกัน หากคำแนะนำของคุณมีความเฉพาะเจาะจงเอาต์พุตจะดีขึ้น แทนที่จะพูดว่า“ แก้ไขรหัสนี้” ลองทำเช่น“ แก้ไขปัญหาด้วยปุ่มส่งไม่ทำงานเมื่อผู้ใช้คลิก” แทนที่จะเป็น“ Make My App Pretty” พูดว่า“ ปรับปรุง UI ของแอพให้ทันสมัยด้วยแบบอักษรที่เก๋ไก๋และเป็นมืออาชีพและไอคอนคุณภาพสูง” เห็นความแตกต่าง? ตอนนี้ AI รู้ว่าคุณต้องการอะไรและมีเส้นทางที่ชัดเจนในการติดตาม
เคล็ดลับอย่างหนึ่งที่ฉันได้เรียนรู้คือการเริ่มต้นด้วยวลีเฉพาะงานที่เหมาะสม-คิดว่ามันเป็นซอสลับที่ทำให้ AI เข้าสู่โหมดที่เหมาะสม นี่คือตัวอย่างของวลีที่คุณสามารถใช้สำหรับสถานการณ์ที่แตกต่างกัน อย่าลังเลที่จะคัดลอกปรับแต่งและใช้สิ่งเหล่านี้มากเท่าที่คุณต้องการ
เมื่อมีบางอย่างเสีย:
สิ่งนี้บอกให้ AI มุ่งเน้นไปที่การแก้ไขปัญหาเฉพาะหนึ่งข้อ แทนที่จะพยายามที่จะทำซ้ำรหัสทั้งหมดของคุณมันจะอยู่ในการแก้ปัญหานั้น
เคล็ดลับสำหรับมืออาชีพ: หากคุณรู้ว่าสิ่งที่ทำลายสิ่งต่าง ๆ (เช่นบรรทัดหนึ่งของรหัส) ให้รวมรายละเอียดนั้น และถ้าคุณไม่แน่ใจ? ไม่ต้องกังวล - มุ่งเน้นไปที่การอธิบายอาการของปัญหาอย่างชัดเจนที่สุด
เมื่อเพิ่มคุณสมบัติใหม่:
วลีนี้คุ้มค่ากับน้ำหนักในทองคำเพราะมันบอกสิ่งสำคัญสองอย่างของ AI: (1) สิ่งที่คุณต้องการเพิ่มและ (2) สิ่งที่ไม่ต้องสัมผัส เชื่อใจฉันคุณไม่ต้องการให้ AI ทำลายบางสิ่งบางอย่างโดยไม่ตั้งใจในขณะที่มันเพิ่มคุณสมบัติใหม่ที่เป็นประกายของคุณ นั่นเป็นเหตุผลว่าทำไมส่วน“ โดยไม่ลบคุณสมบัติอื่น ๆ ” จึงมีความสำคัญมาก - มันทำให้ทุกอย่างเหมือนเดิม
เมื่อคุณต้องการแก้ไขข้อผิดพลาดของเบราว์เซอร์:
โอเคนี่อาจเป็นเคล็ดลับมืออาชีพที่เป็นมิตรที่สุดเท่าที่เคยมีมา หากคุณกำลังสร้างเว็บแอปและสิ่งต่าง ๆ ไม่ทำงานคอนโซลเบราว์เซอร์ของคุณก็เหมือนนักสืบที่คิดฉากอาชญากรรมให้คุณแล้ว หากต้องการค้นหาให้คลิกขวาที่หน้าเว็บของคุณคลิก“ ตรวจสอบ” และไปที่แท็บ“ คอนโซล” คุณจะเห็นข้อความแสดงข้อผิดพลาดที่นั่น - เพียงแค่คัดลอกสิ่งเหล่านั้นและวางลงในเครื่องมือ AI ของคุณ
ทำไมมันถึงทำงานได้ดี? เนื่องจากข้อความแสดงข้อผิดพลาดเหล่านั้นมักจะมีข้อมูลที่แน่นอนที่ AI จำเป็นต้องคิดออกว่าเกิดอะไรขึ้น มันเหมือนกับการให้แผนงานสำหรับการแก้ไขแอพของคุณ อย่างจริงจังเคล็ดลับนี้เป็นเครื่องช่วยชีวิต
เมื่อคุณต้องการปรับปรุงรูปลักษณ์ของแอปของคุณ:
มาเป็นจริง - การออกแบบเป็นเรื่องส่วนตัว สิ่งที่ดูดีสำหรับคน ๆ หนึ่งอาจไม่ใช่ถ้วยชาของคนอื่น นั่นเป็นเหตุผลว่าทำไมจึงเป็นเรื่องสำคัญอย่างยิ่งที่จะต้องชี้นำ AI ของคุณด้วยคำเช่น "ทันสมัย" "มืออาชีพ" และ "คุณภาพสูง" คำคุณศัพท์ประเภทนี้ช่วยให้ AI เข้าใจบรรยากาศโดยรวมที่คุณต้องการ
เคล็ดลับสำหรับมืออาชีพ: หากคุณมีแอพหรือเว็บไซต์เฉพาะที่คุณชอบรูปลักษณ์พูดถึงมัน! ตัวอย่างเช่น:“ ทำให้ดูเหมือนการออกแบบ Spotify” AI จะพยายามเลียนแบบสไตล์นั้นและนำไปใช้กับโครงการของคุณ
เมื่อลบคุณสมบัติ:
การลบคุณสมบัติอาจเป็นเรื่องยุ่งยากเพราะคุณไม่ต้องการนำสิ่งที่สำคัญออกมาโดยไม่ตั้งใจ วลีนี้ช่วยให้ AI รู้ว่าจะลบคุณลักษณะอย่างหมดจด แต่ปล่อยให้ทุกอย่างทำงานอย่างที่ควรจะเป็น
เมื่อคุณลบบางสิ่งบางอย่างโดยไม่ได้ตั้งใจ:
เป็นสิ่งสำคัญที่จะต้องแจ้งให้ AI ทราบว่าคุณสูญเสียไฟล์อะไรและให้บริบทบางอย่าง (เช่น“ ไฟล์นี้จัดการสไตล์ทั้งหมดสำหรับหน้าแรกของฉัน”) ในขณะที่ AI อาจไม่คืนค่าไฟล์อย่างสมบูรณ์ แต่มักจะให้เพียงพอที่จะทำให้สิ่งต่าง ๆ กลับมาติดตาม
หากมีสิ่งหนึ่งที่คุณนำออกไปจากบทนี้ให้เป็นเช่นนี้: ความจำเพาะคือทุกสิ่ง รายละเอียดและความชัดเจนที่คุณให้ในพรอมต์ของคุณมากเท่าไหร่ AI ก็จะดีขึ้นเท่านั้น นี่คือสิ่งที่ฉันได้เรียนรู้:
ขั้นตอนนี้อาจรู้สึกไม่ดีในตอนแรก แต่ฉันสัญญาว่ายิ่งคุณฝึกฝนมากเท่าไหร่คุณก็ยิ่งดีขึ้นเท่านั้น
การทำงานกับ AI เพื่อสร้างแอพและเว็บไซต์ไม่ได้ล่องเรือที่ราบรื่นเสมอไป จะมีช่วงเวลาที่คุณรู้สึกว่าคุณกำลังม้วนเพียงแค่ตีกำแพงที่ดูเหมือนจะไม่มีอะไรทำงาน คุณได้รับคำแนะนำที่ชัดเจนของ AI (หรืออย่างนั้นคุณคิดว่า) คุณได้รับการร้องขอของคุณอีกครั้งและยัง ... โครงการของคุณไม่ได้ก้าวไปข้างหน้า
บทนี้เป็นเรื่องเกี่ยวกับการแก้ไขปัญหาสถานการณ์ที่น่าผิดหวังเหล่านั้นและทำให้ตัวเองไม่ติด
บางครั้ง AI เพียงแค่…ลืมตัวเอง หากคุณพบว่าตัวเองทำซ้ำคำสั่งซ้ำแล้วซ้ำอีกและไม่มีอะไรเปลี่ยนแปลงปัญหาอาจไม่ได้อยู่กับคำแนะนำของคุณ - อาจเป็น ประวัติการแชท
โมเดลภาษา AI ทำงานโดยการติดตามคำแนะนำและคำตอบก่อนหน้านี้ในการสนทนาปัจจุบัน เมื่อเวลาผ่านไปประวัติศาสตร์นี้อาจ ยุ่งเหยิงกับบริบทที่ขัดแย้งกัน ตัวอย่างเช่น:
การแก้ไข: เริ่มการสนทนาใหม่กับ AI
หากการเริ่มต้นใหม่ไม่ได้แก้ปัญหามีโอกาสที่ปัญหาจะอยู่ในรหัสของตัวเอง รหัสที่ขัดแย้งกันเกิดขึ้น เมื่อรหัสสองชิ้นบอกให้แอปของคุณทำสิ่งตรงกันข้าม มักจะเกิดขึ้นเมื่อ:
ตัวอย่างเช่น:
การแก้ไข: ขอให้ AI ระบุและแก้ไขความขัดแย้ง การใช้คุณสมบัติการแชทของผู้ช่วย AI ของคุณคุณสามารถให้พร้อมใช้งานได้เช่น “ ตรวจสอบรหัสของฉันและระบุส่วนใด ๆ ที่อาจขัดแย้งกัน” จากนั้นวางส่วนที่เกี่ยวข้องลงในการแชท
การแก้ไขอื่น: ดีบักด้วยตนเอง หาก AI ไม่ได้จับปัญหา (หรือคุณต้องการการควบคุมมากขึ้น) ให้เริ่มทดสอบชิ้นส่วนของแอปทีละชิ้น ปิดการใช้งานหรือแสดงความคิดเห็นบางส่วนของรหัสและดูว่าแอปทำงานอย่างไรเมื่อส่วนเหล่านั้นไม่ทำงาน กระบวนการนี้สามารถช่วยคุณค้นหาบรรทัดเฉพาะที่ก่อให้เกิดความขัดแย้ง
นี่คือตัวเปลี่ยนเกม: AI ไม่จำเป็นต้องเขียนโค้ดให้คุณเสมอไป นอกจากนี้คุณยังสามารถใช้เป็นพันธมิตรการดีบักที่เชื่อถือได้เพื่อตอบคำถามของคุณและแนะนำคุณเกี่ยวกับปัญหาโดยไม่ต้องเปลี่ยนโครงการของคุณ วิธีการนี้ช่วยให้คุณควบคุมได้มากขึ้นและสามารถช่วยให้คุณเข้าใจได้ดีขึ้นว่าทุกอย่างเชื่อมต่อกันอย่างไร
ตัวอย่างเช่นคุณสามารถถาม:
การกลับไปกลับมานี้ไม่ได้เกี่ยวกับการควบคุม AI-มันเกี่ยวกับการใช้มันเป็นโค้ชการเข้ารหัส ด้วยการปฏิบัติต่อ AI ในฐานะครูมากกว่าผู้บริหารงานคุณสามารถปลดล็อกข้อมูลเชิงลึกที่ช่วยให้คุณแก้ไขปัญหาได้เร็วขึ้นและดีขึ้น
หากรุ่น AI หนึ่งไม่ได้ให้คำตอบที่คุณสามารถทำงานด้วยลองผสมสิ่งต่างๆ รุ่นที่แตกต่างกันมีจุดแข็งที่แตกต่างกัน:
นี่คือวิธีการทำ:
แม้ว่าคุณจะทำงานโดยเฉพาะกับเครื่องมือหนึ่งการเปลี่ยนไปใช้สิ่งอื่นสามารถให้มุมมองใหม่ที่มีค่า (และโซลูชั่น)
Changelogs เป็นผู้ช่วยชีวิต พวกเขาให้คุณ:
เครื่องมือและ IDEs มากมายช่วยให้คุณเปิดใช้งานการเปลี่ยนแปลงหรือประวัติเวอร์ชัน ถ้าไม่คุณสามารถใช้ Git สำหรับการควบคุมเวอร์ชันเพื่อให้ได้เอฟเฟกต์เดียวกัน
บางครั้งปัญหาไม่ใช่คุณหรือ AI - เป็นภาษาที่คุณเลือก หากแอปของคุณทำงานได้ไม่ดีหรือรู้สึกซับซ้อนเกินไปให้ถาม AI: “ [ภาษาปัจจุบัน] เป็นตัวเลือกที่ดีที่สุดสำหรับโครงการนี้หรือไม่”
การเปลี่ยนแปลงครั้งนี้อาจเป็นตัวเปลี่ยนเกม
บทนี้มุ่งเน้นไปที่การใช้ประโยชน์จากภาพหน้าจอในรูปแบบที่สร้างสรรค์และมีประสิทธิภาพพร้อมกับกลยุทธ์ในการติดตาม AI และจดจำการเปลี่ยนแปลงเพื่อให้เวิร์กโฟลว์ของคุณยังคงมีประสิทธิภาพและปราศจากความหงุดหงิด
ภาพหน้าจอมักจะพูดมากกว่าคำพูดโดยเฉพาะอย่างยิ่งเมื่อบางสิ่งใน UI ของคุณไม่ดูหรือประพฤติตามที่คาดไว้ อย่างไรก็ตามหากไม่มีบริบทที่เหมาะสม AI อาจตีความภาพหน้าจอที่ผิดและสมมติว่ามันหมายถึงวิธีการแก้ปัญหาที่คุณต้องการมากกว่าปัญหาที่คุณกำลังเน้น ในการแก้ไขปัญหานี้สิ่งสำคัญคือการ จับคู่ภาพหน้าจอของคุณด้วยพรอมต์ที่แม่นยำซึ่งเป็นแนวทางในการมุ่งเน้นของ AI
ให้คำอธิบายที่ชัดเจนควบคู่ไปกับภาพหน้าจอ:
ภาพหน้าจอที่ไม่มีบริบทสามารถนำไปสู่ความเข้าใจผิด ตัวอย่างเช่นหากคุณกำลังเน้นข้อผิดพลาดภาพให้รวมคำอธิบายเช่น:
เน้นพื้นที่สำคัญในภาพหน้าจอ:
ใช้เครื่องมือแก้ไขภาพพื้นฐานเพื่อวงกลมขีดเส้นใต้หรือใส่คำอธิบายประกอบส่วนของภาพหน้าจอที่เกี่ยวข้องกับปัญหา สิ่งนี้จะช่วยให้ AI รู้ว่าจะโฟกัสที่ไหน
ชี้แจงว่าภาพหน้าจอแสดงถึงปัญหา:
เพื่อให้แน่ใจว่า AI จะไม่ตีความภาพผิดว่าเป็นเอาต์พุตที่คุณต้องการให้ใช้พรอมต์นี้:
เหตุใดจึงใช้งานได้: การใช้ถ้อยคำนี้บอกให้ AI ปฏิบัติต่อภาพหน้าจออย่างชัดเจนเป็นหลักฐานของปัญหาทำให้มั่นใจได้ว่ามันจะวิเคราะห์ปัญหาแทนที่จะสมมติว่าผลลัพธ์
ปัญหาทั่วไปอีกประการหนึ่งคือเมื่อ AI สร้างการเปลี่ยนแปลงรหัสที่ไม่ปรากฏในแอพหรือ UI ของเว็บไซต์ สิ่งนี้สามารถเกิดขึ้นได้ด้วยเหตุผลหลายประการ - ปัญหาการใช้งานการเปลี่ยนแปลงที่ไม่ได้บันทึกหรือแม้แต่ข้อบกพร่องที่ซ่อนอยู่ในโครงสร้างโครงการของคุณ ภาพหน้าจอมีประโยชน์อย่างยิ่งที่นี่เพราะพวกเขาสามารถจับภาพรัฐ“ ก่อน” และ“ หลังจาก” ช่วยให้ AI ระบุสิ่งที่ผิดพลาด
ถ่ายภาพหน้าจอสองภาพ:
รวมภาพหน้าจอทั้งสองในพรอมต์ของคุณพร้อมคำอธิบายเช่น:
ใช้พรอมต์เป้าหมายเพื่อลึกลงไป:
ทำไมงานนี้: การรวมภาพหน้าจอกับพรอมต์ให้ AI ทั้งบริบทภาพและการเขียนทำให้ง่ายขึ้นสำหรับการระบุปัญหาพื้นฐาน
ภาพหน้าจอไม่ได้มีไว้สำหรับการระบุปัญหา UI เท่านั้น นี่คือวิธีเพิ่มเติมบางอย่างที่คุณสามารถใช้ภาพหน้าจอเพื่อปรับปรุงการสื่อสารกับผู้ช่วย AI ของคุณ:
แสดงข้อความแสดงข้อผิดพลาดหรือบันทึก:
หากเบราว์เซอร์คอนโซลหรือบันทึกแอปพลิเคชันของคุณแสดงข้อผิดพลาดให้ใช้ภาพหน้าจอของมันและรวมถึงพรอมต์เช่น:
จับพฤติกรรมที่ไม่คาดคิดในสภาพแวดล้อมที่มีชีวิต:
เมื่อทำการดีบักโครงการที่นำไปใช้ให้ถ่ายภาพหน้าจอของพฤติกรรมที่ไม่คาดคิดและอธิบายสิ่งที่ควรเกิดขึ้นแทน:
เน้นองค์ประกอบที่ขาดหายไปใน UI:
หากสิ่งที่ขาดหายไปจาก UI ของคุณ (เช่นภาพปุ่มหรือข้อความ) ให้ใช้ภาพหน้าจอเพื่อแสดงการขาดงาน:
เปรียบเทียบการออกแบบ:
ใช้ภาพหน้าจอของการออกแบบจากแอพหรือโครงการที่คล้ายกันเป็นแรงบันดาลใจและขอให้ AI ทำซ้ำองค์ประกอบจากการออกแบบเหล่านั้น:
ความท้าทายที่เกิดขึ้นบ่อยครั้งกับการพัฒนา AI ที่ช่วยได้คือเมื่อ AI ลืมการแก้ไขก่อนหน้าหรือสูญเสียการเปลี่ยนแปลงที่เกิดขึ้น ในการต่อสู้กับสิ่งนี้คุณสามารถขอให้ AI สร้าง ระบบติดตามการเปลี่ยนแปลงที่กำหนดเอง ภายในโครงการของคุณ ระบบนี้จะจัดทำเอกสารการเปลี่ยนแปลงที่เกิดขึ้นทำหน้าที่เป็น "หน่วยความจำ" เพื่ออ้างอิงเมื่อใดก็ตามที่มีบางอย่างผิดปกติ
ซึ่งอาจรวมถึง:
ไฟล์บันทึกส่วนกลาง:
AI สามารถสร้างไฟล์ (เช่น changelog.txt ) ซึ่งจะผนวกคำอธิบายของการเปลี่ยนแปลงแต่ละครั้งโดยอัตโนมัติ:
Timestamp: 2025-01-06 11:30PM
File Edited: main.js
Description: Fixed the submit button functionality to redirect to the confirmation page.
ความคิดเห็นของรหัสแบบอินไลน์:
ขอให้ AI หมายถึงการเปลี่ยนแปลงโดยตรงในรหัส:
// Added event listener to fix the submit button issue (2025-01-06)
submitButton.addEventListener('click', handleSubmit);
หมายเลขเวอร์ชันหรือแท็ก:
มีหมายเลขเวอร์ชัน AI EMBED หรือแท็กภายในรหัสเพื่อให้คุณสามารถเปลี่ยนกลับเป็นจุดเฉพาะได้หากจำเป็น:
https://github.com/techcow2/cursor-agent-tracking
เมื่อทำงานในโครงการคุณจะต้องพบกับปัญหา - ไม่ว่าจะเป็นข้อผิดพลาดพฤติกรรมที่ไม่คาดคิดหรือข้อผิดพลาดถาวร ช่วงเวลาเหล่านี้อาจทำให้หงุดหงิด แต่มีวิธีที่ง่ายและมีประสิทธิภาพในการชี้นำ AI เพื่อจัดการกับความท้าทายเหล่านี้อย่างระมัดระวังในขณะที่หลีกเลี่ยงข้อผิดพลาดที่รู้จัก ส่วนนี้จะแสดงให้คุณเห็นถึงวิธีการสร้างพรอมต์ที่รอบคอบซึ่งช่วยให้ AI แก้ไขปัญหาได้อย่างมีประสิทธิภาพโดยไม่ต้องแนะนำสิ่งใหม่ ๆ
บางครั้งเมื่อพยายามแก้ไขปัญหาหรือเพิ่มคุณสมบัติใหม่คุณอาจพบว่า AI ทำซ้ำผิดพลาดซ้ำ ๆ หรือแนะนำปัญหาใหม่โดยไม่ตั้งใจ สิ่งนี้สามารถเกิดขึ้นได้เนื่องจาก AI ไม่ได้ตระหนักถึงข้อผิดพลาดในอดีตหรือไม่ได้รับบริบทเพียงพอที่จะหลีกเลี่ยง หากไม่มีคำแนะนำที่ชัดเจนอาจมองข้ามรายละเอียดที่สำคัญหรือสร้างผลข้างเคียงที่ไม่ได้ตั้งใจ
เพื่อป้องกันปัญหาเหล่านี้คุณสามารถสร้างพรอมต์ที่รวมคำอธิบายงานของคุณเข้ากับคำแนะนำที่ชัดเจนเกี่ยวกับสิ่งที่ควรหลีกเลี่ยง สิ่งนี้ทำให้มั่นใจได้ว่า AI เข้าหางานด้วยความระมัดระวังและมุ่งเน้นไปที่การแก้ปัญหาโดยไม่ทำให้เกิดภาวะแทรกซ้อนเพิ่มเติม
เปลี่ยนกลับสู่สถานะที่มั่นคง (ถ้าจำเป็น):
ระบุและจัดทำเอกสารปัญหา:
สร้างพรอมต์ของคุณ:
Implement [task/feature] carefully while avoiding [specific problem/error]. Ensure all existing functionality remains intact.
ให้บริบท (ถ้ามี):
The error might be caused by how the product list is being rendered. Please ensure any changes to this part of the code do not introduce new bugs.
ตรวจสอบและทดสอบผลลัพธ์:
เมื่อสร้างหรือปรับปรุงเว็บไซต์หรือแอปพลิเคชันบนเว็บประสิทธิภาพและประสิทธิภาพเป็นปัจจัยสำคัญสองประการ วิธีหนึ่งที่มีประสิทธิภาพในการบรรลุเป้าหมายเหล่านี้คือการใช้ ไลบรารีเครือข่ายการส่งเนื้อหา (CDN) บทนี้จะแนะนำคุณเกี่ยวกับสิ่งที่ห้องสมุด CDN เป็นประโยชน์ต่อโครงการของคุณอย่างไรและแนะนำห้องสมุดที่ได้รับความนิยมมากที่สุดเช่น Tailwind CSS, bootstrap, วัสดุ UI และอื่น ๆ นอกจากนี้ยังจะให้ตัวอย่างที่เป็นประโยชน์เกี่ยวกับวิธีการแจ้งให้ผู้ช่วย AI ของคุณรวมและใช้ไลบรารีเหล่านี้ - โดยเฉพาะอย่างยิ่งหากคุณยังใหม่กับการเข้ารหัสและพึ่งพา AI เพื่อลดความซับซ้อนของงานการพัฒนา
เครือข่ายการส่งเนื้อหา (CDN) เป็นเครือข่ายเซิร์ฟเวอร์ที่กระจายทางภูมิศาสตร์ที่ให้เนื้อหาเว็บ - เช่นไลบรารี JavaScript, CSS Frameworks หรือแบบอักษร - ไปยังผู้ใช้ตามตำแหน่งของพวกเขา ไลบรารี CDN หมายถึงเฟรมเวิร์กหรือเครื่องมือยอดนิยมเวอร์ชัน (เช่น bootstrap หรือ jQuery) ที่โฮสต์บนเครือข่ายเหล่านี้ แทนที่จะดาวน์โหลดไฟล์ไปยังเซิร์ฟเวอร์หรือเครื่องพัฒนาของคุณเองคุณอ้างอิงโดยตรงจาก CDN
เวลาโหลดเร็วขึ้น
CDNs ให้บริการไฟล์จากเซิร์ฟเวอร์ที่อยู่ใกล้กับผู้ใช้ของคุณมากที่สุดลดเวลาที่ใช้ในการโหลดไซต์ของคุณ
แบนด์วิดท์ลดลงสำหรับเซิร์ฟเวอร์ของคุณ
การปิดไลบรารีโฮสติ้งไปยัง CDN หมายความว่าเซิร์ฟเวอร์ของคุณเองไม่จำเป็นต้องจัดการการดาวน์โหลดไฟล์เหล่านั้น
ความสะดวกในการดำเนินการ
คุณสามารถเพิ่มไลบรารีที่ทรงพลังได้อย่างรวดเร็ว - มักจะมีรหัสเพียงหนึ่งหรือสองบรรทัด
การอัปเดตอัตโนมัติ
โดยทั่วไปแล้ว CDN จะโฮสต์ไลบรารีเวอร์ชันล่าสุดดังนั้นคุณสามารถติดตามข้อมูลล่าสุดได้อย่างง่ายดาย
ข้อได้เปรียบในการแคช
หากผู้ใช้ได้โหลดไลบรารีหรือเฟรมเวิร์กเดียวกันจาก CDN บนไซต์อื่นแล้วเบราว์เซอร์ของพวกเขาอาจใช้เวอร์ชันแคชเร่งความเร็วในการโหลดเพิ่มเติม
หากคุณใหม่แบรนด์ใหม่ในการเข้ารหัสและพึ่งพา AI สำหรับการตั้งค่าโครงการของคุณนี่คือตัวอย่างที่รวดเร็วที่คุณสามารถใช้เพื่อให้การรวมไลบรารี AI จัดการ:
การรวมกรอบ CSS
ตัวอย่างพรอมต์:
“ ใช้ bootstrap cdn ในไฟล์ HTML ที่มีอยู่ของฉัน ตรวจสอบให้แน่ใจว่า Navbar ยุบบนมือถือ วางส่วนท้ายที่ด้านล่างด้วยประกาศลิขสิทธิ์อย่างง่าย”
การย้ายจากกรอบหนึ่งไปยังอีกกรอบหนึ่ง
ตัวอย่างพรอมต์:
“ แทนที่ Tailwind CSS ด้วย bootstrap ผ่าน CDN ในโครงการของฉัน แปลงคลาส tailwind ที่มีอยู่อย่างระมัดระวังเป็น bootstrap เทียบเท่าเพื่อให้การออกแบบโดยรวมเหมือนกัน”
การเพิ่มยูทิลิตี้ JavaScript
ตัวอย่างพรอมต์:
“ รวม Lodash จาก CDN ใน index.html ของฉัน จากนั้นในไฟล์ Main.js ของฉันแสดงให้เห็นถึงวิธีการใช้ฟังก์ชั่น debounce ของ Lodash สำหรับการป้อนข้อความ”
พรอมต์เหล่านี้ให้ความชัดเจนของ AI เกี่ยวกับห้องสมุดที่จะใช้วิธีการใช้งาน (ผ่าน CDN) และงานหรือคุณสมบัติเฉพาะที่คุณต้องการนำไปใช้
ด้านล่างคุณจะพบห้องสมุดยอดนิยมที่คุณสามารถเพิ่มลงในโครงการของคุณผ่าน CDN ได้อย่างง่ายดาย แต่ละรายการมีคำอธิบายบันทึกการใช้งานตัวอย่างตัวอย่างและตัวอย่างที่รวดเร็วสำหรับ AI ของคุณ
คำอธิบาย:
เฟรมเวิร์ก CSS แบบยูทิลิตี้แรกที่ช่วยให้คุณสร้างการออกแบบที่กำหนดเองได้อย่างรวดเร็วโดยใช้คลาสที่กำหนดไว้ล่วงหน้าใน HTML ของคุณ
ดีที่สุดสำหรับ:
นักพัฒนาที่ต้องการควบคุมการออกแบบโดยไม่ต้องเขียน CS ที่กำหนดเองจำนวนมาก
การใช้งานตัวอย่าง:
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css"
rel="stylesheet"
>
AI PROMPT ตัวอย่าง:
“ เพิ่ม Tailwind CSS ลงในโครงการของฉันผ่าน CDN สร้างหน้าแรกด้วยส่วนหัวส่วนฮีโร่ที่เรียบง่ายและส่วนท้าย ใช้คลาส Tailwind เพื่อให้แน่ใจว่าการออกแบบที่สะอาดและทันสมัย”
คำอธิบาย:
หนึ่งในเฟรมเวิร์ก CSS ที่ใช้กันอย่างแพร่หลายที่สุดสำหรับการสร้างเว็บไซต์ที่ตอบสนองต่อมือถือเป็นครั้งแรก มันมาพร้อมกับส่วนประกอบที่ออกแบบไว้ล่วงหน้าเช่น navbars, รูปแบบ, โมดอลและอื่น ๆ
ดีที่สุดสำหรับ:
ผู้เริ่มต้นที่ต้องการการออกแบบที่รวดเร็วและสม่ำเสมอพร้อมการตั้งค่าน้อยที่สุด
การใช้งานตัวอย่าง:
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
></script>
AI PROMPT ตัวอย่าง:
“ เพิ่มลิงก์ Bootstrap CDN ล่าสุดในเว็บไซต์ของฉัน สร้าง Navbar ที่ตอบสนองด้วยการเลื่อนลงสำหรับ 'บริการ' และแถบค้นหาทางด้านขวา ตรวจสอบให้แน่ใจว่าดูดีบนอุปกรณ์มือถือ”
คำอธิบาย:
ไลบรารีที่ใช้ React ซึ่งใช้ระบบการออกแบบวัสดุของ Google ซึ่งนำเสนอส่วนประกอบที่พร้อมใช้งานเช่นปุ่มการ์ดและกล่องโต้ตอบ
ดีที่สุดสำหรับ:
โครงการตอบสนองที่ต้องการความงามที่ทันสมัยทันสมัยและเป็นมืออาชีพ
การใช้งานตัวอย่าง:
<link
href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet"
>
npm install @mui/material @emotion/react @emotion/styled
(ในขณะที่วัสดุ UI แนะนำ NPM เป็นหลักคุณยังสามารถอ้างอิงแบบอักษรไอคอนของพวกเขาผ่าน CDN)
AI PROMPT ตัวอย่าง:
“ รวมไอคอนวัสดุจาก CDN และใช้ในแอพ React ของฉัน สร้างส่วนประกอบการ์ดอย่างง่ายสำหรับการแสดงผลิตภัณฑ์ด้วยปุ่ม 'เพิ่มลงในรถเข็น' สไตล์วัสดุ”
คำอธิบาย:
ไอคอนไอคอนที่ครอบคลุมซึ่งนำเสนอไอคอนเวกเตอร์ที่ปรับขนาดได้ซึ่งสามารถจัดสไตล์ได้อย่างง่ายดายด้วย CSS
ดีที่สุดสำหรับ:
เพิ่มไอคอนโซเชียลมีเดียไอคอน NAV หรือการยึดถืออื่น ๆ อย่างรวดเร็วโดยไม่ต้องสร้าง SVG ที่กำหนดเอง
การใช้งานตัวอย่าง:
<link
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
rel="stylesheet"
>
AI PROMPT ตัวอย่าง:
“ เพิ่มแบบอักษรที่ยอดเยี่ยมให้กับ HTML ของฉันผ่าน CDN แทนที่ไอคอนตัวยึดทั้งหมดใน Navbar ของฉันด้วยไอคอน Font Awesome สำหรับ 'Home,' 'โปรไฟล์' และ 'รถเข็น' ตรวจสอบให้แน่ใจว่าได้ปรับขนาดอย่างถูกต้องบนมือถือ”
คำอธิบาย:
ไลบรารี JavaScript คลาสสิกที่รู้จักกันดีในการทำให้การจัดการ DOM ง่ายขึ้นการจัดการเหตุการณ์และการดำเนินงาน AJAX
ดีที่สุดสำหรับ:
โครงการมรดกหรือผู้เริ่มต้นที่ต้องการมีปฏิสัมพันธ์กับ UI ที่ซับซ้อนโดยไม่ต้องเขียน JavaScript วานิลลาอย่างกว้างขวาง
การใช้งานตัวอย่าง:
<script
src="https://code.jquery.com/jquery-3.6.4.min.js"
></script>
AI PROMPT ตัวอย่าง:
“ เพิ่ม jQuery ผ่าน cdn ไปยัง index.html ของฉัน แสดงวิธีซ่อน DIV เมื่อผู้ใช้คลิกปุ่มและบันทึกข้อความความสำเร็จไปยังคอนโซล”
คำอธิบาย:
ไลบรารียูทิลิตี้ JavaScript ที่ให้ฟังก์ชั่นที่หลากหลายสำหรับการจัดการข้อมูลรวมถึงการโคลนนิ่งลึกการ debouncing และอื่น ๆ
ดีที่สุดสำหรับ:
ทำให้การดำเนินการที่ซับซ้อนง่ายขึ้นในอาร์เรย์วัตถุและสตริง
การใช้งานตัวอย่าง:
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/lodash.min.js"
></script>
AI PROMPT ตัวอย่าง:
“ เพิ่ม Lodash จาก CDN แปลงวิธีการที่มีอยู่ของฉันเป็นวิธี LODASH และสาธิตวิธีการ debounce ฟิลด์การค้นหา”
คำอธิบาย:
ห้องสมุด CSS ที่เสนอภาพเคลื่อนไหวที่ทำไว้ล่วงหน้า (จางหายการตีกลับสไลด์ ฯลฯ ) ที่คุณสามารถนำไปใช้กับองค์ประกอบโดยการเพิ่มคลาสเฉพาะ
ดีที่สุดสำหรับ:
เพิ่มภาพเคลื่อนไหวลงในองค์ประกอบอย่างรวดเร็วโดยไม่ต้องเขียนภาพเคลื่อนไหว CSS ที่กำหนดเอง
การใช้งานตัวอย่าง:
<link
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
rel="stylesheet"
>
AI PROMPT ตัวอย่าง:
“ รวม animate.css ผ่าน CDN และใช้แอนิเมชั่นจางหายไปกับส่วนฮีโร่ของฉันในการโหลดหน้าเว็บ ใช้เอฟเฟกต์ตีกลับกับปุ่ม 'ลงทะเบียนตอนนี้' ด้วย”
คำอธิบาย:
ไลบรารี JavaScript อเนกประสงค์สำหรับการสร้างแผนภูมิและกราฟแบบโต้ตอบ
ดีที่สุดสำหรับ:
ผู้เริ่มต้นที่ต้องการวิธีที่ตรงไปตรงมาในการแสดงข้อมูลโดยไม่ต้องดำน้ำในห้องสมุดที่ซับซ้อนมากขึ้น
การใช้งานตัวอย่าง:
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
const ctx = document.getElementById('myChart').getContext('2d');
new Chart(ctx, {
type: 'bar',
data: {
labels: ['Red', 'Blue', 'Yellow'],
datasets: [{
label: '# of Votes',
data: [12, 19, 3],
backgroundColor: ['red', 'blue', 'yellow']
}]
}
});
AI PROMPT ตัวอย่าง:
“ เพิ่ม chart.js ผ่าน CDN และสร้างแผนภูมิแท่งที่แสดงข้อมูลการขายรายเดือน ติดฉลากแกน y เป็น 'ยอดขาย' และแกน x กับเดือนของปี”
ระบุความต้องการของคุณ
ตัดสินใจว่าคุณต้องการความช่วยเหลือเป็นหลักเกี่ยวกับ Styling (CSS) หรือกับฟังก์ชัน JavaScript ห้องสมุดบางแห่ง (เช่น bootstrap หรือ tailwind) มุ่งเน้นไปที่การออกแบบในขณะที่ห้องอื่น ๆ (เช่น jQuery หรือ Lodash) มุ่งเน้นไปที่การช่วยเหลืองาน JavaScript
ตรวจสอบความเข้ากันได้
ตรวจสอบให้แน่ใจว่าห้องสมุดที่คุณเลือกใช้งานได้ดีกับเครื่องมือหรือเฟรมเวิร์กที่คุณมีอยู่แล้ว
มองหาชุมชนและเอกสารประกอบที่ใช้งานอยู่
โดยทั่วไปแล้วห้องสมุดที่ได้รับการสนับสนุนอย่างดีจะมีแบบฝึกหัดที่ดีกว่าชุมชนขนาดใหญ่สำหรับการแก้ไขปัญหาและการอัปเดตบ่อยครั้ง
ถาม AI ของคุณ
หากคุณยังไม่แน่ใจว่าจะใช้ไลบรารีใดให้แจ้ง AI ของคุณเพื่อขอคำแนะนำ:
“ ห้องสมุดใดที่ดีที่สุดสำหรับ UI ที่เป็นมิตรกับผู้เริ่มต้นและปรับแต่งได้สูง: tailwind, bootstrap หรือ UI วัสดุ?”
AI สามารถอธิบายข้อดีและข้อเสียสำหรับแต่ละตัวเลือกในบริบทของโครงการของคุณ
