preview
Open a brand's catalog detail page in your browser.
Synopsis
design-md preview <slug>Description
Open a brand’s catalog page at webdesignhot.com/design.md/<slug>/ in your default browser. The page shows the full token bundle (colors, typography, radii, spacing, shadows, components) plus the prose explanation — visual theme, color roles, voice, component rules, and more.
The command uses the platform’s native browser launcher (open on macOS, cmd /c start on Windows, xdg-open on Linux). If the browser fails to launch, the URL is printed to stderr so you can open it manually.
Options
No flags. The command takes only a slug argument.
Slug validation
The slug must:
- Start with a lowercase letter or digit
- Contain only lowercase letters, digits, and hyphens
- Be 1–81 characters long
If the slug is invalid, the command prints usage and exits with code 2.
design-md preview stripe # ✓ Valid
design-md preview linear # ✓ Valid
design-md preview Stripe # ✗ Capital letters not allowed
design-md preview stripe-color # ✓ ValidExamples
Open Stripe’s catalog page
npx @webdesignhot/design-md preview stripeOutput:
→ Opening https://webdesignhot.com/design.md/stripe/Your browser opens to the Stripe catalog page showing tokens and full design guide.
Open Linear’s page
npx @webdesignhot/design-md preview linearManual fallback
If your browser doesn’t launch automatically, the command prints the URL:
→ Opening https://webdesignhot.com/design.md/figma/
Could not launch browser. Open manually:
https://webdesignhot.com/design.md/figma/Copy and paste the URL into your browser address bar.
Use cases
- Browse tokens before downloading — see the full token set and prose guide online before running
add - Share a catalog entry — send a teammate the link
- Reference while coding — keep the page open in a browser tab alongside your editor
- Compare brands — open multiple tabs side by side to study differences