แดชบอร์ด UI การเขียนโค้ด AI มืด

{ "type": "Dark SaaS Analytics Dashboard UI", "product": { "brand": "{argument name=\"brand name\" default=\"AICode\"}", "theme": "อินเทอร์เฟซมีพื้นผิวคล้ายกระจกฝ้าสีน้ำเงินเข้ม พร้อมการไล่ระดับสีที่ละเอียดอ่อน แสงไฟอ่อนๆ การ์ดทรงโค้งมน และขอบบางๆ ซึ่งสะท้อนถึงสุนทรียภาพของเครื่องมือสำหรับนักพัฒนาสมัยใหม่" }, "canvas": { "aspect_ratio": "16:9", "background": "สีน้ำเงินเข้มเที่ยงคืน พร้อมเอฟเฟ็กต์แสงเบลอเล็กน้อยและแสงรัศมีอ่อนๆ" } } }, "layout": { "structure": "แถบด้านข้างซ้ายและพื้นที่เนื้อหาหลัก", "sections": [ { "title": "แถบด้านข้าง", "position": "ด้านซ้าย", "count": 8, "labels": [ "AICode", "ภาพรวม", "โครงการ", "ผู้ช่วย AI", "API และการใช้งาน", "คุณภาพโค้ด", "ทีม", "การตั้งค่า" ], "details": "โลโก้จะแสดงอยู่ด้านบน และ "ภาพรวม" จะถูกไฮไลต์เป็นสีม่วงเมื่อเลือก การ์ดการสมัครสมาชิกด้านล่างแสดงแผน Pro ซึ่งจะหมดอายุใน 12 วัน แถบความคืบหน้าแนวนอนแสดง 75% โปรไฟล์ผู้ใช้ด้านล่างประกอบด้วยรูปประจำตัว {argument name=\"ชื่อผู้ใช้\" default=\"Alex Morgan\"} และที่อยู่อีเมล [email protected]" }, { "title": "ส่วนหัว", "position": "พื้นที่หลักด้านบน", "count": 4, "labels": [ "ยินดีต้อนรับ" กลับมาแล้วนะ อเล็กซ์ 👋", "นี่คือการอัปเดตวันนี้จากแพลตฟอร์มการเขียนโปรแกรม AI ของคุณ", "12 พฤษภาคม 2024 – 12 มิถุนายน 2024", "ส่งออกรายงาน" ], "รายละเอียด": "ด้านซ้ายมีคำทักทายขนาดใหญ่ ในขณะที่ด้านขวามีตัวเลือกช่วงวันที่และปุ่มส่งออก" }, { "title": "บัตรแสดงตัวชี้วัด", "position": "บรรทัดแรกใต้ส่วนหัว", "count": 4, "labels": [ "จำนวนผู้ใช้ทั้งหมด", "โครงการที่ใช้งานอยู่", "ปริมาณการเรียกใช้ API", "คะแนนคุณภาพโค้ด" ], "values": [ "12,842", "2,153", "1.28M", "876" ], "details": "บัตรแต่ละใบประกอบด้วยไอคอนขนาดเล็ก ค่าหลักขนาดใหญ่ และข้อความเปรียบเทียบช่วงเวลาตั้งแต่วันที่ 12 เมษายนถึง 12 พฤษภาคม 2024 ซึ่งแสดงเปอร์เซ็นต์การเติบโตที่เป็นบวกที่ 14.6%, 8.3%, 23.7% และ 5.9% ตามลำดับ แผนภูมิเส้นขนาดเล็กจะแสดงอยู่ด้านล่าง โดยใช้สีม่วง เขียว เหลืองอำพัน และน้ำเงิน" ] }, { "title": "แผงวิเคราะห์หลัก", "position": "แถวกลางและล่าง", "count": 4, "labels": [ "แนวโน้มการเรียกใช้ API", "โครงการยอดนิยม", "แผนที่ความร้อนกิจกรรมผู้ใช้", "แนวโน้มคุณภาพโค้ด" ], "details": "แผนภูมิ "แนวโน้มการเรียกใช้ API" เป็นกราฟพื้นที่กว้างที่มีเมนูแบบดรอปดาวน์ "รายวัน" เส้นสีม่วงแสดงแนวโน้มขาขึ้น สิ้นสุดใกล้ 250,000 รายการยอดนิยมเป็นรายการจัดอันดับ 5 รายการ พร้อมแถบความคืบหน้าและการเปลี่ยนแปลงเป็นเปอร์เซ็นต์ แผนที่ความร้อนกิจกรรมผู้ใช้เป็นแผนที่ความร้อนรายสัปดาห์ 7 แถวพร้อมป้ายกำกับรายชั่วโมงตั้งแต่ 12.00 น. ถึง 21.00 น. แผนภูมิ "แนวโน้มคุณภาพโค้ด" เป็นกราฟเส้นที่มีเมนูแบบดรอปดาวน์ "รายสัปดาห์" เส้นโค้งสีม่วงเพิ่มขึ้นอย่างราบรื่นจากประมาณ 70 ไปจนถึงมากกว่า 90 เล็กน้อย" }, { "title": "รายการโปรเจกต์ยอดนิยม", "position": "แผงด้านขวาตรงกลาง", "count": 5, "labels": [ "AI Code Assistant", "Smart Refactor", "Code Review Bot", "Doc Generator", "Test Builder" ], "values": [ "485K", "321K", "214K", "132K", "98K" ], "details": "สี่รายการแรกแสดงการเติบโตในเชิงบวกเป็นสีเขียว ที่ 12.4%, 8.7%, 3.1% และ 6.8% ตามลำดับ ในขณะที่ Test Builder แสดงการเติบโตในเชิงลบเป็นสีแดง ที่ -1.2%; แต่ละแถวมีไอคอนสี่เหลี่ยมสีและแถบความคืบหน้าแนวนอนบางๆ" ] } } ] }, "style": { "visual_language": "ต้นแบบการออกแบบผลิตภัณฑ์เทคโนโลยีทางการเงินและ AI ระดับไฮเอนด์", "rendering": "ต้นแบบ UI ที่ชัดเจนและมีความละเอียดสูง เงาที่ละเอียดอ่อน เอฟเฟกต์แสงขอบนีออน แผนภูมิที่สวยงาม และแบบอักษร sans-serif ที่สะอาดตา", "primary_accent": "{argument name=\"accent color\" default=\"Electric Violet\"}", "secondary_accents": [ "Emerald Green", "Amber Yellow", "Cyan" ], "density": "อุดมไปด้วยข้อมูลและสมดุลเชิงพื้นที่ ด้วยตารางที่สมดุลและอ่านง่าย" } }