loopwind 0.9.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (245) hide show
  1. package/FONTS.md +156 -0
  2. package/HELPERS_DEMO.md +134 -0
  3. package/PROJECT_STRUCTURE.md +286 -0
  4. package/PUBLISHING.md +171 -0
  5. package/README.md +1020 -0
  6. package/REGISTRY_SETUP.md +427 -0
  7. package/SHADCN_INTEGRATION.md +269 -0
  8. package/TAILWIND.md +228 -0
  9. package/TEMPLATE_SOURCES.md +363 -0
  10. package/_dsgn/templates/banner-hero/banner-hero.tsx +57 -0
  11. package/_dsgn/templates/banner-hero/meta.json +14 -0
  12. package/_dsgn/templates/composite-card/meta.json +16 -0
  13. package/_dsgn/templates/composite-card/template.tsx +44 -0
  14. package/_dsgn/templates/image/meta.json +13 -0
  15. package/_dsgn/templates/image/template.tsx +28 -0
  16. package/_dsgn/templates/kitchen-sink/meta.json +13 -0
  17. package/_dsgn/templates/kitchen-sink/template.tsx +72 -0
  18. package/_dsgn/templates/qr-card/meta.json +14 -0
  19. package/_dsgn/templates/qr-card/template.tsx +39 -0
  20. package/_dsgn/templates/test-parent/child/meta.json +11 -0
  21. package/_dsgn/templates/test-parent/child/template.tsx +27 -0
  22. package/_dsgn/templates/test-parent/meta.json +12 -0
  23. package/_dsgn/templates/test-parent/template.tsx +30 -0
  24. package/_dsgn/templates/test-sibling/meta.json +11 -0
  25. package/_dsgn/templates/test-sibling/template.tsx +20 -0
  26. package/_dsgn/templates/video/.tmp/template-1763421345296.mjs +43 -0
  27. package/_dsgn/templates/video/.tmp/template-1763421362228.mjs +43 -0
  28. package/_dsgn/templates/video/.tmp/template-1763421377706.mjs +43 -0
  29. package/_dsgn/templates/video/meta.json +17 -0
  30. package/_dsgn/templates/video/template.tsx +48 -0
  31. package/dist/cli.d.ts +3 -0
  32. package/dist/cli.d.ts.map +1 -0
  33. package/dist/cli.js +70 -0
  34. package/dist/cli.js.map +1 -0
  35. package/dist/commands/add.d.ts +6 -0
  36. package/dist/commands/add.d.ts.map +1 -0
  37. package/dist/commands/add.js +86 -0
  38. package/dist/commands/add.js.map +1 -0
  39. package/dist/commands/default.d.ts +2 -0
  40. package/dist/commands/default.d.ts.map +1 -0
  41. package/dist/commands/default.js +69 -0
  42. package/dist/commands/default.js.map +1 -0
  43. package/dist/commands/init.d.ts +2 -0
  44. package/dist/commands/init.d.ts.map +1 -0
  45. package/dist/commands/init.js +75 -0
  46. package/dist/commands/init.js.map +1 -0
  47. package/dist/commands/list.d.ts +2 -0
  48. package/dist/commands/list.d.ts.map +1 -0
  49. package/dist/commands/list.js +83 -0
  50. package/dist/commands/list.js.map +1 -0
  51. package/dist/commands/preview.d.ts +3 -0
  52. package/dist/commands/preview.d.ts.map +1 -0
  53. package/dist/commands/preview.js +296 -0
  54. package/dist/commands/preview.js.map +1 -0
  55. package/dist/commands/render.d.ts +10 -0
  56. package/dist/commands/render.d.ts.map +1 -0
  57. package/dist/commands/render.js +204 -0
  58. package/dist/commands/render.js.map +1 -0
  59. package/dist/commands/validate.d.ts +2 -0
  60. package/dist/commands/validate.d.ts.map +1 -0
  61. package/dist/commands/validate.js +107 -0
  62. package/dist/commands/validate.js.map +1 -0
  63. package/dist/default-templates/AGENTS.md +229 -0
  64. package/dist/default-templates/image/meta.json +13 -0
  65. package/dist/default-templates/image/template.d.ts +20 -0
  66. package/dist/default-templates/image/template.d.ts.map +1 -0
  67. package/dist/default-templates/image/template.js +18 -0
  68. package/dist/default-templates/image/template.js.map +1 -0
  69. package/dist/default-templates/image/template.tsx +20 -0
  70. package/dist/default-templates/image-template/meta.json +13 -0
  71. package/dist/default-templates/image-template/template.tsx +19 -0
  72. package/dist/default-templates/kitchen-sink/meta.json +13 -0
  73. package/dist/default-templates/kitchen-sink/template.tsx +64 -0
  74. package/dist/default-templates/page/meta.json +17 -0
  75. package/dist/default-templates/page/template.tsx +37 -0
  76. package/dist/default-templates/video/meta.json +17 -0
  77. package/dist/default-templates/video/template.d.ts +26 -0
  78. package/dist/default-templates/video/template.d.ts.map +1 -0
  79. package/dist/default-templates/video/template.js +33 -0
  80. package/dist/default-templates/video/template.js.map +1 -0
  81. package/dist/default-templates/video/template.tsx +37 -0
  82. package/dist/default-templates/video-template/meta.json +17 -0
  83. package/dist/default-templates/video-template/template.tsx +36 -0
  84. package/dist/default-templates/website/meta.json +16 -0
  85. package/dist/default-templates/website/pages/home.tsx +17 -0
  86. package/dist/default-templates/website/parts/footer.tsx +17 -0
  87. package/dist/default-templates/website/parts/header.tsx +17 -0
  88. package/dist/default-templates/website/template.tsx +17 -0
  89. package/dist/default-templates/website-template/meta.json +16 -0
  90. package/dist/default-templates/website-template/pages/home.tsx +16 -0
  91. package/dist/default-templates/website-template/parts/footer.tsx +16 -0
  92. package/dist/default-templates/website-template/parts/header.tsx +16 -0
  93. package/dist/default-templates/website-template/template.tsx +16 -0
  94. package/dist/lib/config.d.ts +34 -0
  95. package/dist/lib/config.d.ts.map +1 -0
  96. package/dist/lib/config.js +248 -0
  97. package/dist/lib/config.js.map +1 -0
  98. package/dist/lib/constants.d.ts +7 -0
  99. package/dist/lib/constants.d.ts.map +1 -0
  100. package/dist/lib/constants.js +12 -0
  101. package/dist/lib/constants.js.map +1 -0
  102. package/dist/lib/helpers.d.ts +29 -0
  103. package/dist/lib/helpers.d.ts.map +1 -0
  104. package/dist/lib/helpers.js +159 -0
  105. package/dist/lib/helpers.js.map +1 -0
  106. package/dist/lib/installer.d.ts +51 -0
  107. package/dist/lib/installer.d.ts.map +1 -0
  108. package/dist/lib/installer.js +215 -0
  109. package/dist/lib/installer.js.map +1 -0
  110. package/dist/lib/renderer.d.ts +51 -0
  111. package/dist/lib/renderer.d.ts.map +1 -0
  112. package/dist/lib/renderer.js +524 -0
  113. package/dist/lib/renderer.js.map +1 -0
  114. package/dist/lib/tailwind-config-loader.d.ts +47 -0
  115. package/dist/lib/tailwind-config-loader.d.ts.map +1 -0
  116. package/dist/lib/tailwind-config-loader.js +432 -0
  117. package/dist/lib/tailwind-config-loader.js.map +1 -0
  118. package/dist/lib/tailwind-detector.d.ts +36 -0
  119. package/dist/lib/tailwind-detector.d.ts.map +1 -0
  120. package/dist/lib/tailwind-detector.js +156 -0
  121. package/dist/lib/tailwind-detector.js.map +1 -0
  122. package/dist/lib/tailwind.d.ts +8 -0
  123. package/dist/lib/tailwind.d.ts.map +1 -0
  124. package/dist/lib/tailwind.js +994 -0
  125. package/dist/lib/tailwind.js.map +1 -0
  126. package/dist/lib/template-validator.d.ts +22 -0
  127. package/dist/lib/template-validator.d.ts.map +1 -0
  128. package/dist/lib/template-validator.js +174 -0
  129. package/dist/lib/template-validator.js.map +1 -0
  130. package/dist/lib/utils.d.ts +44 -0
  131. package/dist/lib/utils.d.ts.map +1 -0
  132. package/dist/lib/utils.js +207 -0
  133. package/dist/lib/utils.js.map +1 -0
  134. package/dist/lib/version-check.d.ts +16 -0
  135. package/dist/lib/version-check.d.ts.map +1 -0
  136. package/dist/lib/version-check.js +88 -0
  137. package/dist/lib/version-check.js.map +1 -0
  138. package/dist/lib/video-renderer.d.ts +32 -0
  139. package/dist/lib/video-renderer.d.ts.map +1 -0
  140. package/dist/lib/video-renderer.js +226 -0
  141. package/dist/lib/video-renderer.js.map +1 -0
  142. package/dist/sdk/index.d.ts +58 -0
  143. package/dist/sdk/index.d.ts.map +1 -0
  144. package/dist/sdk/index.js +119 -0
  145. package/dist/sdk/index.js.map +1 -0
  146. package/dist/sdk/template.d.ts +40 -0
  147. package/dist/sdk/template.d.ts.map +1 -0
  148. package/dist/sdk/template.js +60 -0
  149. package/dist/sdk/template.js.map +1 -0
  150. package/dist/types/config.d.ts +62 -0
  151. package/dist/types/config.d.ts.map +1 -0
  152. package/dist/types/config.js +47 -0
  153. package/dist/types/config.js.map +1 -0
  154. package/dist/types/template.d.ts +79 -0
  155. package/dist/types/template.d.ts.map +1 -0
  156. package/dist/types/template.js +2 -0
  157. package/dist/types/template.js.map +1 -0
  158. package/examples/nextjs-api/README.md +180 -0
  159. package/examples/nextjs-api/package.json +21 -0
  160. package/examples/nextjs-api/pages/api/intro-video.ts +53 -0
  161. package/examples/nextjs-api/pages/api/og-image.ts +50 -0
  162. package/netlify.toml +13 -0
  163. package/package.json +84 -0
  164. package/patches/satori+0.18.3.patch +13 -0
  165. package/test-templates/TESTS.md +63 -0
  166. package/test-templates/_dsgn/templates/absolute-spin/meta.json +7 -0
  167. package/test-templates/_dsgn/templates/absolute-spin/template.tsx +16 -0
  168. package/test-templates/_dsgn/templates/animated-intro/.tmp/template-1763468771640.mjs +7 -0
  169. package/test-templates/_dsgn/templates/animated-intro/meta.json +10 -0
  170. package/test-templates/_dsgn/templates/animated-intro/template.tsx +23 -0
  171. package/test-templates/_dsgn/templates/centered-spin/.tmp/template-1763468525386.mjs +7 -0
  172. package/test-templates/_dsgn/templates/centered-spin/meta.json +7 -0
  173. package/test-templates/_dsgn/templates/centered-spin/template.tsx +11 -0
  174. package/test-templates/_dsgn/templates/composite/.tmp/template-1763468815645.mjs +7 -0
  175. package/test-templates/_dsgn/templates/composite/meta.json +9 -0
  176. package/test-templates/_dsgn/templates/composite/template.tsx +23 -0
  177. package/test-templates/_dsgn/templates/easing-test/.tmp/template-1763468824501.mjs +7 -0
  178. package/test-templates/_dsgn/templates/easing-test/meta.json +7 -0
  179. package/test-templates/_dsgn/templates/easing-test/template.tsx +47 -0
  180. package/test-templates/_dsgn/templates/minimal-spin/.tmp/template-1763466364336.mjs +10 -0
  181. package/test-templates/_dsgn/templates/minimal-spin/.tmp/template-1763466584319.mjs +10 -0
  182. package/test-templates/_dsgn/templates/minimal-spin/.tmp/template-1763466667797.mjs +10 -0
  183. package/test-templates/_dsgn/templates/minimal-spin/.tmp/template-1763466746504.mjs +10 -0
  184. package/test-templates/_dsgn/templates/minimal-spin/.tmp/template-1763466930225.mjs +10 -0
  185. package/test-templates/_dsgn/templates/minimal-spin/.tmp/template-1763467004552.mjs +10 -0
  186. package/test-templates/_dsgn/templates/minimal-spin/.tmp/template-1763467060334.mjs +10 -0
  187. package/test-templates/_dsgn/templates/minimal-spin/.tmp/template-1763467124493.mjs +10 -0
  188. package/test-templates/_dsgn/templates/minimal-spin/.tmp/template-1763467174690.mjs +10 -0
  189. package/test-templates/_dsgn/templates/minimal-spin/.tmp/template-1763467359134.mjs +10 -0
  190. package/test-templates/_dsgn/templates/minimal-spin/.tmp/template-1763467451928.mjs +10 -0
  191. package/test-templates/_dsgn/templates/minimal-spin/.tmp/template-1763467758275.mjs +10 -0
  192. package/test-templates/_dsgn/templates/minimal-spin/.tmp/template-1763467985201.mjs +10 -0
  193. package/test-templates/_dsgn/templates/minimal-spin/.tmp/template-1763468020563.mjs +10 -0
  194. package/test-templates/_dsgn/templates/minimal-spin/.tmp/template-1763468090428.mjs +10 -0
  195. package/test-templates/_dsgn/templates/minimal-spin/.tmp/template-1763468211036.mjs +10 -0
  196. package/test-templates/_dsgn/templates/minimal-spin/.tmp/template-1763468394057.mjs +10 -0
  197. package/test-templates/_dsgn/templates/minimal-spin/meta.json +7 -0
  198. package/test-templates/_dsgn/templates/minimal-spin/template.tsx +13 -0
  199. package/test-templates/_dsgn/templates/no-origin-spin/meta.json +7 -0
  200. package/test-templates/_dsgn/templates/no-origin-spin/template.tsx +10 -0
  201. package/test-templates/_dsgn/templates/opacity-test/meta.json +7 -0
  202. package/test-templates/_dsgn/templates/opacity-test/template.tsx +9 -0
  203. package/test-templates/_dsgn/templates/qr-code/.tmp/template-1763468758954.mjs +17 -0
  204. package/test-templates/_dsgn/templates/qr-code/.tmp/template-1763468815672.mjs +17 -0
  205. package/test-templates/_dsgn/templates/qr-code/meta.json +9 -0
  206. package/test-templates/_dsgn/templates/qr-code/template.tsx +20 -0
  207. package/test-templates/_dsgn/templates/rotation-abs-test/meta.json +7 -0
  208. package/test-templates/_dsgn/templates/rotation-abs-test/template.tsx +15 -0
  209. package/test-templates/_dsgn/templates/rotation-corner/meta.json +7 -0
  210. package/test-templates/_dsgn/templates/rotation-corner/template.tsx +12 -0
  211. package/test-templates/_dsgn/templates/rotation-test/meta.json +7 -0
  212. package/test-templates/_dsgn/templates/rotation-test/template.tsx +12 -0
  213. package/test-templates/_dsgn/templates/shake-test/meta.json +7 -0
  214. package/test-templates/_dsgn/templates/shake-test/template.tsx +12 -0
  215. package/test-templates/_dsgn/templates/static-image/.tmp/template-1763468746271.mjs +7 -0
  216. package/test-templates/_dsgn/templates/static-image/meta.json +9 -0
  217. package/test-templates/_dsgn/templates/static-image/template.tsx +19 -0
  218. package/test-templates/_dsgn/templates/translate-test/meta.json +7 -0
  219. package/test-templates/_dsgn/templates/translate-test/template.tsx +9 -0
  220. package/test-templates/_dsgn/templates/video-loops/.tmp/template-1763468793192.mjs +15 -0
  221. package/test-templates/_dsgn/templates/video-loops/meta.json +9 -0
  222. package/test-templates/_dsgn/templates/video-loops/template.tsx +39 -0
  223. package/test-templates/_dsgn/templates/wrapped-spin/meta.json +7 -0
  224. package/test-templates/_dsgn/templates/wrapped-spin/template.tsx +17 -0
  225. package/test-templates/compare-svgs.mjs +30 -0
  226. package/test-templates/convert-frames.mjs +15 -0
  227. package/test-templates/debug-rotation.mjs +25 -0
  228. package/test-templates/run-tests.sh +39 -0
  229. package/test-templates/test-sdk.mjs +115 -0
  230. package/website/.astro/settings.json +5 -0
  231. package/website/.astro/types.d.ts +1 -0
  232. package/website/README.md +112 -0
  233. package/website/astro.config.mjs +18 -0
  234. package/website/dist/_astro/fonts.DHdiHGBO.css +1 -0
  235. package/website/dist/fonts/index.html +193 -0
  236. package/website/dist/helpers/index.html +166 -0
  237. package/website/dist/images/index.html +314 -0
  238. package/website/dist/index.html +219 -0
  239. package/website/dist/llm.txt +2448 -0
  240. package/website/dist/styling/index.html +365 -0
  241. package/website/dist/templates/index.html +124 -0
  242. package/website/dist/video/index.html +636 -0
  243. package/website/package-lock.json +7606 -0
  244. package/website/package.json +23 -0
  245. package/website/public/robots.txt +5 -0
package/website/dist/index.html ADDED
@@ -0,0 +1,219 @@
1
+ <!DOCTYPE html><html lang="en"> <head><meta charset="UTF-8"><meta name="description" content="dsgn - Generate beautiful images from React components"><meta name="viewport" content="width=device-width"><link rel="icon" type="image/svg+xml" href="/favicon.svg"><meta name="generator" content="Astro v4.16.19"><title></title><link rel="stylesheet" href="/_astro/fonts.DHdiHGBO.css"></head> <body class="antialiased"> <div class="min-h-screen" data-astro-cid-mw7aashj> <!-- Sidebar --> <aside class="fixed top-0 left-0 h-screen w-64 border-r border-border bg-card overflow-y-auto z-10" data-astro-cid-mw7aashj> <div class="p-6" data-astro-cid-mw7aashj> <a href="/" class="block mb-8 no-underline" data-astro-cid-mw7aashj> <h1 class="text-3xl font-bold bg-gradient-to-r from-[var(--color-brand-from)] to-[var(--color-brand-to)] bg-clip-text text-transparent" data-astro-cid-mw7aashj>
2
+ _dsgn
3
+ </h1> </a> <nav data-astro-cid-mw7aashj> <ul class="space-y-1" data-astro-cid-mw7aashj> <li data-astro-cid-mw7aashj> <a href="/" class="block px-3 py-2 rounded-md text-sm transition-colors no-underline bg-accent text-accent-foreground font-medium" data-astro-cid-mw7aashj> Getting Started </a> </li><li data-astro-cid-mw7aashj> <a href="/templates" class="block px-3 py-2 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> Templates </a> </li><li data-astro-cid-mw7aashj> <a href="/images" class="block px-3 py-2 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> Images </a> </li><li data-astro-cid-mw7aashj> <a href="/video" class="block px-3 py-2 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> Video </a> </li><li data-astro-cid-mw7aashj> <a href="/helpers" class="block px-3 py-2 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> Helpers </a> </li><li data-astro-cid-mw7aashj> <a href="/styling" class="block px-3 py-2 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> Styling </a> </li><li data-astro-cid-mw7aashj> <a href="/fonts" class="block px-3 py-2 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> Fonts </a> </li><li data-astro-cid-mw7aashj> <a href="/llm.txt" class="block px-3 py-2 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> LLM Docs </a> </li> </ul> </nav> </div> </aside> <!-- Main content --> <main class="ml-64" data-astro-cid-mw7aashj> <div class="hero relative overflow-hidden bg-gradient-to-br from-background via-muted/30 to-background border-b border-border mb-8" data-astro-cid-bbe6dxrz> <div class="px-8 md:px-12 py-12 md:py-16" data-astro-cid-bbe6dxrz> <div class="max-w-3xl mb-4" data-astro-cid-bbe6dxrz> <!-- Badge -->
4
+ The shadcn/ui for design & marketing
5
+ </div> <!-- Title --> <h1 class="text-2xl md:text-4xl font-bold text-foreground mb-4 leading-tight text-balance" data-astro-cid-bbe6dxrz>
6
+ CLI-based Image, Video Generator for developers and AI Agents
7
+ </h1> <!-- Description --> <p class="text-base md:text-lg text-muted-foreground mb-6 leading-relaxed text-balance" data-astro-cid-bbe6dxrz>
8
+ Generate images and videos with React, Tailwind and Shadcn/ui classes.
9
+ Perfect for template-based marketing automation, social media, and dynamic
10
+ content generation.
11
+ </p> <!-- CTA Buttons --> <div class="flex flex-wrap gap-3" data-astro-cid-bbe6dxrz> <a href="#quick-start" class="inline-flex items-center gap-2 px-4 py-2 rounded-md bg-primary text-primary-foreground text-sm font-semibold hover:bg-primary/90 transition-colors no-underline" data-astro-cid-bbe6dxrz> <span data-astro-cid-bbe6dxrz>Get Started</span> <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" data-astro-cid-bbe6dxrz> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6" data-astro-cid-bbe6dxrz></path> </svg> </a> <a href="/templates" class="inline-flex items-center gap-2 px-4 py-2 rounded-md bg-muted text-foreground text-sm font-semibold hover:bg-muted/80 transition-colors no-underline" data-astro-cid-bbe6dxrz> <span data-astro-cid-bbe6dxrz>Browse Templates</span> </a> </div> </div> </div> <!-- Subtle gradient orbs --> <div class="absolute top-0 right-0 w-64 h-64 bg-primary/5 rounded-full blur-3xl -z-10" data-astro-cid-bbe6dxrz></div> <div class="absolute bottom-0 left-0 w-64 h-64 bg-accent/5 rounded-full blur-3xl -z-10" data-astro-cid-bbe6dxrz></div> <div class="p-12 pt-0" data-astro-cid-mw7aashj> <article class="home-prose prose-invert max-w-4xl" data-astro-cid-mw7aashj> <h2 id="image-templates">Image Templates</h2>
12
+ <pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8;overflow-x:auto" tabindex="0" data-language="tsx"><code><span class="line"><span style="color:#6A737D">// Social media card template</span></span>
13
+ <span class="line"><span style="color:#F97583">export</span><span style="color:#F97583"> default</span><span style="color:#F97583"> function</span><span style="color:#B392F0"> OGImage</span><span style="color:#E1E4E8">({ </span><span style="color:#FFAB70">tw</span><span style="color:#E1E4E8">, </span><span style="color:#FFAB70">image</span><span style="color:#E1E4E8">, </span><span style="color:#FFAB70">title</span><span style="color:#E1E4E8">, </span><span style="color:#FFAB70">description</span><span style="color:#E1E4E8">, </span><span style="color:#FFAB70">logo</span><span style="color:#E1E4E8"> }) {</span></span>
14
+ <span class="line"><span style="color:#F97583"> return</span><span style="color:#E1E4E8"> (</span></span>
15
+ <span class="line"><span style="color:#E1E4E8"> &lt;</span><span style="color:#85E89D">div</span><span style="color:#B392F0"> style</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span><span style="color:#B392F0">tw</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">&#39;flex w-full h-full bg-white&#39;</span><span style="color:#E1E4E8">)}&gt;</span></span>
16
+ <span class="line"><span style="color:#E1E4E8"> &lt;</span><span style="color:#85E89D">div</span><span style="color:#B392F0"> style</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span><span style="color:#B392F0">tw</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">&#39;flex-1 flex flex-col justify-between p-12&#39;</span><span style="color:#E1E4E8">)}&gt;</span></span>
17
+ <span class="line"><span style="color:#E1E4E8"> &lt;</span><span style="color:#85E89D">img</span><span style="color:#B392F0"> src</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span><span style="color:#B392F0">image</span><span style="color:#E1E4E8">(logo)} </span><span style="color:#B392F0">style</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span><span style="color:#B392F0">tw</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">&#39;h-12 w-auto&#39;</span><span style="color:#E1E4E8">)} /&gt;</span></span>
18
+ <span class="line"><span style="color:#E1E4E8"> </span></span>
19
+ <span class="line"><span style="color:#E1E4E8"> &lt;</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
20
+ <span class="line"><span style="color:#E1E4E8"> &lt;</span><span style="color:#85E89D">h1</span><span style="color:#B392F0"> style</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span><span style="color:#B392F0">tw</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">&#39;text-5xl font-bold text-gray-900 mb-4&#39;</span><span style="color:#E1E4E8">)}&gt;</span></span>
21
+ <span class="line"><span style="color:#E1E4E8"> {title}</span></span>
22
+ <span class="line"><span style="color:#E1E4E8"> &lt;/</span><span style="color:#85E89D">h1</span><span style="color:#E1E4E8">&gt;</span></span>
23
+ <span class="line"><span style="color:#E1E4E8"> &lt;</span><span style="color:#85E89D">p</span><span style="color:#B392F0"> style</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span><span style="color:#B392F0">tw</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">&#39;text-xl text-gray-600&#39;</span><span style="color:#E1E4E8">)}&gt;</span></span>
24
+ <span class="line"><span style="color:#E1E4E8"> {description}</span></span>
25
+ <span class="line"><span style="color:#E1E4E8"> &lt;/</span><span style="color:#85E89D">p</span><span style="color:#E1E4E8">&gt;</span></span>
26
+ <span class="line"><span style="color:#E1E4E8"> &lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
27
+ <span class="line"><span style="color:#E1E4E8"> </span></span>
28
+ <span class="line"><span style="color:#E1E4E8"> &lt;</span><span style="color:#85E89D">p</span><span style="color:#B392F0"> style</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span><span style="color:#B392F0">tw</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">&#39;text-gray-400&#39;</span><span style="color:#E1E4E8">)}&gt;yoursite.com&lt;/</span><span style="color:#85E89D">p</span><span style="color:#E1E4E8">&gt;</span></span>
29
+ <span class="line"><span style="color:#E1E4E8"> &lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
30
+ <span class="line"><span style="color:#E1E4E8"> </span></span>
31
+ <span class="line"><span style="color:#E1E4E8"> &lt;</span><span style="color:#85E89D">div</span><span style="color:#B392F0"> style</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span><span style="color:#B392F0">tw</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">&#39;flex-1&#39;</span><span style="color:#E1E4E8">)}&gt;</span></span>
32
+ <span class="line"><span style="color:#E1E4E8"> &lt;</span><span style="color:#85E89D">img</span><span style="color:#E1E4E8"> </span></span>
33
+ <span class="line"><span style="color:#B392F0"> src</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span><span style="color:#B392F0">image</span><span style="color:#E1E4E8">(featuredImage)} </span></span>
34
+ <span class="line"><span style="color:#B392F0"> style</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span><span style="color:#B392F0">tw</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">&#39;w-full h-full object-cover&#39;</span><span style="color:#E1E4E8">)}</span></span>
35
+ <span class="line"><span style="color:#E1E4E8"> /&gt;</span></span>
36
+ <span class="line"><span style="color:#E1E4E8"> &lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
37
+ <span class="line"><span style="color:#E1E4E8"> &lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
38
+ <span class="line"><span style="color:#E1E4E8"> );</span></span>
39
+ <span class="line"><span style="color:#E1E4E8">}</span></span>
40
+ <span class="line"></span></code></pre>
41
+ <p><strong>Render it:</strong></p>
42
+ <pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8;overflow-x:auto" tabindex="0" data-language="bash"><code><span class="line"><span style="color:#B392F0">dsgn</span><span style="color:#9ECBFF"> render</span><span style="color:#9ECBFF"> og-image</span><span style="color:#9ECBFF"> &#39;{&quot;title&quot;:&quot;Hello World&quot;,&quot;description&quot;:&quot;My awesome blog post&quot;}&#39;</span></span>
43
+ <span class="line"></span></code></pre>
44
+ <p><strong>Output:</strong> <code>og-image.png</code> (1200×630px) in your current directory</p>
45
+ <p><strong>Perfect for:</strong> Open Graph images, Twitter cards, blog headers, product cards, and quote graphics.</p>
46
+ <h2 id="video-templates">Video Templates</h2>
47
+ <pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8;overflow-x:auto" tabindex="0" data-language="tsx"><code><span class="line"><span style="color:#6A737D">// Animated intro video</span></span>
48
+ <span class="line"><span style="color:#F97583">export</span><span style="color:#F97583"> default</span><span style="color:#F97583"> function</span><span style="color:#B392F0"> VideoIntro</span><span style="color:#E1E4E8">({ </span><span style="color:#FFAB70">tw</span><span style="color:#E1E4E8">, </span><span style="color:#FFAB70">progress</span><span style="color:#E1E4E8">, </span><span style="color:#FFAB70">title</span><span style="color:#E1E4E8"> }) {</span></span>
49
+ <span class="line"><span style="color:#6A737D"> // Fade in animation</span></span>
50
+ <span class="line"><span style="color:#F97583"> const</span><span style="color:#79B8FF"> titleOpacity</span><span style="color:#F97583"> =</span><span style="color:#E1E4E8"> progress </span><span style="color:#F97583">&lt;</span><span style="color:#79B8FF"> 0.3</span><span style="color:#F97583"> ?</span><span style="color:#E1E4E8"> progress </span><span style="color:#F97583">/</span><span style="color:#79B8FF"> 0.3</span><span style="color:#F97583"> :</span><span style="color:#79B8FF"> 1</span><span style="color:#E1E4E8">;</span></span>
51
+ <span class="line"><span style="color:#E1E4E8"> </span></span>
52
+ <span class="line"><span style="color:#F97583"> return</span><span style="color:#E1E4E8"> (</span></span>
53
+ <span class="line"><span style="color:#E1E4E8"> &lt;</span><span style="color:#85E89D">div</span><span style="color:#B392F0"> style</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span><span style="color:#B392F0">tw</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">&#39;flex items-center justify-center w-full h-full bg-gradient-to-br from-blue-600 to-purple-700&#39;</span><span style="color:#E1E4E8">)}&gt;</span></span>
54
+ <span class="line"><span style="color:#E1E4E8"> &lt;</span><span style="color:#85E89D">h1</span><span style="color:#E1E4E8"> </span></span>
55
+ <span class="line"><span style="color:#B392F0"> style</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{{</span></span>
56
+ <span class="line"><span style="color:#F97583"> ...</span><span style="color:#B392F0">tw</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">&#39;text-8xl font-bold text-white&#39;</span><span style="color:#E1E4E8">),</span></span>
57
+ <span class="line"><span style="color:#E1E4E8"> opacity: titleOpacity</span></span>
58
+ <span class="line"><span style="color:#E1E4E8"> }}</span></span>
59
+ <span class="line"><span style="color:#E1E4E8"> &gt;</span></span>
60
+ <span class="line"><span style="color:#E1E4E8"> {title}</span></span>
61
+ <span class="line"><span style="color:#E1E4E8"> &lt;/</span><span style="color:#85E89D">h1</span><span style="color:#E1E4E8">&gt;</span></span>
62
+ <span class="line"><span style="color:#E1E4E8"> &lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
63
+ <span class="line"><span style="color:#E1E4E8"> );</span></span>
64
+ <span class="line"><span style="color:#E1E4E8">}</span></span>
65
+ <span class="line"></span></code></pre>
66
+ <p><strong>Render it:</strong></p>
67
+ <pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8;overflow-x:auto" tabindex="0" data-language="bash"><code><span class="line"><span style="color:#B392F0">dsgn</span><span style="color:#9ECBFF"> render</span><span style="color:#9ECBFF"> video-intro</span><span style="color:#9ECBFF"> &#39;{&quot;title&quot;:&quot;Welcome!&quot;}&#39;</span><span style="color:#79B8FF"> --out</span><span style="color:#9ECBFF"> intro.mp4</span></span>
68
+ <span class="line"></span></code></pre>
69
+ <p><strong>Output:</strong> <code>intro.mp4</code> (1920×1080px, 3 seconds @ 30fps) in your current directory</p>
70
+ <p><strong>Perfect for:</strong> Social media intros, animated logos, tutorial overlays, and product showcases.</p>
71
+ <h2 id="features">Features</h2>
72
+ <ul>
73
+ <li>🎨 <strong>shadcn/ui Design System</strong>: Beautiful, semantic colors out of the box (<code>text-primary</code>, <code>bg-card</code>, etc.)</li>
74
+ <li>✨ <strong>Template-based</strong>: Install design templates like you install UI components</li>
75
+ <li>🎨 <strong>Tailwind CSS Support</strong>: Style templates with Tailwind utility classes + opacity modifiers (<code>bg-primary/50</code>)</li>
76
+ <li>📱 <strong>Built-in Helpers</strong>: QR codes, image embedding, video backgrounds, template composition</li>
77
+ <li>✅ <strong>Smart Validation</strong>: Automatic prop and template validation with helpful error messages</li>
78
+ <li>🚀 <strong>Framework-agnostic</strong>: Works with Node, Bun, Deno, Laravel, Python, and more</li>
79
+ <li>🤖 <strong>Agent-friendly</strong>: Machine-readable metadata for LLMs</li>
80
+ <li>📦 <strong>Easy installation</strong>: <code>npx dsgn add template-name</code></li>
81
+ <li>🎬 <strong>Video support</strong>: Render animated videos with frame-by-frame control</li>
82
+ <li>⚡ <strong>Powered by Satori</strong>: Generate images from React + Tailwind</li>
83
+ </ul>
84
+ <h2 id="quick-start">Quick Start</h2>
85
+ <h3 id="installation">Installation</h3>
86
+ <pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8;overflow-x:auto" tabindex="0" data-language="bash"><code><span class="line"><span style="color:#B392F0">npm</span><span style="color:#9ECBFF"> install</span><span style="color:#79B8FF"> -g</span><span style="color:#9ECBFF"> dsgn</span></span>
87
+ <span class="line"></span></code></pre>
88
+ <p>Or use with npx:</p>
89
+ <pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8;overflow-x:auto" tabindex="0" data-language="bash"><code><span class="line"><span style="color:#B392F0">npx</span><span style="color:#9ECBFF"> dsgn</span><span style="color:#79B8FF"> --help</span></span>
90
+ <span class="line"></span></code></pre>
91
+ <h3 id="initialize-in-your-project">Initialize in Your Project</h3>
92
+ <p>Navigate to any project folder and run:</p>
93
+ <pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8;overflow-x:auto" tabindex="0" data-language="bash"><code><span class="line"><span style="color:#B392F0">dsgn</span><span style="color:#9ECBFF"> init</span></span>
94
+ <span class="line"></span></code></pre>
95
+ <p>This creates a <code>_dsgn/</code> folder where templates will be installed.</p>
96
+ <h3 id="install-a-template">Install a Template</h3>
97
+ <p>Templates can be installed from multiple sources:</p>
98
+ <h4 id="1-official-registry-coming-soon">1. Official Registry (Coming Soon)</h4>
99
+ <pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8;overflow-x:auto" tabindex="0" data-language="bash"><code><span class="line"><span style="color:#B392F0">dsgn</span><span style="color:#9ECBFF"> add</span><span style="color:#9ECBFF"> banner-hero</span></span>
100
+ <span class="line"><span style="color:#B392F0">dsgn</span><span style="color:#9ECBFF"> add</span><span style="color:#9ECBFF"> og-image</span><span style="color:#79B8FF"> --registry</span><span style="color:#9ECBFF"> https://custom-registry.com/r</span></span>
101
+ <span class="line"></span></code></pre>
102
+ <h4 id="2-github-repositories">2. GitHub Repositories</h4>
103
+ <pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8;overflow-x:auto" tabindex="0" data-language="bash"><code><span class="line"><span style="color:#6A737D"># From a GitHub repo (looks for template.json in repo root)</span></span>
104
+ <span class="line"><span style="color:#B392F0">dsgn</span><span style="color:#9ECBFF"> add</span><span style="color:#9ECBFF"> github:username/repo</span></span>
105
+ <span class="line"></span>
106
+ <span class="line"><span style="color:#6A737D"># From a specific path in the repo</span></span>
107
+ <span class="line"><span style="color:#B392F0">dsgn</span><span style="color:#9ECBFF"> add</span><span style="color:#9ECBFF"> github:username/repo/templates/banner-hero</span></span>
108
+ <span class="line"></span>
109
+ <span class="line"><span style="color:#6A737D"># From an organization</span></span>
110
+ <span class="line"><span style="color:#B392F0">dsgn</span><span style="color:#9ECBFF"> add</span><span style="color:#9ECBFF"> github:myorg/design-templates/social-media/og-image</span></span>
111
+ <span class="line"></span></code></pre>
112
+ <h4 id="3-direct-urls">3. Direct URLs</h4>
113
+ <pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8;overflow-x:auto" tabindex="0" data-language="bash"><code><span class="line"><span style="color:#6A737D"># Install from any publicly accessible URL</span></span>
114
+ <span class="line"><span style="color:#B392F0">dsgn</span><span style="color:#9ECBFF"> add</span><span style="color:#9ECBFF"> https://example.com/templates/my-template.json</span></span>
115
+ <span class="line"><span style="color:#B392F0">dsgn</span><span style="color:#9ECBFF"> add</span><span style="color:#9ECBFF"> https://cdn.example.com/templates/awesome-banner.json</span></span>
116
+ <span class="line"></span></code></pre>
117
+ <p><strong>Requirements:</strong></p>
118
+ <ul>
119
+ <li>URL must return JSON in the registry template format</li>
120
+ <li>Must be publicly accessible (no authentication)</li>
121
+ </ul>
122
+ <h4 id="4-local-filesystem">4. Local Filesystem</h4>
123
+ <pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8;overflow-x:auto" tabindex="0" data-language="bash"><code><span class="line"><span style="color:#6A737D"># Relative path</span></span>
124
+ <span class="line"><span style="color:#B392F0">dsgn</span><span style="color:#9ECBFF"> add</span><span style="color:#9ECBFF"> ./my-templates/banner-hero</span></span>
125
+ <span class="line"><span style="color:#B392F0">dsgn</span><span style="color:#9ECBFF"> add</span><span style="color:#9ECBFF"> ../shared-templates/product-card</span></span>
126
+ <span class="line"></span>
127
+ <span class="line"><span style="color:#6A737D"># Absolute path</span></span>
128
+ <span class="line"><span style="color:#B392F0">dsgn</span><span style="color:#9ECBFF"> add</span><span style="color:#9ECBFF"> /Users/you/templates/social-card</span></span>
129
+ <span class="line"></span></code></pre>
130
+ <p><strong>Use cases:</strong></p>
131
+ <ul>
132
+ <li>Development and testing</li>
133
+ <li>Private templates</li>
134
+ <li>Shared team templates (monorepo)</li>
135
+ <li>Before publishing to registry</li>
136
+ </ul>
137
+ <p>Templates are installed to: <code>_dsgn/templates/&lt;template&gt;/</code> (customizable in <code>dsgn.json</code>)</p>
138
+ <p><strong>Benefits:</strong></p>
139
+ <ul>
140
+ <li>Templates are local to your project (like npm packages)</li>
141
+ <li>Different projects can use different template versions</li>
142
+ <li>Version controlled with your project</li>
143
+ <li>Easy to share within your team</li>
144
+ <li>Works offline once installed</li>
145
+ </ul>
146
+ <h3 id="render-an-image">Render an Image</h3>
147
+ <pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8;overflow-x:auto" tabindex="0" data-language="bash"><code><span class="line"><span style="color:#B392F0">dsgn</span><span style="color:#9ECBFF"> render</span><span style="color:#9ECBFF"> banner-hero</span><span style="color:#9ECBFF"> &#39;{&quot;title&quot;:&quot;Hello World&quot;,&quot;subtitle&quot;:&quot;Built with dsgn&quot;}&#39;</span></span>
148
+ <span class="line"></span></code></pre>
149
+ <p>Output: <code>banner-hero.png</code> (1600x900px)</p>
150
+ <p>You can also use a props file:</p>
151
+ <pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8;overflow-x:auto" tabindex="0" data-language="bash"><code><span class="line"><span style="color:#B392F0">dsgn</span><span style="color:#9ECBFF"> render</span><span style="color:#9ECBFF"> banner-hero</span><span style="color:#9ECBFF"> props.json</span></span>
152
+ <span class="line"></span></code></pre>
153
+ <h2 id="commands">Commands</h2>
154
+ <h3 id="dsgn-add-source"><code>dsgn add &lt;source&gt;</code></h3>
155
+ <p>Install a template from various sources:</p>
156
+ <pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8;overflow-x:auto" tabindex="0" data-language="bash"><code><span class="line"><span style="color:#6A737D"># From registry</span></span>
157
+ <span class="line"><span style="color:#B392F0">dsgn</span><span style="color:#9ECBFF"> add</span><span style="color:#9ECBFF"> banner-hero</span></span>
158
+ <span class="line"></span>
159
+ <span class="line"><span style="color:#6A737D"># From GitHub</span></span>
160
+ <span class="line"><span style="color:#B392F0">dsgn</span><span style="color:#9ECBFF"> add</span><span style="color:#9ECBFF"> github:username/repo/path/to/template</span></span>
161
+ <span class="line"></span>
162
+ <span class="line"><span style="color:#6A737D"># From URL</span></span>
163
+ <span class="line"><span style="color:#B392F0">dsgn</span><span style="color:#9ECBFF"> add</span><span style="color:#9ECBFF"> https://example.com/my-template.json</span></span>
164
+ <span class="line"></span>
165
+ <span class="line"><span style="color:#6A737D"># From local path</span></span>
166
+ <span class="line"><span style="color:#B392F0">dsgn</span><span style="color:#9ECBFF"> add</span><span style="color:#9ECBFF"> ./my-templates/custom-banner</span></span>
167
+ <span class="line"></span></code></pre>
168
+ <h3 id="dsgn-list"><code>dsgn list</code></h3>
169
+ <p>List all installed templates:</p>
170
+ <pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8;overflow-x:auto" tabindex="0" data-language="bash"><code><span class="line"><span style="color:#B392F0">dsgn</span><span style="color:#9ECBFF"> list</span></span>
171
+ <span class="line"></span></code></pre>
172
+ <h3 id="dsgn-render-template-props-options"><code>dsgn render &lt;template&gt; &lt;props&gt; [options]</code></h3>
173
+ <p>Render an image or video:</p>
174
+ <pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8;overflow-x:auto" tabindex="0" data-language="bash"><code><span class="line"><span style="color:#6A737D"># Image with inline props</span></span>
175
+ <span class="line"><span style="color:#B392F0">dsgn</span><span style="color:#9ECBFF"> render</span><span style="color:#9ECBFF"> banner-hero</span><span style="color:#9ECBFF"> &#39;{&quot;title&quot;:&quot;Hello World&quot;}&#39;</span></span>
176
+ <span class="line"></span>
177
+ <span class="line"><span style="color:#6A737D"># Video with inline props</span></span>
178
+ <span class="line"><span style="color:#B392F0">dsgn</span><span style="color:#9ECBFF"> render</span><span style="color:#9ECBFF"> video-intro</span><span style="color:#9ECBFF"> &#39;{&quot;title&quot;:&quot;Welcome&quot;}&#39;</span><span style="color:#79B8FF"> --out</span><span style="color:#9ECBFF"> intro.mp4</span></span>
179
+ <span class="line"></span>
180
+ <span class="line"><span style="color:#6A737D"># Using a props file</span></span>
181
+ <span class="line"><span style="color:#B392F0">dsgn</span><span style="color:#9ECBFF"> render</span><span style="color:#9ECBFF"> banner-hero</span><span style="color:#9ECBFF"> props.json</span></span>
182
+ <span class="line"></span>
183
+ <span class="line"><span style="color:#6A737D"># Custom output</span></span>
184
+ <span class="line"><span style="color:#B392F0">dsgn</span><span style="color:#9ECBFF"> render</span><span style="color:#9ECBFF"> banner-hero</span><span style="color:#9ECBFF"> &#39;{&quot;title&quot;:&quot;Hello&quot;}&#39;</span><span style="color:#79B8FF"> --out</span><span style="color:#9ECBFF"> custom-name.png</span></span>
185
+ <span class="line"></span>
186
+ <span class="line"><span style="color:#6A737D"># Different format</span></span>
187
+ <span class="line"><span style="color:#B392F0">dsgn</span><span style="color:#9ECBFF"> render</span><span style="color:#9ECBFF"> banner-hero</span><span style="color:#9ECBFF"> &#39;{&quot;title&quot;:&quot;Hello&quot;}&#39;</span><span style="color:#79B8FF"> --format</span><span style="color:#9ECBFF"> jpeg</span></span>
188
+ <span class="line"></span></code></pre>
189
+ <p>Options:</p>
190
+ <ul>
191
+ <li><code>--out, -o</code> - Output filename (default: <code>&lt;template&gt;.&lt;ext&gt;</code>)</li>
192
+ <li><code>--format</code> - Output format: <code>png</code>, <code>jpeg</code>, <code>svg</code> (images only)</li>
193
+ <li><code>--quality</code> - JPEG quality 1-100 (default: 92)</li>
194
+ </ul>
195
+ <h3 id="dsgn-validate-template"><code>dsgn validate &lt;template&gt;</code></h3>
196
+ <p>Validate a template:</p>
197
+ <pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8;overflow-x:auto" tabindex="0" data-language="bash"><code><span class="line"><span style="color:#B392F0">dsgn</span><span style="color:#9ECBFF"> validate</span><span style="color:#9ECBFF"> banner-hero</span></span>
198
+ <span class="line"></span></code></pre>
199
+ <p>Checks:</p>
200
+ <ul>
201
+ <li>Template file exists and is valid React</li>
202
+ <li><code>meta.json</code> exists and is valid</li>
203
+ <li>Required props are defined</li>
204
+ <li>Fonts exist (if specified)</li>
205
+ </ul>
206
+ <h3 id="dsgn-init"><code>dsgn init</code></h3>
207
+ <p>Initialize dsgn in a project:</p>
208
+ <pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8;overflow-x:auto" tabindex="0" data-language="bash"><code><span class="line"><span style="color:#B392F0">dsgn</span><span style="color:#9ECBFF"> init</span></span>
209
+ <span class="line"></span></code></pre>
210
+ <p>Creates <code>dsgn.json</code> configuration file.</p>
211
+ <h2 id="next-steps">Next Steps</h2>
212
+ <ul>
213
+ <li><a href="/templates">Learn about Templates</a></li>
214
+ <li><a href="/images">Image Rendering</a></li>
215
+ <li><a href="/video">Video Rendering</a></li>
216
+ <li><a href="/helpers">Helpers (QR, Template Composition)</a></li>
217
+ <li><a href="/styling">Styling with Tailwind &amp; shadcn/ui</a></li>
218
+ <li><a href="/fonts">Custom Fonts</a></li>
219
+ </ul> </article> </div> </main> </div> </body></html>