21st.dev Magic

การออกแบบ

สร้างคอมโพเนนต์ UI ที่สวยงามได้ทันทีผ่าน Neotask บน OpenClaw

สิ่งที่คุณทำได้

Neotask เชื่อมต่อกับ 21st.dev Magic ผ่าน OpenClaw ให้คุณเข้าถึงไลบรารีขนาดใหญ่ของคอมโพเนนต์ UI ที่พร้อมใช้งานจริงและการสร้างคอมโพเนนต์ด้วย AI ได้ทันที — ทั้งหมดผ่านการสนทนา

การสร้างคอมโพเนนต์

  • สร้างจากคำอธิบาย — อธิบาย UI ที่คุณต้องการเป็นภาษาง่ายๆ และรับคอมโพเนนต์ React ที่สมบูรณ์พร้อมสไตล์ด้วย Tailwind CSS, shadcn/ui หรือไลบรารีที่คุณต้องการ
  • ปรับปรุงด้วยการตอบกลับ — พูดว่า "ทำให้กะทัดรัดขึ้น" หรือ "เพิ่มสถานะการโหลด" แล้ว Neotask จะนำการตอบกลับของคุณไปใช้ทันทีพร้อมเอาต์พุตโค้ดใหม่
  • การสร้างหลายรูปแบบ — ขอรูปแบบดีไซน์หลายแบบพร้อมกันเพื่อให้คุณเลือกแบบที่เหมาะสมที่สุดสำหรับโปรเจกต์ของคุณ
  • การเข้าถึงได้ในตัว — คอมโพเนนต์ที่สร้างขึ้นเป็นไปตามแนวปฏิบัติที่ดีที่สุดของ ARIA และรูปแบบการนำทางด้วยแป้นพิมพ์ตั้งแต่ต้น

    • การค้นหาไลบรารีคอมโพเนนต์

  • ค้นหาตามรูปแบบ — ค้นหาคอมโพเนนต์ที่ตรงกับกรณีการใช้งานของคุณ: "ตารางราคาพร้อมสลับรายเดือน/รายปี" หรือ "ลิ้นชักการแจ้งเตือนพร้อมจำนวนที่ยังไม่อ่าน"
  • เรียกดูตามหมวดหมู่ — สำรวจคอมโพเนนต์ตามประเภท: แถบนำทาง, โมดัล, ฟอร์ม, การ์ด, ตารางข้อมูล, แดชบอร์ด และอื่นๆ
  • กรองตามสแต็กเทคโนโลยี — ค้นหาคอมโพเนนต์เฉพาะสำหรับสแต็กเทคโนโลยีของคุณ (React, Vue, Tailwind, shadcn, Radix UI)
  • สนิปเพตพร้อมคัดลอก — ทุกคอมโพเนนต์จากไลบรารีจัดรูปแบบพร้อมใช้งานทันทีในโค้ดเบสของคุณ

    • การเชื่อมต่อระบบดีไซน์

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

    • ลองถามดู

  • "สร้างคอมโพเนนต์การ์ดราคาพร้อมป้ายยอดนิยม รายการฟีเจอร์ และปุ่ม CTA โดยใช้ Tailwind"
  • "ฉันต้องการแถบนำทางแบบเรสปอนซีฟ มีโลโก้ด้านซ้าย ลิงก์นำทางตรงกลาง และปุ่มเข้าสู่ระบบด้านขวา"
  • "ค้นหา 21st.dev สำหรับคอมโพเนนต์ตารางข้อมูลที่มีการเรียงลำดับ การกรอง และการแบ่งหน้า"
  • "สร้างส่วน hero พร้อมพาดหัวขนาดใหญ่ คำบรรยาย ปุ่ม CTA สองปุ่ม และภาพ mockup ด้านขวา"
  • "ทำให้คอมโพเนนต์กะทัดรัดขึ้นและเพิ่มสถานะการโหลดแบบ skeleton"
  • "ค้นหาคอมโพเนนต์กล่องโต้ตอบโมดัลที่เลื่อนเข้ามาจากด้านขวาเป็นลิ้นชัก"
  • "สร้างตัวนำขั้นตอนการเริ่มต้นใช้งาน 4 ขั้นตอนพร้อมตัวบ่งชี้ความคืบหน้า"
  • "ฉันต้องการระบบการแจ้งเตือนแบบ toast ที่ซ้อนการแจ้งเตือนไว้ที่มุมขวาล่าง"

    • เคล็ดลับมือโปร

  • ระบุเจตนาดีไซน์ของคุณให้ชัดเจน — "สไตล์ SaaS สำหรับองค์กรพร้อมเส้นขอบที่เรียบง่าย" หรือ "แอปสำหรับผู้บริโภคพร้อมมุมโค้งมนและเงาอ่อน" จะให้ผลลัพธ์ที่แตกต่างกันอย่างมาก
  • ขอให้ Neotask ปรับคอมโพเนนต์ 21st.dev ที่ค้นพบให้เข้ากับจานสีที่มีอยู่ของคุณโดยให้ค่าสีหลัก/สีรอง
  • ใช้การสร้างคอมโพเนนต์ในช่วงต้นของกระบวนการออกแบบเพื่อสร้างต้นแบบเลย์เอาต์อย่างรวดเร็วก่อนที่จะยึดมั่นกับระบบดีไซน์เต็มรูปแบบ
  • รวมกับเวิร์กโฟลว์โปรแกรมแก้ไขโค้ดของคุณผ่าน OpenClaw — สร้างคอมโพเนนต์ ปรับปรุงผ่านการสนทนา และส่งออกไฟล์สุดท้ายตรงไปยังโปรเจกต์ของคุณ

    • Works Well With