Tooluck logoTooluck
SKILL.md

open-design-preview

Agent skill fromfeimacode/open-design-agent-kit

Open an Open Design artifact in a live browser preview, where you can see it update as it changes, click elements to comment on them, and compare check screenshots before and after — use whenever the user asks to see, show, preview or open an Open Design artifact, or wants to comment on one visually

How to install open-design-preview

install open-design-preview
# install the open-design-agent-kit pack with the skills CLI
npx skills add feimacode/open-design-agent-kit

# or add only this skill to Claude Code: copy the folder

packages/claude-plugin-local/skills/open-design-preview/

# into

~/.claude/skills/open-design-preview/ (all projects)

.claude/skills/open-design-preview/ (one project)

packages/claude-plugin-local/skills/open-design-preview/SKILL.md

MITFull file
1<!-- generated:curated-entry -->
2
3Show an Open Design artifact in the browser preview.
4
5Request: "$ARGUMENTS" — or, if that is empty, the user's request in this conversation (if it isn't clear, ask the user: "Which design should the preview show?")
6
7**How to talk to the user.** Many people using Open Design don't write code, so:
8- Use the user's own words. If they say "artifact", "design tokens" or give a file path, use those terms back; otherwise use the plain words below.
9- Keep the machinery out of replies: no tool names, no ids like `od:prototype:poster-hero`, no internal files (`.artifact.json`, `.comments.json`, `config.json`), and not the words "register", "manifest", "sidecar", "entry" or "surface", unless the user used them first.
10- Explain a print term the first time it comes up, in one short clause, and not again.
11- Say where a file is the way the user would find it ("in your Open Design folder, under seed-swap-flyer"). Give a raw path only where the user can click it (Claude Code, Claude Desktop's Code tab, VS Code) or asks for it.
12- End each reply that finishes a step with one line on what they can do next, with at most two options ("Want it in Instagram sizes too, or is it ready to print?").
13
14| Instead of | Say |
15|---|---|
16| artifact, entry, registered | your design, saved |
17| design system, active design system | your style (the first time: "a saved style: colours, fonts and spacing") |
18…

Excerpt shown under the repository's MIT license.

More skills in open-design-agent-kit

Keep exploring

Similar skill repositories

thedotmack /

claude-mem
116k

Persistent Context Across Sessions for Every Agent – Captures everything your agent does during sessions, compresses it with AI, and injects relevant context back into future sessions. Works with Claude Code, OpenClaw, Codex, Gemini, Hermes, Copilot, OpenCode + More

CCCXGHGM+135 skills

Leonxlnx /

taste-skill
113k

Agent skills that give coding agents taste: art direction, reference images and a browser check instead of generic AI pages

CCCXCU1 skill

Newsletter

Join the Community

Subscribe to our newsletter for the latest news and updates