ดึงโทเค็นการออกแบบที่มองเห็นได้ไปยังไฟล์ DESIGN.md ที่พร้อมสำหรับ AI
Extrator de DESIGN.md, สร้างโดย Vitor M. M. ร่วมกับ ibe.IA, เป็นส่วนขยายของ Chrome ที่แปลงเอกลักษณ์ทางสายตาของเว็บไซต์ให้เป็นการอ้างอิง DESIGN.md ที่ได้มาตรฐานสำหรับโค้ด UI ที่ช่วยโดย AI มันตรวจสอบหน้าและจับสี, ตัวอักษร, การจัดระยะห่าง และกฎที่ถูกทำให้เป็นโทเค็นอื่น ๆ เพื่อสร้างเอกสารที่เครื่องอ่านได้ ส่วนขยายนี้ใช้แผงด้านข้างที่กะทัดรัดสำหรับการดึงข้อมูลอย่างรวดเร็วและมุ่งเป้าไปที่นักพัฒนาส่วนหน้า, นักออกแบบ UI/UX, และวิศวกรที่ต้องการแนวทางสายตาที่สอดคล้องกันสำหรับอินเทอร์เฟซที่ขับเคลื่อนโดย LLM.
มันแปลงสไตล์ในหน้าเป็นไฟล์โทเคนการออกแบบที่มีโครงสร้าง
ส่วนขยายดึงข้อมูลสไตล์ที่เป็นรูปธรรม จากแท็บที่เปิดอยู่และเขียนลงในไฟล์ DESIGN.md ตัวดึงข้อมูลจะระบุสี, ขนาดตัวอักษร, หน่วยการเว้นระยะ, สไตล์ขอบและเงาและจัดรูปแบบเป็นการอ้างอิงโทเคน ผลลัพธ์จะปฏิบัติตามข้อกำหนดของกลุ่มชุมชนโทเคนการออกแบบ W3C (DTCG) ดังนั้นทีมงานจะได้รับโมเดลโทเคนที่ได้มาตรฐานแทนที่จะเป็นรายการสีแบบเฉพาะเจาะจง สิ่งนี้ช่วยให้เครื่องมือที่อยู่ด้านล่างตีความโทเคนได้อย่างเชื่อถือได้
มันรวมเข้ากับการท่องเว็บโดยไม่ออกจากหน้า
การดึงข้อมูลทำงานจากแผงด้านข้าง ที่สร้างขึ้นจาก Chrome Side Panel API ทำให้ผู้ใช้สามารถเริ่มการจับภาพด้วยการคลิกเพียงครั้งเดียวในขณะที่ดูไซต์สด การออกแบบแผงจะทำให้การทำงานมีความกระชับและไม่รบกวน ดังนั้นนักออกแบบจึงสามารถตรวจสอบส่วนประกอบและกระตุ้นการดึงข้อมูลโดยไม่ต้องเปิดหน้าต่างแยกต่างหาก การจับภาพหลายหน้าจะรวมโทเคนจากหน้าที่นำทางไปยังไฟล์อ้างอิงเดียวเพื่อความสอดคล้องในระดับโครงการ
มันเก็บการประมวลผลไว้ในเครื่องเพื่อความเป็นส่วนตัว
การวิเคราะห์ทั้งหมดเกิดขึ้นในเบราว์เซอร์ของผู้ใช้; ส่วนขยายจะเอกสารว่ามันไม่ได้ส่งหรือเก็บข้อมูลภายนอกและไม่ต้องการบัญชี การประมวลผลเฉพาะในเครื่องนั้นเหมาะสำหรับสภาพแวดล้อมมืออาชีพที่มีกฎความเป็นส่วนตัวที่เข้มงวด เนื่องจากโทเคนที่ถูกดึงออกมาและ DESIGN.md ที่สร้างขึ้นจะยังคงอยู่ในสภาพแวดล้อมของลูกค้าและสามารถส่งออกโดยตรงเพื่อการใช้งานภายใน
มันเตรียมไฟล์โทเคนสำหรับ AI editors และการใช้งานโปรแกรม
เครื่องมือผลิตวัตถุที่พร้อมสำหรับ AI รวมถึง AI Consolidation Prompt และไฟล์ Markdown ที่สามารถส่งออกได้พร้อม frontmatter YAML ที่เหมาะสำหรับการนำเข้าแบบโปรแกรม Prompt จะถูกนำเสนอเพื่อช่วย LLMs เช่น Claude และ Cursor ใช้ชุดโทเคน ในขณะที่ผลลัพธ์ Markdown จะถูกจัดรูปแบบสำหรับการรวมเข้ากับสายการพัฒนาของนักพัฒนา ส่วนขยายทำงานบน Chrome และเบราว์เซอร์ที่ใช้ Chromium อื่น ๆ เนื่องจากการพึ่งพา API ของมัน
เหมาะสมที่สุดสำหรับทีมที่ต้องการแนวทางการออกแบบที่สามารถทำซ้ำได้สำหรับโค้ดที่ช่วยด้วย AI
ส่วนขยายนี้เป็นตัวเลือกที่ใช้งานได้จริงสำหรับทีมฟรอนต์เอนด์และวิศวกรการส่งข้อความที่ต้องการอ้างอิงการออกแบบที่สามารถทำซ้ำได้และอ่านได้โดยเครื่องเพื่อลดการเบี่ยงเบนทางสายตาใน UI ที่สร้างขึ้นโดย LLM หนึ่งในข้อแลกเปลี่ยนคือการนำมันมาใช้ต้องมีการเปลี่ยนแปลงเวิร์กโฟลว์เล็กน้อยเพื่อให้นำเข้าและเวอร์ชันไฟล์โทเค็นภายในกระบวนการสร้างหรือการตรวจสอบที่มีอยู่ สำหรับโครงการที่บังคับใช้ความซื่อสัตย์ในการออกแบบ ส่วนขยายนี้ให้วิธีการที่มุ่งเน้นและคำนึงถึงความเป็นส่วนตัวในการเข้ารหัสกฎทางสายตา.
