SuperAPI AI 工具集

wix-design-system

设计与创作

查看项目

更新于 10-16 03:05

技能介绍

用途:在使用 @wix/design-system 构建界面时,提供组件查询、属性与示例查阅,以及测试编写参考。

前提:项目中需已安装 @wix/design-system,可用 npm i @wix/design-system 或 yarn add @wix/design-system。

主要能力:技能内置 scripts/wds.cjs 辅助脚本,可在 node_modules 中自动发现 @wix/design-system(支持 monorepo 与 workspaces),并提供以下查询:search 按关键词查找组件;component 查看单个组件的属性与示例列表;components 批量查询多个组件;example 获取指定示例;testkit 获取测试工具导入与驱动 API;icons 搜索图标。

使用方式:在用户项目目录下,用脚本绝对路径运行,例如 WDS="<this-skill-dir>/scripts/wds.cjs",然后执行 node $WDS search table、node $WDS component Button、node $WDS components Button Card Table、node $WDS example Button "Loading state"、node $WDS testkit Button click、node $WDS icons Add Edit Delete。search 支持多关键词 OR 匹配;example 匹配不区分大小写并支持子串。

回退方案:脚本不可用时,可直接访问 node_modules/@wix/design-system/dist/docs/ 下的文档,包括 components.md、components/{Name}Props.md、components/{Name}Examples.md、components/{Name}Testkit.md、testkits.md、icons.md。建议用 grep 定位后再按 offset/limit 读取,不要整篇读取。

其他参考:资料还给出设计元素到 WDS 组件的映射(如容器用 Box、文字按钮用 TextButton、带标签输入用 FormField 加 Input、开关用 ToggleSwitch、模态用 Modal 加 CustomModalLayout、栅格用 Layout 加 Cell),以及像素到 SP 间距令牌的换算表(SP1 至 SP6 在 Classic 与 Studio 下对应不同像素值),并说明 SP 令牌仅用于 gap、padding、margin,不用于宽高。图标来自 @wix/wix-ui-icons-common,每个图标有 Small 变体。

限制:资料未提供该技能的收费、价格、平台支持范围或效果说明;具体组件属性、示例与测试 API 需以实际安装版本中的文档为准。