ฉันต้องการสร้าง wireframe คุณภาพสูงได้ในทันที
ครั้งนี้ฉันได้รวบรวมพรอมต์ดังกล่าวไว้ในคู่มือเดียว
การสอนกฎการสร้าง wireframe ให้ Claude จะช่วยประหยัดเวลาได้อย่างมาก
สารบัญ
- การลงทะเบียนเป็นกฎ "Skill"
- พรอมต์สำหรับคัดลอกและวาง
- คำอธิบายกฎแต่ละข้อ
- สำหรับเว็บไซต์หลายหน้า ให้ใช้ Claude Code
การลงทะเบียนเป็นกฎ "Skill"
เมื่อคุณวางพรอมต์ Claude จะเตรียมไฟล์สำหรับ skill นั้น เมื่อลงทะเบียนแล้ว คุณสามารถพูดว่า "สร้าง wireframe" ได้ทันทีในครั้งต่อๆ ไป
- ส่ง "พรอมต์สำหรับคัดลอกและวาง" ต่อไปนี้ให้ Claude จากนั้นจะสร้างไฟล์ ZIP ขึ้นมา
- กด "ปุ่มบันทึก" ที่แสดงในแชท
วิธีนี้ช่วยให้คุณไม่ต้องวางพรอมต์ซ้ำทุกครั้ง
*ฟีเจอร์ Skill มีให้ใช้งานในแผนแบบชำระเงิน เช่น Pro และ Max
พรอมต์สำหรับคัดลอกและวาง
วางข้อความต่อไปนี้ลงในแชทของ Claude เพื่อเริ่มต้น การลงทะเบียน Skill (การลงทะเบียนเพื่อจดจำเป็นกฎ)
เพียงทำตามคำแนะนำในแชทและกดปุ่ม ✔️ บันทึก
ต่อไปนี้คือพรอมต์สำหรับสร้าง wireframe โปรดเปลี่ยนสิ่งนี้ให้เป็น skill
สร้าง wireframe ในรูปแบบ HTML โปรดปฏิบัติตามกฎทั้งหมดด้านล่างนี้
[เค้าโครง] ・สร้างเค้าโครงที่เข้าใจง่ายในพริบตา โดยไม่รู้สึกว่าอ่านยาก ・สร้างเค้าโครงที่ดูทันสมัย เรียบหรู และมินิมอล ・ใช้พื้นที่ทั้งหน้าให้ดีในเรื่องของระยะขอบและความสมดุล ・ใช้ฟอนต์ Noto Sans JP และทำให้มีขนาดเล็กเล็กน้อย
[การออกแบบ] ・ใช้เฉพาะสี "ขาว ดำ และเทา" เท่านั้น ・ให้พื้นหลังเป็นสีขาวเป็นหลัก ห้ามสร้างหน้าที่เป็นสีดำทั้งหมด ・ห้ามใช้ภาษาอังกฤษ เส้น เงา หรือของตกแต่งอื่นๆ ที่ไม่จำเป็น ・ใช้กล่องสีเทาสำหรับส่วนที่ต้องมีแผนภาพหรือรูปภาพ ・ใช้ "Font Awesome" เวอร์ชันฟรีสำหรับไอคอน
[การเขียน] ・ให้แต่ละประโยคค่อนข้างสั้น ใช้เครื่องหมายจุลภาคอย่างน้อยหนึ่งครั้งต่อประโยค ・ขึ้นย่อหน้าใหม่ทุกๆ 1-2 ประโยค ・ใช้ฮิรางานะสำหรับคันจิในที่ที่รู้สึกเป็นธรรมชาติ (เช่น เปลี่ยน 行う เป็น おこなう) ・ใช้วงเล็บเหลี่ยม 「」 สำหรับชื่อหรือบทสนทนาที่ต้องการเน้น ・แก้ไขคำที่พิมพ์ผิดหรือตัวอักษรที่ตกหล่น และปรับน้ำเสียงให้สุภาพ (Desu/Masu) ให้สม่ำเสมอ
คำอธิบายกฎแต่ละข้อ
สำหรับผู้ที่ต้องการทราบรายละเอียดของกฎต่างๆ
1. เค้าโครงและการออกแบบ
"เค้าโครงที่เข้าใจง่าย" จะจัดลำดับความสำคัญของข้อมูล การจำกัดสีให้เหลือเพียง "ขาว ดำ และเทา" จะช่วยให้การออกแบบไม่หลุดกรอบ
https://x.com/hiroho150cm/status/2061576024878633393
2. ไอคอน
การระบุ "Font Awesome" สำหรับไอคอนจะช่วยปรับปรุงรูปลักษณ์ให้ดีขึ้นอย่างมาก
https://x.com/hiroho150cm/status/2062376294688387540
3. การสร้างด้วย HTML
การใช้ HTML ช่วยให้การสร้างและแก้ไขเป็นไปอย่างราบรื่น
https://x.com/hiroho150cm/status/2061938409577574818
https://x.com/hiroho150cm/status/2064112737865576597
4. การเขียน
ความสามารถในการอ่านจะสูงพอที่จะใช้ข้อความภายในได้ทันที
https://x.com/hiroho150cm/status/2063750350776287429
สำหรับเว็บไซต์หลายหน้า ให้ใช้ Claude Code
จนถึงตอนนี้ เนื้อหานี้เกี่ยวกับ LP (หน้าเดียว) สำหรับเว็บไซต์หลายหน้า เราจะเปลี่ยนแนวทาง
การแสดงตัวอย่างในแชทไม่สามารถจัดการกับการสลับระหว่างไฟล์ HTML หลายไฟล์ได้ดี ดังนั้นเราจึงใช้ "Claude Code"
เตรียมโฟลเดอร์ไว้บนเดสก์ท็อปของคุณและจัดการทุกอย่างภายในโฟลเดอร์นั้น วิธีนี้ Claude Code จะสามารถแก้ไขไฟล์ HTML หลายไฟล์ได้อย่างเหมาะสม
https://x.com/hiroho150cm/status/2065267853922898022
ฉันแชร์เทคนิคการประหยัดเวลาสำหรับการผลิตและกำกับเว็บไซต์โดยใช้ Claude
ฉันจะยังคงนำเสนอข้อมูลที่เป็นประโยชน์ต่อไป ดังนั้นโปรดติดตามฉันหากคุณชอบ
