New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Setup Opendesign

by manalkaff in manalkaff/opendesign

A skill your agent uses when ./opendesign/index.html does not exist in the current project.

MITAuto-check passedProductivity & Automation

Install Setup Opendesign

skills CLI
$ npx skills add manalkaff/opendesign --skill setup-opendesign -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install manalkaff/opendesign setup-opendesign --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/manalkaff/opendesign.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/setup-opendesign .claude/skills/setup-opendesign && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
setup-opendesign
GitHub stars
261
Token cost
~410 tokens
SKILL.md length
132 words
Files
1
Skills in repo
9
Repo updated
First seen
Licence
MIT

At a glance

A skill your agent uses when ./opendesign/index.html does not exist in the current project.

  • Works in 4 steps: Download viewer.html from GitHub. → Create output folders if they do not… → Write ./opendesign/manifest.json if it… → …
  • ./opendesign/index.html does not exist in the current project
  • Calls python
  • Tasks that involve File organization

What it does

Setup Opendesign is an agent skill from manalkaff/opendesign. Use when ./opendesign/index.html does not exist in the current project. Initialises the OpenDesign output folder structure, copies the viewer, and writes an empty manifest.

Its SKILL.md is about 410 tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Productivity & Automation, covering File organization. The repository describes itself as: claude.ai/design open-sourced! The licence is MIT.

When your agent uses it

  • ./opendesign/index.html does not exist in the current project
  • Tasks that involve File organization

Example prompts

  • “/setup-opendesign”

Requirements

  • Python 3

Workflow steps

4 steps, taken from the first numbered list in SKILL.md.

  1. Download viewer.html from GitHub.
  2. Create output folders if they do not already exist
  3. Write ./opendesign/manifest.json if it does not already exist
  4. Announce to the user

What it can do on your machine

Read from SKILL.md and the folder at commit cecd9bb. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Shell commands in SKILL.md call:

    • python

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Setup Opendesign loads about 410 tokens when it runs. Until then it costs about 47 tokens; SKILL.md has 132 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~47
When it runs · the whole SKILL.md, loaded when a task matches
~410

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from manalkaff/opendesign at commit cecd9bb, republished under its MIT licence (© manalkaff). 132 words, ~410 tokens.

Download SKILL.mdSave it as .claude/skills/setup-opendesign/SKILL.md (or your agent's skills folder).
name
setup-opendesign
description
Use when ./opendesign/index.html does not exist in the current project. Initialises the OpenDesign output folder structure, copies the viewer, and writes an empty manifest.

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:

    json
    {
  "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/.

© manalkaff, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

Just SKILL.md in skills/setup-opendesign of manalkaff/opendesign.

Open the folder on GitHubat commit cecd9bb

Compare with similar skills

Setup Opendesign next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Setup Opendesign compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Setup Opendesign this skillmanalkaff/opendesign261—~410Automated safety check: PassMIT
Answer Me With HTMLQingYunA/answer-me-with-html2.4k—~4.1kAutomated safety check: PassMIT
Abp App Nolayersabpframework/abp14k—~575Automated safety check: PassLGPL-3.0
Feishu Driveraucvr/Group-Goki1123 repos~587Automated safety check: PassMIT
Azldev Comp Tomlmicrosoft/azurelinux5.3k—~1.8kAutomated safety check: PassMIT
PikpakBengerthelorf/pikpaktui120—~1.2kAutomated safety check: PassApache-2.0

Similar skills

  • Answer Me With HTML

    QingYunA/answer-me-with-html

    Turns an answer into a one-page visual HTML explainer: the model writes a short Markdown draft and the bundled CLI builds one page.

    2.4k GitHub stars~4.1k tokensUpdated today
    Productivity & AutomationAuto-check passed

  • Abp App Nolayers

    abpframework/abp

    ABP Single-Layer (No-Layers / nolayers) application template - single project structure, feature-based file organization, no separate Domain/Application.Contracts projects.

    14k GitHub stars~575 tokensUpdated today
    Productivity & AutomationAuto-check passed

  • Feishu Drive

    raucvr/Group-Goki

    Feishu cloud storage file management. An agent skill from raucvr/Group-Goki.

    112 GitHub starsUsed in 3 repos~587 tokens
    Productivity & AutomationAuto-check passed

  • Azldev Comp Toml

    microsoft/azurelinux

    Official

    Read this before authoring, editing, or reviewing a .comp.toml file; do not work from memory.

    5.3k GitHub stars~1.8k tokensUpdated today
    Productivity & AutomationAuto-check passed

  • Pikpak

    Bengerthelorf/pikpaktui

    Manage PikPak cloud storage — browse, upload, download, stream, share, and organize files via CLI.

    120 GitHub stars~1.2k tokensUpdated today
    Productivity & AutomationAuto-check passed

  • Advanced File Management

    MassLab-SII/open-agent-skills

    Advanced file management tools. An agent skill from MassLab-SII/open-agent-skills.

    133 GitHub stars~1.6k tokensUpdated 9 mo ago
    Productivity & AutomationAuto-check passed

More from manalkaff/opendesign

All 9 skills in this repo

  • Create Design System

    manalkaff/opendesign

    A skill your agent uses when the user asks to produce a reusable design system or UI kit from an existing brand, codebase, or product.

    261 GitHub stars~1.3k tokensUpdated 3 mo ago
    Auto-check passed

  • Make A Deck

    manalkaff/opendesign

    A skill your agent uses when the user asks for a slide presentation.

    261 GitHub stars~1.2k tokensUpdated 3 mo ago
    Auto-check passed

  • Opendesign

    manalkaff/opendesign

    A skill your agent uses when starting any design task — HTML pages, slide decks, interactive prototypes, UI kits, brand systems.

    261 GitHub stars~2.3k tokensUpdated 3 mo ago
    Auto-check passed

  • Frontend Design

    manalkaff/opendesign

    A skill your agent uses when designing without an existing brand system.

    261 GitHub stars~836 tokensUpdated 3 mo ago
    Auto-check passed

  • Handoff To Claude Code

    manalkaff/opendesign

    A skill your agent uses when the user asks to hand a finished design off to a developer or a coding agent for implementation in a real codebase.

    261 GitHub stars~1k tokensUpdated 3 mo ago
    Auto-check passed

  • Make Tweakable

    manalkaff/opendesign

    A skill your agent uses when the user wants in-design controls for toggling variants, swapping colors, editing copy, or flipping feature flags directly inside a design artifact.

    261 GitHub stars~571 tokensUpdated 3 mo ago
    Auto-check passed

Categories

Questions about Setup Opendesign

What does Setup Opendesign do?

A skill your agent uses when ./opendesign/index.html does not exist in the current project. Setup Opendesign is an agent skill from manalkaff/opendesign.html does not exist in the current project.

When should I use Setup Opendesign?

Setup Opendesign fits situations like: ./opendesign/index.html does not exist in the current project; tasks that involve File organization.

How do I install Setup Opendesign in Claude Code?

Run `npx skills add manalkaff/opendesign --skill setup-opendesign -a claude-code`. Or copy the skill folder (skills/setup-opendesign in manalkaff/opendesign) into .claude/skills/setup-opendesign in your project. Claude Code loads it when a task matches its description.

How do I install Setup Opendesign in Codex?

Run `npx skills add manalkaff/opendesign --skill setup-opendesign -a codex`. Or copy the skill folder (skills/setup-opendesign in manalkaff/opendesign) into .agents/skills/setup-opendesign in your project. Codex loads it when a task matches its description.

Can I use Setup Opendesign in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add manalkaff/opendesign --skill setup-opendesign -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/setup-opendesign, .gemini/skills/setup-opendesign, .github/skills/setup-opendesign and .opencode/skills/setup-opendesign in your project.

What does Setup Opendesign need to run?

Going by SKILL.md and its folder, Setup Opendesign needs the command-line tools its instructions call (python). Our summary lists: Python 3.

Does Setup Opendesign access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Setup Opendesign safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Setup Opendesign use?

Setup Opendesign is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Setup Opendesign use?

About 410 tokens (SKILL.md is roughly 1.6k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Setup Opendesign?

Skills that share tags, products or a category with Setup Opendesign: Answer Me With HTML (QingYunA/answer-me-with-html, 2.4k stars), Abp App Nolayers (abpframework/abp, 14k stars), Feishu Drive (raucvr/Group-Goki, 112 stars) and Azldev Comp Toml (microsoft/azurelinux, 5.3k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Setup Opendesign?

manalkaff (a GitHub user) maintains it in manalkaff/opendesign, which has 261 GitHub stars. The repository holds 9 skills in this directory. The repository was last updated on June 27, 2026.

Source: manalkaff/opendesign on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.