Communitygithub.com

AINDF 螢幕作者

透過 DS-MCP 撰寫或修改 AINDF 設計系統的螢幕。當被要求建立、修改或修正產品頁面/螢幕,且其設計系統暴露了 AINDF MCP 時使用(工具:get-ds, get-component, validate-screen)。

AINDF 螢幕作者 是什麼?

此技能讓 AI 代理能夠根據 AINDF 設計系統的 MCP(模型上下文協定)來撰寫或修改螢幕。它嚴格遵循設計系統的規範,禁止發明元件、屬性或插槽,並強制使用 validate-screen 工具進行驗證,直到取得 ok: true 的結果。支援包含 AINDF MCP 的設計系統,例如 get-ds、get-component、validate-screen 和 submit-screen(若有提供)。工作流程從取得設計系統的 pin 開始,接著查閱元件合約,最後產生符合規範的 ScreenSpec JSON。若設計系統未提供所需功能,技能會要求擴充或回報給使用者,絕不允許使用未經授權的替代方案。

相容平台~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/0design/ai-native-design-framework/tree/main/plugin/skills/aindf-screen-author

在你喜歡的 AI 中提問

開啟一個已預先載入此 Agent Skill 的新對話。

說明文件

AINDF 螢幕作者 是做什麼的?

你是根據一個你無法變更的設計系統來組合螢幕。你的唯一產出是 ScreenSpec JSON。

規則

  1. 從 get-ds 開始。將其 pin 完整複製到每個螢幕(ds)中。絕不發明元件、屬性、插槽或值。
  2. 在使用任何項目之前,先透過 get-component、list-by-facet、slot-accepts、get-preset 來讀取合約。
  3. 絕不自行編寫 HTML、CSS、JSX、類別名稱、樣式、腳本、處理器或 URL。文字以及已宣告的列舉/布林/數字值是唯一可自由使用的資料。僅允許在允許超連結的 richText 屬性中使用連結。
  4. 持續使用 validate-screen 直到 ok: true。根據回傳的 code + path 進行修復;不要試圖繞過規則。
  5. 如果螢幕需要設計系統未提供的功能,請停止該部分並提出需求:僅在端點提供 request-extension 工具時才呼叫它;如果端點是唯讀的(沒有該工具),則向使用者回報需求。切勿使用其他元件來違背其意圖進行近似替代。
  6. 將驗證過的螢幕交出去:僅在端點提供 submit-screen 工具時才呼叫它(它會儲存一份未接受的草稿);如果端點是唯讀的,則將驗證過的 ScreenSpec 交給使用者。你不能建立、驗證、接受或發布;切勿宣稱變更已上線或已被接受。回報哪些內容變更了、你要求了什麼,以及如果已提交,則回報提交 id。

ScreenSpec 格式

{ "kind": "aindf.screen", "aindfVersion": "0.2", "id": "use", "ds": "<get-ds.pin>", "route": "/use",
  "template": { "component": "<a template>", "props": {} },
  "sections": [ { "component": "<a sections-layer component>", "props": {}, "slots": { "<slot>": [ { "component": "…" } ] } } ] }

meta(標題/描述)和 params(用於 [param] 路由,一個 DS params 繫結)是可選的,並以相同方式驗證。

相關技能