Agent skill

Run Opendesign

by manalkaff in manalkaff/opendesign

Use after any OpenDesign build to serve ./opendesign/ over HTTP and give the user a clickable preview link.

MITAuto-check passed

Install Run Opendesign

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

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

GitHub CLI
$ gh skill install manalkaff/opendesign run-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/run-opendesign .claude/skills/run-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
run-opendesign
GitHub stars
261
Token cost
~914 tokens
SKILL.md length
378 words
Files
1
Skills in repo
9
Repo updated
First seen
Licence
MIT

At a glance

Use after any OpenDesign build to serve ./opendesign/ over HTTP and give the user a clickable preview link.

  • Works in 5 steps: Detect the platform. → Check if a server is already running on… → Detect available runtime. Check in this… → …
  • SKILL.md covers Port and Steps
  • Calls python, python3 and curl

What it does

Run Opendesign is an agent skill from manalkaff/opendesign. Use after any OpenDesign build to serve ./opendesign/ over HTTP and give the user a clickable preview link. Handles duplicate server prevention and python/node runtime detection.

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

It works with Python. The repository describes itself as: claude.ai/design open-sourced! The licence is MIT.

Example prompts

  • “/run-opendesign”

Requirements

  • Python 3
  • Node.js

Workflow steps

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

  1. Detect the platform.
  2. Check if a server is already running on port 8289.
  3. Detect available runtime. Check in this order
  4. Start the server in the background, serving from the project root (not from ./opendesign/).
  5. Print the clickable link 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
    • python3
    • curl
    • node
    • npx

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

  • Network

    No URLs in SKILL.md. Its commands use curl and npx, which can reach the network depending on how they are called.

    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

Run Opendesign loads about 914 tokens when it runs. Until then it costs about 48 tokens; SKILL.md has 378 words of instructions outside code blocks.

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

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). 378 words, ~914 tokens.

Download SKILL.mdSave it as .claude/skills/run-opendesign/SKILL.md (or your agent's skills folder).
name
run-opendesign
description
Use after any OpenDesign build to serve ./opendesign/ over HTTP and give the user a clickable preview link. Handles duplicate server prevention and python/node runtime detection.

You are starting the OpenDesign preview server. Complete all steps below in order.

Port

Always use 8289.

Steps

  1. Detect the platform.

    Run:

    bash
    uname -s 2>/dev/null
    • If the output starts with MINGW, CYGWIN, or MSYS, or if uname is not found, treat the platform as Windows.
    • Otherwise treat it as POSIX (Linux / macOS / WSL).
  2. Check if a server is already running on port 8289.

    POSIX:

    bash
    lsof -ti tcp:8289
    • If no output, nothing is bound — continue to step 3.
    • If a PID is returned, something is bound to :8289.

    Windows (cmd/PowerShell):

    powershell
    netstat -ano | findstr LISTENING | findstr :8289
    • If no output, nothing is bound — continue to step 3.
    • If output is returned, something is bound to :8289.

    When something is bound on either platform, probe whether it is the OpenDesign server:

    bash
    curl -sf -o /dev/null -w "%{http_code}" http://localhost:8289/opendesign/index.html
    • If the status code is 200, the OpenDesign server is already running. Skip to step 5.
    • Otherwise, tell the user:

      Port 8289 is in use by another process. Please free the port and try again. Then stop.

  3. Detect available runtime. Check in this order:

    POSIX:

    bash
    python3 --version 2>/dev/null || python --version 2>/dev/null || node --version 2>/dev/null

    Windows:

    powershell
    python --version 2>$null; if ($LASTEXITCODE -ne 0) { python3 --version 2>$null }; if ($LASTEXITCODE -ne 0) { node --version 2>$null }

    Priority order (both platforms):

    • POSIX: python3 → python → node
    • Windows: python → python3 → node (Windows distributions ship as python, not python3)
    • None found → tell the user: "Could not start the preview server — python, python3, and node are all unavailable. Open ./opendesign/index.html manually or install Python." Then stop.
  4. Start the server in the background, serving from the project root (not from ./opendesign/).

    POSIX — capture the absolute project root first:

    bash
    PROJECT_ROOT=$(pwd)

    Then start:

    • python3: python3 -m http.server 8289 --directory "$PROJECT_ROOT" &
    • python: python -m http.server 8289 --directory "$PROJECT_ROOT" &
    • node: npx --yes serve -l 8289 "$PROJECT_ROOT" &

    Windows — cd to the project root first (the --directory flag is available on Python 3.7+ but cd is the safest cross-version approach), then start:

    • python: Start-Process python -ArgumentList '-m','http.server','8289' -WorkingDirectory (Get-Location) -WindowStyle Hidden
    • python3: Start-Process python3 -ArgumentList '-m','http.server','8289' -WorkingDirectory (Get-Location) -WindowStyle Hidden
    • node: Start-Process npx -ArgumentList '--yes','serve','-l','8289',(Get-Location) -WindowStyle Hidden

    Wait 1–2 seconds after starting, then confirm the port is now bound using the same check from step 2 for the detected platform. If nothing is bound after the wait, report: "Server failed to start. Try running python -m http.server 8289 manually from your project root." Then stop.

  5. Print the clickable link to the user:

    OpenDesign viewer is live: http://localhost:8289/opendesign/

    Sidebar lists all mockups. Click any file to preview it in the iframe.

© 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/run-opendesign of manalkaff/opendesign.

Open the folder on GitHubat commit cecd9bb

Compare with similar skills

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

Run Opendesign compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Run Opendesign this skillmanalkaff/opendesign261—~914Automated safety check: PassMIT
MCP Server Builderanthropics/skills180k63 repos~2.3kAutomated safety check: PassApache-2.0
PDF Processinganthropics/skills180k48 repos~2kAutomated safety check: PassProprietary
NotebookLM Research AssistantPleasePrompto/notebooklm-skill7.8k14 repos~2.4kAutomated safety check: NotesMIT
Manim Video Productionbrowser-use/video-use28k6 repos~3kAutomated safety check: PassMIT
Code Review ChecklistshareAI-lab/learn-claude-code78k5 repos~1.1kAutomated safety check: PassMIT

Similar skills

  • MCP Server Builder

    anthropics/skills

    Official

    Guides the design and implementation of Model Context Protocol servers in TypeScript or Python, from tool naming and error messages to evaluation.

    180k GitHub starsUsed in 63 repos~2.3k tokens
    Agent WorkflowsAuto-check passed
  • PDF Processing

    anthropics/skills

    Official

    Handles everyday PDF jobs in Python and on the command line: extract text and tables, merge, split, rotate, watermark, fill forms, encrypt and OCR.

    180k GitHub starsUsed in 48 repos~2k tokens
    Documents & OfficeAuto-check passed
  • NotebookLM Research Assistant

    PleasePrompto/notebooklm-skill

    Lets Claude Code ask questions of your Google NotebookLM notebooks through browser automation and return answers grounded in your uploaded sources.

    7.8k GitHub starsUsed in 14 repos~2.4k tokens
    Knowledge ManagementAuto-check: notes
  • Manim Video Production

    browser-use/video-use

    Produces math and technical explainer videos with Manim Community Edition: concept animations, equation derivations, algorithm walkthroughs and data stories.

    28k GitHub starsUsed in 6 repos~3k tokens
    Media & CreativeAuto-check passed
  • Code Review Checklist

    shareAI-lab/learn-claude-code

    Reviews code against a five-part checklist covering security, correctness, performance, maintainability and testing, and reports findings in a fixed format.

    78k GitHub starsUsed in 5 repos~1.1k tokens
    DevelopmentAuto-check passed
  • PPT Master

    hugohe3/ppt-master

    Generates editable PowerPoint decks, rebuilds slides from images, fills .pptx templates and polishes existing presentations through routed workflows.

    58k GitHub starsUsed in 1 repo~2.5k tokens
    Documents & OfficeAuto-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

Works with

Questions about Run Opendesign

What does Run Opendesign do?

Use after any OpenDesign build to serve ./opendesign/ over HTTP and give the user a clickable preview link. Run Opendesign is an agent skill from manalkaff/opendesign./opendesign/ over HTTP and give the user a clickable preview link.

How do I install Run Opendesign in Claude Code?

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

How do I install Run Opendesign in Codex?

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

Can I use Run 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 run-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/run-opendesign, .gemini/skills/run-opendesign, .github/skills/run-opendesign and .opencode/skills/run-opendesign in your project.

What does Run Opendesign need to run?

Going by SKILL.md and its folder, Run Opendesign needs the command-line tools its instructions call (python, python3, curl, node and npx). Our summary lists: Python 3; Node.js.

Does Run Opendesign access the network?

SKILL.md contains no URLs. Its commands use curl and npx, which can reach the network depending on how they are called. This is read from the text; nothing was executed.

Is Run 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 Run Opendesign use?

Run 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 Run Opendesign use?

About 914 tokens (SKILL.md is roughly 3.7k 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 Run Opendesign?

Skills that share tags, products or a category with Run Opendesign: MCP Server Builder (anthropics/skills, 180k stars), PDF Processing (anthropics/skills, 180k stars), NotebookLM Research Assistant (PleasePrompto/notebooklm-skill, 7.8k stars) and Manim Video Production (browser-use/video-use, 28k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Run 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.