Communitygithub.com

AINDF 屏幕创作

通过 DS-MCP 创作或修改 AINDF 设计系统中的屏幕。当需要构建、修改或修复某个产品的页面/屏幕,且该产品的设计系统暴露了 AINDF MCP(工具:get-ds, get-component, validate-screen)时使用。

AINDF 屏幕创作 是什么?

该技能专门用于从不可修改的 AINDF 设计系统中组合屏幕。AI 代理必须首先调用 get-ds 获取设计系统的 pin,并将其逐字复制到每个屏幕的 ds 字段中。所有组件、插槽、预设和 facet 的使用都必须先通过 get-component、list-by-facet、slot-accepts 和 get-preset 读取相应合约,严禁自行发明组件、属性或插槽。AI 代理不得编写任何 HTML、CSS、JSX 或脚本;仅文本、枚举、布尔和数字值属于自由数据,链接仅允许在允许的 richText 属性内。必须反复调用 validate-screen 直到返回 ok: true,并根据返回的 code 和 path 进行修复,不得规避任何规则。如果设计系统无法满足需求,必须通过 request-extension 请求扩展(若端点提供),否则需向用户报告。最终通过 submit-screen 提交(若端点提供)或直接给出已验证的 ScreenSpec。适用于 Claude Code、Cursor 等支持 MCP 工具的 AI 代理,无需处理发布或验收确认。

兼容平台~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": "<一个模板>", "props": {} },
  "sections": [ { "component": "<一个 sections-layer 组件>", "props": {}, "slots": { "<slot>": [ { "component": "…" } ] } } ] }

meta(标题/描述)和 params(用于 [param] 路由,一个 DS params 绑定)是可选的,并且以同样的方式验证。

相关技能