เราใช้ Google Analytics เพื่อจัดทำสถิติการเข้าชม โดยจะตั้งค่าคุกกี้วิเคราะห์ก็ต่อเมื่อคุณยอมรับเท่านั้น หากไม่ยินยอม สถิติจะเป็นค่าประมาณจากสัญญาณที่ไม่ใช้คุกกี้ นโยบายคุกกี้.
PDS · ดีไซน์ซิสเต็ม
PDS คือภาษาดีไซน์ของ Protocore เอง สกัดจากผลิตภัณฑ์ที่เราสร้างและผ่านการใช้งานจริงจนแข็งแกร่ง เน้นโหมดมืด ขับเคลื่อนด้วยโทเคน และมีเอกสารครบทุกส่วน คอมโพเนนต์ชุดเดียวกับที่แสดงผลผลิตภัณฑ์และแดชบอร์ดลูกค้าของเรา แพ็กเกจให้ทีมนำไปใช้ได้ภายในบ่ายเดียว
ฟีเจอร์
ตั้งแต่ primitive ไปจนถึงองค์ประกอบทั้งหน้า — 101 คอมโพเนนต์ ทุกชิ้นสกัดมาจากผลิตภัณฑ์ที่เราส่งมอบจริง ไม่ได้ออกแบบแยกโดด ถ้าคอมโพเนนต์อยู่ใน PDS แสดงว่าผ่านงานจริงมาแล้ว เว็บไซต์นี้ เดโมผลิตภัณฑ์ และแดชบอร์ดของลูกค้าเราล้วนเรนเดอร์ด้วย PDS
สี ตัวอักษร ระยะห่าง และการเคลื่อนไหวล้วนมาจาก token layer เดียว เปลี่ยน token แล้วทุกคอมโพเนนต์เปลี่ยนตาม — ไม่ต้องเขียนทับรายคอมโพเนนต์ และไม่เพี้ยนระหว่างผลิตภัณฑ์
ธีมมืดและธีมสว่าง พร้อมสีเด่นห้าสี ขับเคลื่อนด้วย token ชุดเดียวกันทั้งหมด การปรับแบรนด์คือการสลับ token ไม่ใช่การแตก fork — ทุกผลิตภัณฑ์ในตระกูลเรนเดอร์จากระบบเดียวกัน
คอนทราสต์ ระดับความสูง และสี ถูกออกแบบบนธีมมืดก่อน แล้วธีมสว่างจึงสืบทอดจาก token ชุดเดียวกัน ผลลัพธ์คือโหมดมืดที่รู้สึกเป็นธรรมชาติ ไม่ใช่การกลับสีเฉย ๆ
ปุ่ม อินพุต select สวิตช์ สไลเดอร์ และโครงฟิลด์ — รวมทั้ง label คำแนะนำ และข้อความแสดงข้อผิดพลาด สถานะต่าง ๆ ออกแบบไว้แล้ว ทั้ง focus, disabled, invalid และ loading ทำงานเหมือนกันในทุกผลิตภัณฑ์
Stack, grid, ตัวแบ่ง และ page shell ประกอบหน้าจอได้โดยไม่ต้องเขียน CSS เฉพาะกิจ คอมโพเนนต์ที่ใหญ่ที่สุดคือองค์ประกอบทั้งหน้า — รูปแบบ hero, section และ footer ที่ยกมาจากหน้าที่เราส่งมอบจริง
Header, แท็บ, breadcrumb และเมนู พร้อมพฤติกรรม responsive และการใช้งานด้วยคีย์บอร์ดในตัว การนำทางบนเว็บไซต์นี้คือคอมโพเนนต์จริง ไม่ใช่ของเลียนแบบ
Modal, sheet, drawer, popover และ tooltip บนโมเดลการซ้อนชั้นเดียว — การล็อกโฟกัส การปิด และการเรียงซ้อนจัดการครั้งเดียวจากศูนย์กลาง ไม่มีผลิตภัณฑ์ไหนต้องคำนวณ z-index เอง
ตาราง รายการ สถิติแบบไทล์ badge และไทม์ไลน์ สำหรับผลิตภัณฑ์ที่อยู่กับตัวเลข คอนโซลของเจ้าหน้าที่ทั่วทั้งตระกูลผลิตภัณฑ์แสดงข้อมูลหนาแน่นได้ด้วยคอมโพเนนต์เหล่านี้
Toast, banner, empty state, ตัวแสดงความคืบหน้า และ skeleton — สถานะที่ไม่หวือหวาแต่ออกแบบไว้ตั้งแต่ต้น ผลิตภัณฑ์ที่สร้างบน PDS มีคำตอบที่คิดมาแล้วสำหรับสถานะกำลังโหลด ว่างเปล่า และล้มเหลว
สเกลตัวอักษรแบบบรรณาธิการ พร้อม label แบบ mono สำหรับน้ำเสียงเชิงเทคนิค — เสียงที่คุณเห็นในทุกพื้นผิวของ Protocore สเกลนี้เป็น token ผลิตภัณฑ์จึงปรับได้โดยไม่ต้องออกนอกระบบ
ระยะเวลาและ easing มาเป็น token พร้อมคอมโพเนนต์ที่ใช้งานอยู่แล้ว อินเทอร์เฟซเคลื่อนไหวสอดคล้องกันทุกผลิตภัณฑ์ เพราะไม่มีใครตั้งจังหวะแอนิเมชันด้วยมือ
คอนทราสต์ สถานะ focus และพฤติกรรมของคีย์บอร์ดอยู่ในคอมโพเนนต์ ไม่ได้ทิ้งให้ไปทำเอง ใช้ค่าเริ่มต้นแล้วการเข้าถึงก็มาพร้อมกัน
สไตล์เป็น CSS แบบ static ที่ resolve ตอน build — ไม่มี runtime ของ CSS-in-JS ไม่มีการคำนวณในเบราว์เซอร์ เลเยอร์สไตล์ไม่เพิ่ม JavaScript ให้หน้าเว็บเลย
ระบบนี้ยังมีให้ในรูปแพ็กเกจ CSS ล้วน — token และ utility class โดยไม่ต้องใช้ React หน้าที่เรนเดอร์ฝั่งเซิร์ฟเวอร์ อีเมล และสแตกที่ไม่ใช่ React ดึงจากแหล่งข้อมูลจริงแหล่งเดียวกัน
Token ส่งออกสำหรับเว็บเป็น CSS variable เป็น Tailwind preset และเป็นฟอร์แมตเนทีฟสำหรับแพลตฟอร์มมือถือ แบรนด์นิยามเดียว ใช้ได้ทุกที่ที่ผลิตภัณฑ์ทำงาน
เลเยอร์ React ครอบแอปด้วย provider และเปิดให้เข้าถึง token ผ่าน hook — คอมโพเนนต์อ่านธีมและสีเด่นที่ใช้งานอยู่ แทนการฮาร์ดโค้ดค่า การสลับธีมคือ state ไม่ใช่การ rebuild
กลไกเดียวกับที่ให้ PDS มีสีเด่นห้าสี คือสิ่งที่ให้แบรนด์แก่ผลิตภัณฑ์ whitelabel: สลับค่า token แล้วใช้คอมโพเนนต์เดิม ทุกแอป whitelabel ในตระกูลผลิตภัณฑ์คือหลักฐานว่าได้ผลจริง
แผนที่ที่เครื่องอ่านได้ของทั้งระบบ — คอมโพเนนต์ token และ pattern — เผยแพร่เป็น llms.txt ชี้ LLM มาที่ไฟล์นี้ โค้ดที่สร้างขึ้นจะใช้คอมโพเนนต์ PDS จริง แทนการแต่งของที่ดูน่าเชื่อขึ้นมาเอง
MCP server เปิดระบบให้ coding agent ใช้งานโดยตรง: คอมโพเนนต์ props และ token สอบถามได้ขณะที่ agent กำลังสร้างงาน design system ตอบคำถามได้เอง ไม่ต้องแปะลงใน prompt
ทุกคอมโพเนนต์อยู่ที่ pds.protocore.io พร้อมตัวอย่างสด props และโค้ดสำหรับคัดลอก เอกสารเรนเดอร์ด้วย PDS เอง — สิ่งที่คุณอ่านคือสิ่งที่คุณส่งมอบ
PDS มาในรูปแพ็กเกจที่มีเวอร์ชันแบบ semantic และ changelog การอัปเกรดเป็นการตัดสินใจโดยเจตนา: ทีมจะย้ายเมื่อพร้อม และ changelog บอกชัดว่าอะไรเปลี่ยนไป
ติดตั้งแพ็กเกจจาก private npm registry ของ Protocore ด้วยโทเค็นรายทีมใน .npmrc — เวิร์กโฟลว์ npm มาตรฐาน จำกัดเฉพาะทีมที่มีไลเซนส์ ไม่ต้องใช้ไฟล์ zip แนบมา ไม่ต้องคัดลอกแปะเพื่อติดตั้ง
คีย์ไลเซนส์ที่ลงนามแล้วตรวจสอบได้ในเครื่อง — ไม่ต้องเรียกกลับเซิร์ฟเวอร์ ไม่มีการเช็กเครือข่ายใน build ของคุณ ปัญหาด้านไลเซนส์แสดงเป็นคำเตือนระหว่างพัฒนา และไม่ทำให้แอปบน production พัง
PDS เป็นซอฟต์แวร์กรรมสิทธิ์และออกไลเซนส์รายทีม ขอสิทธิ์เข้าใช้งานแล้วเราจะตั้งค่าให้ — แพ็กเกจ เอกสาร และต้นทาง token — ทีมของคุณเริ่มใช้ได้ภายในบ่ายเดียว
FAQ
ตามทีม ไม่ใช่ตามผู้ใช้หรือตามโปรเจกต์ ใบอนุญาตเดียวครอบคลุมทุกคนในทีมที่ใช้งาน PDS ทั้งโทเคน คอมโพเนนต์ และเอกสาร ต้นทุนขึ้นอยู่กับจำนวนทีมที่นำไปใช้เท่านั้น และผลิตภัณฑ์ whitelabel ที่เราสร้างให้คุณแสดงผลบน PDS อยู่แล้ว
ติดตั้งจาก private registry ที่ npm.protocore.io ข้อมูลรับรองการเข้าถึงจะทำให้งานของคุณดึงแพ็กเกจ @protocore ได้ จากนั้นโทเคนและคอมโพเนนต์ก็ติดตั้งเหมือนไลบรารีทั่วไป
โทเคนส่งออกสำหรับเว็บ, .NET และ native ทำให้สีหรือค่า radius เดียวกันมีความหมายเหมือนกันในทุกแพลตฟอร์มที่คุณส่งมอบ คอมโพเนนต์มีให้สำหรับ React และมีเลเยอร์ CSS ที่ไม่ผูกกับเฟรมเวิร์ก ใช้โทเคนและคลาสชุดเดียวกัน สำหรับทีมที่ไม่ได้ใช้ React
dark-first และรองรับการเข้าถึงโดยค่าเริ่มต้น มี 2 ธีม 5 สีเน้น ขับเคลื่อนด้วยโทเคนทั้งหมด และใช้ CSS แบบ zero-runtime จึงไม่เสียเวลาโหลดไปกับสไตล์ คอมโพเนนต์ชุดเดียวกันแสดงผลทั้งผลิตภัณฑ์ของเราและแดชบอร์ดของลูกค้า
ออกแบบมาเพื่อสิ่งนี้ แผนที่ llms.txt และเซิร์ฟเวอร์ MCP ช่วยให้เอเจนต์อ่านระบบและสร้างงานได้ถูกต้อง และ pds.protocore.io มีตัวอย่างสด props และโค้ดสำหรับคัดลอกของทุกคอมโพเนนต์และโทเคน
ราคา
PDS ออกใบอนุญาตตามทีม ไม่ใช่ตามผู้ใช้หรือตามโปรเจกต์ ใบอนุญาตเดียวครอบคลุมทุกคนในทีมที่ใช้งาน ทั้งโทเคน คอมโพเนนต์ และเอกสาร
เริ่มจากหนึ่งทีม แล้วขยายเพิ่มเมื่อมีการใช้งานมากขึ้น ต้นทุนขึ้นอยู่กับจำนวนทีมที่สร้างบน PDS เท่านั้น ไม่มีปัจจัยอื่น
ผลิตภัณฑ์ whitelabel ที่เราสร้างให้คุณแสดงผลบน PDS อยู่แล้ว ส่วนใบอนุญาตแบบแยกต่างหากสำหรับทีมที่นำไปใช้กับผลิตภัณฑ์ของตนเอง
ใบอนุญาตคิดตามทีม ไม่ใช่ตามจำนวนพนักงานหรือการใช้งาน ขอสิทธิ์เข้าถึง แล้วเราจะกำหนดขอบเขตตามทีมที่จะใช้งานจริง
ประเมิน
ดูทั้งระบบได้ที่ pds.protocore.io — ตัวอย่างสด props และโค้ดสำหรับคัดลอกไปใช้ของทุกคอมโพเนนต์และโทเคน
ดีไซน์โทเคนที่ส่งออกสำหรับเว็บ, .NET และ native ทำให้สีหรือค่า radius เดียวกันมีความหมายเหมือนกันในทุกแพลตฟอร์มที่คุณส่งมอบ
PDS ออกใบอนุญาตตามทีม ใบอนุญาตเดียวครอบคลุมทุกคนที่ใช้งาน ทั้งโทเคน คอมโพเนนต์ และเอกสาร
ข้อมูลรับรองสำหรับ private registry ที่ npm.protocore.io เพื่อติดตั้งแพ็กเกจ @protocore ที่งานของคุณดึงมาใช้
PDS เป็นซอฟต์แวร์กรรมสิทธิ์และออกใบอนุญาตตามทีม ขอสิทธิ์เข้าถึง แล้วเราจะช่วยตั้งค่าให้
ทุกอย่างข้างต้นทำงานในเดโมระดับ production ที่เราพาคุณชมได้ ไม่ว่าจะแบบ standalone, whitelabel หรือเป็นแพลตฟอร์มเดียว บอกเราว่าคุณกำลังสร้างอะไร แล้วเราจะแสดงเส้นทางที่สั้นที่สุด
