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/Adityaraj0421/naksha-studioWrote 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/adityaraj0421/naksha-studio/design-compare)<a href="https://agentmods.dev/commands/adityaraj0421/naksha-studio/design-compare"><img src="https://agentmods.dev/badge/commands/adityaraj0421/naksha-studio/design-compare.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.00032 | $0.01264 |
| Opus 5 | $0.00016 | $0.00632 |
| Sonnet 5 | $0.00006 | $0.00253 |
| Haiku 4.5 | $0.00003 | $0.00126 |
Grade A, and why
design-compare 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 8d 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.
How it starts
The opening of the file, as written. The whole thing — 159 lines — stays where its author put it; the contents beside it link to each section on GitHub.
/design-compare
Step 1 — Parse Arguments
$ARGUMENTS may be one of:
- Two bare domains:
stripe.com canva.com - Two full URLs:
https://stripe.com https://canva.com - Mixed:
stripe.com https://canva.com - One URL only → ask the user for the second before proceeding
- Empty → ask the user for both URLs before proceeding
Normalize each value: if it doesn't start with http:// or https://, prepend https://.
Store as URL1 and URL2.
Step 2 — Capture Site 1 (URL1)
-
Resize viewport to 1440×900 (desktop):
mcp__plugin_playwright_playwright__browser_resize→ width: 1440, height: 900
-
Navigate to URL1:
mcp__plugin_playwright_playwright__browser_navigate→ url: URL1
-
Take desktop screenshot:
mcp__plugin_playwright_playwright__browser_take_screenshot- Label this: site1-desktop
-
Resize viewport to 390×844 (mobile):
mcp__plugin_playwright_playwright__browser_resize→ width: 390, height: 844
-
Take mobile screenshot:
mcp__plugin_playwright_playwright__browser_take_screenshot- Label this: site1-mobile
-
Take accessibility snapshot (to read nav links, headings, landmark structure):
mcp__plugin_playwright_playwright__browser_snapshot- Label this: site1-snapshot
Step 3 — Capture Site 2 (URL2)
Repeat the exact same sequence as Step 2 for URL2:
- Resize to 1440×900
- Navigate to URL2
- Desktop screenshot → site2-desktop
- Resize to 390×844
- Mobile screenshot → site2-mobile
- Accessibility snapshot → site2-snapshot
Step 4 — Analyze with Vision
Examine all six captures (four screenshots + two snapshots). Evaluate each site across these dimensions:
Layout & Grid
- Header pattern (full-width / contained / transparent)
- Hero / above-the-fold treatment
- Content columns and card grid density
- Footer structure
Color System
- Primary brand color(s)
- Secondary / accent colors
- Background tone (stark white / off-white / dark / gradient)
- Text color hierarchy (H1 → body → muted)
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.
- 8d ago First seen · 159 lines · 32 tokens per session scan A a940d0889e6c
design-compare is a command published in the GitHub repository Adityaraj0421/naksha-studio (316 stars, last pushed 2mo ago), licensed MIT. It adds 32 tokens to every session and 1,264 once invoked, about $0.0002 per session on Opus 5. 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
brand
Generate a full editorial brand-guidelines book for any URL. 14 chapters covering brand essence/archetype, colour, typography, spacing, shape, iconography, motion, components, voice, accessibility, tokens, and how-to-use guidance. Print-ready, dark-mode toggle, hand-off-ready single HTML.
theme-swap
Recolour an extracted site's design around a new brand primary. OKLCH hue rotation preserves perceptual lightness — neutrals, type, spacing, and motion stay untouched. Side-by-side HTML preview + recoloured tokens (DTCG, Tailwind, shadcn, Figma).
dna
Place a design in the measured design space — nearest systems, per-axis percentiles, outliers.
extract
Extract the complete design language from a URL — DTCG tokens, Tailwind, Figma vars, motion, voice, components.
fidelity
Measure how faithfully a clone reproduces a site — pixel-diff plus motion-fidelity into one 0-100 score, a letter grade, a ranked correction plan, and a shareable card.
pack
Bundle every designlang output (DTCG tokens, Tailwind, shadcn, Figma vars, motion, anatomy, Storybook, prompts) into one polished design-system directory ready to zip and ship.