Railly/tinte

解決的問題

Tinte 解決了確保 AI 編碼代理產生的 UI 與特定品牌設計系統一致的問題。它透過提供一個結構化、可安裝的「Agent Plugin」，包含品牌的識別、組合規則和 CSS 標籤，防止代理猜測樣式或繞過設計標籤。

如何運作

Tinte 將設計識別配置編譯為 AI 代理可作為 API 消費的一組工件。它使用提取、編譯和強制執行的工作流程：

1. 提取：可透過 Ray 從即時頁面或影像中提取設計識別。
2. 編譯：將識別配置轉換為包含 SKILL.md 檔案（包含字型比例、語氣和組合法則）和 tokens.css 檔案（作為代理的樣式 API）的 Agent Plugin。
3. 強制執行：一個 linting 工具確保代碼中不使用繞過已定義設計標籤的顏色。

此外，Tinte 還可將語意 OKLCH 標籤編譯為超過 19 種不同格式，包括 shadcn/ui 預設、VS Code 主題和終端設定。

適用對象

希望將設計系統自動應用於 AI 生成代碼，並確保在不同工具和環境中保持品牌一致性的開發人員和設計師。

特色

• Agent Plugin 編譯器：將設計系統轉換為專為 AI 代理讀取和遵循而設計的格式。
• 多格式匯出：支援 19+ 種格式，包括 VS Code、Zed、Cursor 和 shadcn/ui。
• 設計提取：能夠從即時頁面或影像中提取樣式。
• 標籤 lint：一個 CLI 工具，用於檢測樣式是否繞過了已建立的設計標籤。