Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
git clone --depth 1 https://github.com/hoshikitsunoda/figma-plugins-vibe-coding-templateWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/commands/hoshikitsunoda/figma-plugins-vibe-coding-template/preview-ui)<a href="https://agentmods.dev/commands/hoshikitsunoda/figma-plugins-vibe-coding-template/preview-ui"><img src="https://agentmods.dev/badge/commands/hoshikitsunoda/figma-plugins-vibe-coding-template/preview-ui.svg" alt="Measured on agentmods" height="20"></a>What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00000 | $0.00306 |
| Opus 5 | $0.00000 | $0.00153 |
| Sonnet 5 | $0.00000 | $0.00061 |
| Haiku 4.5 | $0.00000 | $0.00031 |
Grade A, and why
preview-ui scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 7d ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
What it actually says
Starts a browser preview of the plugin UI for faster iteration.
What it does:
- Starts Vite dev server (
pnpm dev) - Opens the UI in your browser with hot-reload
- Lets you iterate on styling and layout without opening Figma
Usage: /preview_ui
What works in preview:
- UI layout and styling
- Component rendering
- React state and interactions
- Hot-reload on save
What doesn't work:
figma.*API calls (no Figma context)- Messages to/from plugin (will fail silently)
- Selection data (won't populate)
- Any Figma operations
Tip: Use mock data in your components to test different states during preview.
Steps
-
Start the dev server
- Run
pnpm devin background - Wait for server to start (usually shows "Local: http://localhost:5173")
- Run
-
Tell user how to access it
- Provide the URL (typically http://localhost:5173)
- Explain what will/won't work
- Mention hot-reload: changes appear instantly on save
-
Explain how to stop
- Tell user: "Press Ctrl+C in the terminal to stop the preview server"
- Or they can close the terminal
Note: The preview shows the UI in isolation. To test full plugin functionality, build with pnpm build and load in Figma.
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 7d ago First seen · 42 lines · 0 tokens per session scan A d911bd8bf525
preview-ui is a command published in the GitHub repository hoshikitsunoda/figma-plugins-vibe-coding-template (21 stars, last pushed 8mo ago), licensed MIT. It costs nothing until one of its globs matches a file; then it loads 306 tokens. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.
Other commands, from other repositories
ui-flow-review
Review menus, HUD, navigation, and player flow from a UX perspective.
responsive-design-specialist
Use when a layout breaks between sizes. Arbitrary breakpoints, type that does not scale, images that blow out the grid, or a desktop design retrofitted onto mobile.
design-form
Design a form with the fewest fields that works, clear labels, and errors that help.
frontend-3d
You are an expert in 3D web development using Three.js, React Three Fiber, WebGL, and WebGPU. You create immersive 3D experiences for the web.
frontend-design
Read and follow the instructions in agents/frontend-design/design-all.md. Also read all referenced files in agents/frontend-design/reference/ as needed for the task.
get-component-source
The full TSX source of a component (append " demo" for its usage example).