mcpField
S
setup-opendesign

setup-opendesign

github.com/manalkaff设计与 UI26490 次安装18 周前更新
代码仓库

关于 setup-opendesign

setup-opendesign 用于初始化项目的 OpenDesign 输出环境，包括下载查看器、创建文件夹和写入清单，便于在浏览器中查看模型稿。

主要功能

  1. 01下载 OpenDesign 查看器
  2. 02创建模型稿和设计系统文件夹
  3. 03在清单不存在时写入清单
  4. 04提供浏览器查看说明

适用场景

  1. 01为项目准备 OpenDesign 输出环境
  2. 02设置模型稿存储文件夹
  3. 03在浏览器中打开模型稿预览

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/manalkaff/opendesign --skill setup-opendesign

安装后在 Claude Code 中输入/setup-opendesign确认已加载。

详细介绍

您正在首次为此项目配置 OpenDesign 输出环境。请按顺序完成以下所有步骤，然后宣布配置完成。

步骤

  1. 从 GitHub 下载 viewer.html。

    从以下地址获取文件：

    https://raw.githubusercontent.com/manalkaff/opendesign/main/skills/opendesign/viewer.html

    将响应正文直接写入 ./opendesign/index.html（如果 ./opendesign/ 不存在，请先创建）。如果获取失败，请告知用户：

    无法下载 OpenDesign 查看器。请检查您的互联网连接并重试，或手动将 opendesign 插件中的 viewer.html 复制到 ./opendesign/index.html。

  2. 创建输出文件夹（如果它们尚不存在）：

    • ./opendesign/mockups/
    • ./opendesign/design-systems/

  3. 写入 ./opendesign/manifest.json（如果它尚不存在）：

    {
  "generated": "<current ISO 8601 timestamp>",
  "sections": [
    {
      "id": "mockups",
      "label": "Mockups",
      "groups": []
    },
    {
      "id": "design-systems",
      "label": "Design Systems",
      "groups": []
    }
  ]
}

  4. 向用户宣布：

    OpenDesign 已配置完成。在浏览器中打开 ./opendesign/index.html，即可查看模型图。如果预览无法加载，请使用 python -m http.server 8080 提供文件夹服务，然后打开 http://localhost:8080/opendesign/。

评论

支持 Markdown