Skip to content
Get packs

Live Artifact Dashboards

Builds HTML dashboards and reports that can be refreshed from local or connected data without redesign.

Source Download skill
Repository
nexu-io/open-design
Stars
105,448
Licence
Apache-2.0
Files
6 files

What it does

Once installed, the agent can make a data-backed HTML view (a dashboard, status page or report) that keeps its layout separate from its data, so the data can be refreshed later without redesigning the page. It writes a template, a data file and metadata, and registers the result with the OpenDesign daemon, which renders the preview. When a named connector such as Notion is connected, it can search it for source material through the daemon's read-only tools.

Great for

  • Designers or developers who want a dashboard or report that stays current as data changes
  • Teams tracking recurring status, metrics or research that needs source notes
  • Users of OpenDesign who already have connectors set up in the daemon

Skip it if

  • One-off mockups, images or static pages: the skill itself says a normal static artifact fits better, and it will ask whether a live view is wanted
  • Sensitive data handling without review: the skill stores summarised values in JSON files and relies on the agent to strip secrets, so people should check outputs before sharing

Try asking

  • “Make a live dashboard of our Q3 product metrics from the project data”
  • “Create a refreshable report summarising open GitHub issues”
  • “Build a synced status page from my Notion project database”
Step-by-step guide: how to use Live Artifact DashboardsInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 6 original files, the Apache-2.0 licence and an attribution note.

    live-artifact.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip live-artifact.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip live-artifact.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • State clearly in the request that you want it refreshable, otherwise the agent may ask or build a static page
  • Name the connector and topic or database you want so the agent does not have to guess what to search
  • Review data.json and provenance.json before registering to confirm no sensitive values were included

What's inside

  • assets/templates/clinic-console/data.json
  • assets/templates/clinic-console/README.md
  • assets/templates/clinic-console/template.html
  • examples/baby-health-live.html
  • examples/competitor-radar-live.html
  • SKILL.md

Redistributed unmodified from nexu-io/open-design under the Apache-2.0 licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.