Guide · Agent skill
How to use the Live Artifact Dashboards agent skill
Updated · written with AI from the project's own documentation and checked against our catalogue data
The live-artifact skill lets an AI agent build an HTML dashboard, status page or report whose layout is kept separate from its data, so the numbers can be refreshed later without redesigning the page. This guide explains what agent skills are, how to install this one, how to trigger it with natural requests, and what it needs and what to watch for. By the end you will know how to get a refreshable artifact from a request and when a plain static page is the better choice.
Live Artifact Dashboardsnexu-io/open-design · Apache-2.0 Download the skill Quick start
- 1Download and unzip the skill. Download the live-artifact ZIP from this page and unzip it into ~/.claude/skills/ for personal use or the project's .claude/skills/ folder for one project.
- 2Confirm the OpenDesign environment. Make sure the OpenDesign daemon is running with OD_NODE_BIN, OD_BIN, OD_DAEMON_URL and OD_TOOL_TOKEN available to the agent.
- 3Connect any external source. If you want data from a service such as Notion, connect it in the OpenDesign UI first. The agent will report if it is not connected.
- 4Make a clear request. Describe the dashboard or report and say it should be refreshable, for example a live dashboard of weekly metrics.
- 5Answer the live-or-static question. If the agent asks whether the artifact should be refreshable or static, answer with one word to match your need.
- 6Review and share the preview. Open the rendered preview and check the data and provenance before sharing it with others.
What is an agent skill, and what does live-artifact make the agent do?
An agent skill is a folder of instructions (anchored by a SKILL.md file) that an AI agent loads when a task matches the skill's description. This one is designed for the OpenDesign environment.
Once installed, the agent can create a live artifact: a previewable HTML view of data, such as a dashboard, status page or report. It writes an HTML template, a data file and metadata, then registers the result with the OpenDesign daemon, which renders the preview. When a named connector such as Notion is connected, the agent can search it for source material through the daemon's read-only tools.
- Writes template.html, data.json, artifact.json and provenance.json
- Registers the artifact with the OpenDesign daemon, which renders index.html from the template and data
- Can pull source material from connected connectors, read-only, when you ask for them by name
Install the live-artifact skill
Download the ZIP for this skill from this page and unzip it. Then place the folder in one of these locations, depending on whether you want it available everywhere or only in one project:
Alternatively, in the Claude apps, open Settings, go to Capabilities, and upload the skill under Skills.
- Personal (all projects): unzip into ~/.claude/skills/
- Single project: unzip into the project's .claude/skills/ folder
- Claude apps: Settings → Capabilities → Skills, then upload the skill
Check what the skill needs before you start
The skill runs inside the OpenDesign environment and depends on its daemon. The daemon must have these values injected as environment variables: OD_NODE_BIN, OD_BIN, OD_DAEMON_URL and OD_TOOL_TOKEN. The skill's wrapper commands read these, and you should not print or store the token.
Connectors are optional. You only need a connected connector, such as Notion, if you want the artifact to use external data. Without one, the agent works from local or project data you provide.
The skill runs scripts and uses the network, so review it as you would any tool that does both.
- OpenDesign daemon with OD_NODE_BIN, OD_BIN, OD_DAEMON_URL and OD_TOOL_TOKEN available
- Connected connectors (for example Notion) only if you want external data
- Runs scripts: yes. Uses network: yes.
How to trigger the skill with natural requests
Ask for the outcome you want and say that it should stay current or be refreshable. Words that trigger the skill include live artifact, live dashboard, refreshable dashboard, live report, refreshable report and synced view.
If you name a connector, such as Notion, the agent checks whether it is connected and searches it for a topic derived from your request. If your request is ambiguous, the skill asks one short question: whether the artifact should be refreshable or just static.
- "Make a live dashboard of our project status, pulling from my Notion workspace."
- "Build a refreshable report on competitor pricing changes."
- "Create a synced view of weekly team metrics from the local data files."
What you get: the files the skill creates
The skill separates layout from data. template.html holds the design and uses placeholders such as {{data.kpis.0.value}}. Repeated rows, like list items, use data-od-repeat. data.json holds the values. Because the design and data are separate, refreshing the numbers later does not require redesigning the page.
The skill also writes artifact.json for metadata and provenance.json for source notes, timestamps and transformation notes. Its intended outputs include index.html, which the daemon derives from the template and data; the agent should not write index.html itself.
- template.html: the human-designed layout with bindings
- data.json: the normalized values the preview needs
- artifact.json: artifact metadata and preview declaration
- provenance.json: concise source notes and timestamps
Safety notes: credentials, sensitive data and review
The skill is built to avoid storing secrets. It is not supposed to persist credentials, OAuth tokens, API keys, cookies, raw provider responses or full payloads in any of the JSON files. It stores summarised values, and the agent is expected to strip secrets.
That protection relies on the agent following the rules, so check outputs before sharing them, especially if the source data is sensitive. Connector tools are used in read-only mode.
- Review data.json and provenance.json before sharing an artifact
- Do not paste secrets into your request; connectors are set up in the UI, not in the chat
- Expect the agent to summarise large lists rather than copy them in full
What people use it for
- A status page for a project that updates as the underlying Notion notes change
- A recurring metrics dashboard where new numbers are dropped into data.json and the layout stays the same
- A research report that keeps source notes and timestamps alongside the findings
- An internal operations console built from the Clinic Console template in the skill's assets
Frequently asked questions
How do I install the live-artifact agent skill?
Download the ZIP from this page and unzip it into ~/.claude/skills/ for all projects or into a project's .claude/skills/ folder for one project. In the Claude apps you can instead upload it under Settings → Capabilities → Skills.
What does the live-artifact skill require?
It requires the OpenDesign daemon with OD_NODE_BIN, OD_BIN, OD_DAEMON_URL and OD_TOOL_TOKEN injected. Connected connectors, such as Notion, are only needed if you want external data. The skill runs scripts and uses the network.
Is the live-artifact skill free?
The source material for this page does not state pricing or licence terms beyond the listed licence, Apache-2.0. Check the licence file in the source repository for the terms that apply.
When should I not use live-artifact?
Use a normal static artifact for one-off mockups, images or static pages. The skill itself says a static artifact fits better in those cases and will ask whether you want a live view.
Can it pull data from Notion or other services?
Yes, if the service is connected in the OpenDesign daemon. The agent lists connectors, then uses read-only tools, such as a Notion search, to find source material. It does not ask for connector secrets.
Why won't my dashboard show my numbers, or why are there {{ }} tokens on the page?
The skill's template uses a fixed binding format. If hydration fails, the raw template ships with visible tokens. Check that bindings use data paths, and that repeated lists use data-od-repeat. Scripts are stripped from previews, so loops cannot be written in JavaScript.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
Use live-artifact if you are in the OpenDesign environment and want dashboards or reports that stay current as data changes, with source notes. Pick a static page generator or a plain HTML template if you only need a one-off design, or if you cannot run scripts and network access in your setup.
Download the skill