Skills for Real Engineers. Straight from my .agents directory.
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
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)
1<!-- generated:curated-entry -->23Show an Open Design artifact in the browser preview.45Request: "$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?")67**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?").1314| 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
- ▸od-deck-deck-guizang-editorial
- ▸od-deck-deck-open-slide-canvas
- ▸od-deck-deck-swiss-international
- ▸od-deck-guizang-ppt
- ▸od-deck-ppt-keynote
- ▸od-prototype-article-magazine
- ▸od-prototype-card-twitter
- ▸od-prototype-card-xiaohongshu
- ▸od-prototype-data-report
- ▸od-prototype-doc-kami-parchment
- ▸od-prototype-mockup-device-3d
- ▸od-prototype-poster-hero
Similar skill repositories
Public repository for Agent Skills
An AI skill that provides design intelligence for building professional UI/UX across multiple platforms.
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
Production-grade engineering skills for AI coding agents.
Agent skills that give coding agents taste: art direction, reference images and a browser check instead of generic AI pages
