Skill

setup-opendesign

Initializes OpenDesign output folder: downloads viewer.html to ./opendesign/index.html, creates mockups/design-systems folders, generates manifest.json. Activates when ./opendesign/index.html missing.

design

automation

npx claudepluginhub manalkaff/opendesign --plugin opendesign

Tool Access

This skill uses the workspace's default tool permissions.

Preview

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

SKILL.md

Similar Skills

opendesign

Initiates design workflows for HTML pages, slide decks, interactive prototypes, UI kits, and brand systems. Establishes designer role, taste rules, manages design systems, and routes to specialist skills.

1 file

opendesign

Open CoDesign AI Design Skill

Guides installation, configuration, and usage of Open CoDesign, an open-source Electron app for turning text prompts into HTML/JSX prototypes, slides, and PDFs using local AI models like Claude, GPT, Ollama via BYOK.

aradotso-trending-skills-37

design-loop

689

Autonomously builds multi-page websites via baton-passing loop: generates HTML/CSS/Tailwind pages with Claude or Stitch, integrates, verifies visually via browser automation, queues next tasks.

6 tools

frontend

Stats

Stars21

Forks2

Last CommitMay 5, 2026

Actions

View Source View Plugin View on GitHub View README

Help us improve

Share bugs, ideas, or general feedback.

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

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

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.
Create output folders if they do not already exist:
- ./opendesign/mockups/
- ./opendesign/design-systems/

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": []
    }
  ]
}

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/.