From 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.
How this skill is triggered — by the user, by Claude, or both
Slash command
/opendesign:setup-opendesignThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
You are setting up the OpenDesign output environment for this project for the first time. Complete all steps below in order, then announce completion.
You are setting up the OpenDesign output environment for this project for the first time. Complete all steps below in order, then announce completion.
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.htmlfrom 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.htmlin your browser to view mockups. If previews don't load, serve the folder withpython -m http.server 8080and openhttp://localhost:8080/opendesign/.
npx claudepluginhub manalkaff/opendesign --plugin opendesignInitiates 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.
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.
Automates design system construction from repository analysis: extracts patterns, builds OKLCH token hierarchies, implements accessible components with tests, verifies via multi-reviewer panels.