mcpField
S
setup-opendesign

setup-opendesign

github.com/manalkaffDesign & UI26490 installsUpdated 18w ago
Repository

About setup-opendesign

setup-opendesign is a setup skill for preparing a project’s OpenDesign output environment. It downloads the viewer, creates mockup and design-system folders, and writes a manifest for viewing mockups in a browser.

Key features

  1. 01Downloads the OpenDesign viewer
  2. 02Creates mockup and design-system folders
  3. 03Writes a manifest if absent
  4. 04Provides browser viewing instructions

Use cases

  1. 01Preparing a project for OpenDesign output
  2. 02Setting up folders to store mockups
  3. 03Opening mockup previews in a browser

Install

Copy the command and run it in a terminal.

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

After installing, type/setup-opendesignin Claude Code to confirm it loaded.

Details

From the project README

You are setting up the OpenDesign output environment for this project for the first time. Complete all steps below in order, then announce completion.

Steps

  1. Download viewer.html from GitHub.

    Fetch the file from:

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

    Write the response body directly to ./opendesign/index.html (create ./opendesign/ first if it does not exist). If the fetch fails, tell the user:

    Could not download the OpenDesign viewer. Check your internet connection and try again, or manually copy viewer.html from the opendesign plugin to ./opendesign/index.html.

  2. Create output folders if they do not already exist:

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

  3. Write ./opendesign/manifest.json if it does not already exist:

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

  4. Announce to the user:

    OpenDesign is set up. Open ./opendesign/index.html in your browser to view mockups. If previews don't load, serve the folder with python -m http.server 8080 and open http://localhost:8080/opendesign/.

Comments

Markdown supported