ai-spector 0.4.0 → 0.4.2

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 (111) hide show
  1. package/README.md +10 -2
  2. package/assets/themes/airbnb/preview.html +281 -0
  3. package/assets/themes/airtable/preview.html +209 -0
  4. package/assets/themes/apple/preview.html +461 -0
  5. package/assets/themes/binance/preview.html +1013 -0
  6. package/assets/themes/bmw/preview.html +255 -0
  7. package/assets/themes/bugatti/preview.html +879 -0
  8. package/assets/themes/cal/preview.html +620 -0
  9. package/assets/themes/claude/preview.html +873 -0
  10. package/assets/themes/clay/preview.html +360 -0
  11. package/assets/themes/clickhouse/preview.html +833 -0
  12. package/assets/themes/cohere/preview.html +854 -0
  13. package/assets/themes/coinbase/preview.html +208 -0
  14. package/assets/themes/composio/preview.html +980 -0
  15. package/assets/themes/cursor/preview.html +428 -0
  16. package/assets/themes/elevenlabs/preview.html +296 -0
  17. package/assets/themes/expo/preview.html +580 -0
  18. package/assets/themes/ferrari/preview.html +1168 -0
  19. package/assets/themes/framer/preview.html +930 -0
  20. package/assets/themes/hashicorp/preview.html +1238 -0
  21. package/assets/themes/ibm/preview.html +473 -0
  22. package/assets/themes/intercom/preview.html +229 -0
  23. package/assets/themes/kraken/preview.html +213 -0
  24. package/assets/themes/lamborghini/preview.html +428 -0
  25. package/assets/themes/linear.app/preview.html +418 -0
  26. package/assets/themes/lovable/preview.html +393 -0
  27. package/assets/themes/meta/preview.html +656 -0
  28. package/assets/themes/minimax/preview.html +1293 -0
  29. package/assets/themes/mintlify/preview.html +443 -0
  30. package/assets/themes/miro/preview.html +218 -0
  31. package/assets/themes/mistral.ai/preview.html +850 -0
  32. package/assets/themes/mongodb/preview.html +304 -0
  33. package/assets/themes/nike/preview.html +1182 -0
  34. package/assets/themes/notion/preview.html +409 -0
  35. package/assets/themes/nvidia/preview.html +411 -0
  36. package/assets/themes/ollama/preview.html +725 -0
  37. package/assets/themes/opencode.ai/preview.html +402 -0
  38. package/assets/themes/pinterest/preview.html +277 -0
  39. package/assets/themes/playstation/preview.html +1125 -0
  40. package/assets/themes/posthog/preview.html +794 -0
  41. package/assets/themes/raycast/preview.html +735 -0
  42. package/assets/themes/renault/preview.html +652 -0
  43. package/assets/themes/replicate/preview.html +878 -0
  44. package/assets/themes/resend/preview.html +399 -0
  45. package/assets/themes/revolut/preview.html +278 -0
  46. package/assets/themes/runwayml/preview.html +712 -0
  47. package/assets/themes/sanity/preview.html +1180 -0
  48. package/assets/themes/sentry/preview.html +996 -0
  49. package/assets/themes/shopify/preview.html +611 -0
  50. package/assets/themes/spacex/preview.html +265 -0
  51. package/assets/themes/spotify/preview.html +275 -0
  52. package/assets/themes/stripe/preview.html +464 -0
  53. package/assets/themes/supabase/preview.html +1002 -0
  54. package/assets/themes/superhuman/preview.html +996 -0
  55. package/assets/themes/tesla/preview.html +971 -0
  56. package/assets/themes/theverge/preview.html +1143 -0
  57. package/assets/themes/together.ai/preview.html +944 -0
  58. package/assets/themes/uber/preview.html +1164 -0
  59. package/assets/themes/vercel/preview.html +412 -0
  60. package/assets/themes/voltagent/preview.html +813 -0
  61. package/assets/themes/warp/preview.html +580 -0
  62. package/assets/themes/webflow/preview.html +191 -0
  63. package/assets/themes/wired/preview.html +1049 -0
  64. package/assets/themes/wise/preview.html +274 -0
  65. package/assets/themes/x.ai/preview.html +452 -0
  66. package/assets/themes/zapier/preview.html +417 -0
  67. package/dist/cli.js +37 -1
  68. package/dist/cli.js.map +1 -1
  69. package/dist/commands/graph-visualize.d.ts.map +1 -1
  70. package/dist/commands/graph-visualize.js +1 -22
  71. package/dist/commands/graph-visualize.js.map +1 -1
  72. package/dist/commands/prototype.d.ts +19 -0
  73. package/dist/commands/prototype.d.ts.map +1 -1
  74. package/dist/commands/prototype.js +78 -3
  75. package/dist/commands/prototype.js.map +1 -1
  76. package/dist/prototype/config.d.ts +9 -1
  77. package/dist/prototype/config.d.ts.map +1 -1
  78. package/dist/prototype/config.js +29 -0
  79. package/dist/prototype/config.js.map +1 -1
  80. package/dist/prototype/htpasswd.d.ts +5 -0
  81. package/dist/prototype/htpasswd.d.ts.map +1 -0
  82. package/dist/prototype/htpasswd.js +33 -0
  83. package/dist/prototype/htpasswd.js.map +1 -0
  84. package/dist/prototype/theme-preview.d.ts +17 -0
  85. package/dist/prototype/theme-preview.d.ts.map +1 -0
  86. package/dist/prototype/theme-preview.js +73 -0
  87. package/dist/prototype/theme-preview.js.map +1 -0
  88. package/dist/prototype/types.d.ts +8 -0
  89. package/dist/prototype/types.d.ts.map +1 -1
  90. package/dist/prototype/validate.d.ts.map +1 -1
  91. package/dist/prototype/validate.js +19 -0
  92. package/dist/prototype/validate.js.map +1 -1
  93. package/dist/util/open-browser.d.ts +3 -0
  94. package/dist/util/open-browser.d.ts.map +1 -0
  95. package/dist/util/open-browser.js +24 -0
  96. package/dist/util/open-browser.js.map +1 -0
  97. package/package.json +4 -2
  98. package/scaffold/.ai-spector/.docflow/config/language.json +4 -0
  99. package/scaffold/cursor/WORKFLOW.md +2 -1
  100. package/scaffold/cursor/skills/_skill-router.md +1 -1
  101. package/scaffold/cursor/skills/ai-spector/references/generate-workflow.md +8 -0
  102. package/scaffold/cursor/skills/ai-spector/references/language-picker.md +70 -0
  103. package/scaffold/cursor/skills/ai-spector/references/project-conventions.md +13 -4
  104. package/scaffold/cursor/skills/ai-spector-generate-basic-design/SKILL.md +1 -0
  105. package/scaffold/cursor/skills/ai-spector-generate-detail-design/SKILL.md +1 -0
  106. package/scaffold/cursor/skills/ai-spector-generate-prototype/SKILL.md +13 -5
  107. package/scaffold/cursor/skills/ai-spector-generate-prototype/references/auth-picker.md +61 -0
  108. package/scaffold/cursor/skills/ai-spector-generate-prototype/references/runbook.md +32 -10
  109. package/scaffold/cursor/skills/ai-spector-generate-prototype/references/theme-picker.md +118 -0
  110. package/scaffold/cursor/skills/ai-spector-generate-srs/SKILL.md +1 -0
  111. package/scaffold/prototype/README.md +24 -3
package/assets/themes/webflow/preview.html ADDED
@@ -0,0 +1,191 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Design System Inspired by Webflow</title>
7
+ <link rel="preconnect" href="https://fonts.googleapis.com">
8
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
9
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
10
+ <style>
11
+ :root { --white:#fff; --black:#080808; --blue:#146ef5; --blue-400:#3b89ff; --purple:#7a3dff; --pink:#ed52cb; --green:#00d722; --orange:#ff6b00; --yellow:#ffae13; --red:#ee1d36; --gray:#5a5a5a; --gray-300:#ababab; --border:#d8d8d8; --font:'Inter',Arial,sans-serif; }
12
+ * { margin:0; padding:0; box-sizing:border-box; }
13
+ body { background:var(--white); color:var(--black); font-family:var(--font); font-size:16px; line-height:1.60; -webkit-font-smoothing:antialiased; }
14
+ .nav { position:sticky; top:0; z-index:100; display:flex; align-items:center; justify-content:space-between; padding:12px 24px; background:var(--white); border-bottom:1px solid var(--border); }
15
+ .nav-brand { font-size:14px; font-weight:600; color:var(--black); text-decoration:none; }
16
+ .nav-links { display:flex; gap:20px; list-style:none; }
17
+ .nav-links a { font-size:14px; font-weight:500; color:var(--gray); text-decoration:none; }
18
+ .nav-links a:hover { color:var(--blue); }
19
+ .nav-cta { display:inline-block; background:var(--blue); color:var(--white); padding:8px 16px; border-radius:4px; font-size:14px; font-weight:500; text-decoration:none; }
20
+ .hero { padding:80px 24px 64px; text-align:center; }
21
+ .hero h1 { font-size:64px; font-weight:600; line-height:1.04; letter-spacing:-0.8px; margin-bottom:16px; }
22
+ .hero h1 span { color:var(--blue); }
23
+ .hero p { font-size:20px; color:var(--gray); max-width:520px; margin:0 auto 32px; }
24
+ .hero-buttons { display:flex; gap:12px; justify-content:center; }
25
+ .btn-blue { display:inline-block; background:var(--blue); color:var(--white); padding:12px 24px; border-radius:4px; font-size:16px; font-weight:500; text-decoration:none; letter-spacing:-0.16px; transition:transform 0.2s; }
26
+ .btn-blue:hover { transform:translate(6px); }
27
+ .btn-outline { display:inline-block; background:var(--white); color:var(--black); padding:12px 24px; border-radius:4px; border:1px solid var(--border); font-size:16px; font-weight:500; text-decoration:none; transition:transform 0.2s; }
28
+ .btn-outline:hover { transform:translate(6px); }
29
+ .section { padding:48px 24px; max-width:1100px; margin:0 auto; }
30
+ .section-label { font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:1px; color:var(--gray-300); margin-bottom:8px; }
31
+ .section-title { font-size:56px; font-weight:600; line-height:1.04; margin-bottom:24px; }
32
+ .section-divider { border:none; border-top:1px solid var(--border); margin:0; }
33
+ .color-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(120px,1fr)); gap:8px; margin-bottom:16px; }
34
+ .color-swatch { border-radius:4px; overflow:hidden; border:1px solid var(--border); }
35
+ .color-swatch-block { height:48px; }
36
+ .color-swatch-info { padding:6px; }
37
+ .color-swatch-name { font-size:10px; font-weight:500; margin-bottom:1px; }
38
+ .color-swatch-hex { font-size:9px; color:var(--gray-300); font-family:monospace; }
39
+ .color-group-label { font-size:10px; font-weight:600; color:var(--gray); margin:12px 0 4px; text-transform:uppercase; letter-spacing:0.6px; }
40
+ .type-sample { margin-bottom:14px; padding-bottom:10px; border-bottom:1px solid rgba(216,216,216,0.5); }
41
+ .type-sample:last-child { border-bottom:none; }
42
+ .type-meta { font-size:8px; color:var(--gray-300); margin-top:2px; font-family:monospace; }
43
+ .button-row { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
44
+ .button-item { text-align:center; }
45
+ .button-label { font-size:8px; color:var(--gray-300); margin-top:4px; }
46
+ .card-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); gap:10px; }
47
+ .card { background:var(--white); border:1px solid var(--border); border-radius:8px; padding:16px; }
48
+ .card h3 { font-size:24px; font-weight:500; line-height:1.30; margin-bottom:6px; }
49
+ .card p { font-size:14px; color:var(--gray); }
50
+ .form-group { margin-bottom:10px; max-width:360px; }
51
+ .form-label { display:block; font-size:14px; font-weight:500; margin-bottom:3px; }
52
+ .form-input { width:100%; background:var(--white); color:var(--black); border:1px solid var(--border); padding:10px 12px; border-radius:4px; font-family:var(--font); font-size:16px; outline:none; }
53
+ .form-input:focus { border-color:var(--blue); box-shadow:0 0 0 1px var(--blue); }
54
+ .form-input--focus { border-color:var(--blue); box-shadow:0 0 0 1px var(--blue); }
55
+ .form-input--error { border-color:var(--red); }
56
+ .form-textarea { width:100%; min-height:60px; background:var(--white); color:var(--black); border:1px solid var(--border); padding:10px 12px; border-radius:4px; font-family:var(--font); font-size:16px; resize:vertical; outline:none; }
57
+ .form-state-label { font-size:8px; color:var(--gray-300); margin-top:2px; }
58
+ .spacing-row { display:flex; align-items:flex-end; gap:5px; flex-wrap:wrap; margin-bottom:10px; }
59
+ .spacing-item { text-align:center; }
60
+ .spacing-block { background:var(--blue); border-radius:2px; margin-bottom:2px; height:18px; opacity:0.5; }
61
+ .spacing-value { font-size:7px; color:var(--gray-300); font-family:monospace; }
62
+ .radius-row { display:flex; gap:8px; flex-wrap:wrap; }
63
+ .radius-item { text-align:center; }
64
+ .radius-box { width:40px; height:40px; background:rgba(20,110,245,0.1); border:1px solid var(--blue); margin-bottom:2px; }
65
+ .radius-label { font-size:7px; color:var(--gray-300); font-family:monospace; }
66
+ .elevation-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(160px,1fr)); gap:8px; }
67
+ .elevation-card { background:var(--white); border-radius:8px; padding:12px; text-align:center; }
68
+ .elevation-label { font-size:11px; font-weight:500; margin-bottom:2px; }
69
+ .elevation-desc { font-size:7px; color:var(--gray-300); font-family:monospace; }
70
+ .footer { padding:20px; text-align:center; background:var(--blue); color:rgba(255,255,255,0.7); font-size:10px; }
71
+ .footer a { color:var(--white); text-decoration:underline; }
72
+ @media (max-width:768px) { .hero h1 { font-size:40px; } .nav-links { display:none; } .section { padding:32px 16px; } .card-grid { grid-template-columns:1fr; } .section-title { font-size:32px; } }
73
+
74
+ /* getdesign.md nav additions */
75
+ .nav-left { display: flex; align-items: center; gap: 20px; }
76
+ .nav-brand-link,
77
+ .nav-brand-link:link,
78
+ .nav-brand-link:visited,
79
+ .nav-brand-link:hover,
80
+ .nav-brand-link:active { text-decoration: none; color: inherit; }
81
+ .nav-github,
82
+ .nav-github:link,
83
+ .nav-github:visited,
84
+ .nav-github:hover,
85
+ .nav-github:active {
86
+ display: inline-flex;
87
+ align-items: center;
88
+ gap: 6px;
89
+ font-size: 12px;
90
+ font-weight: 600;
91
+ color: inherit;
92
+ text-decoration: none;
93
+ padding: 5px 10px;
94
+ border: 1px solid rgba(128, 128, 128, 0.3);
95
+ border-radius: 6px;
96
+ opacity: 0.75;
97
+ transition: opacity 200ms ease, border-color 200ms ease;
98
+ font-family: inherit;
99
+ line-height: 1;
100
+ white-space: nowrap;
101
+ }
102
+ .nav-github:hover { opacity: 1; border-color: rgba(128, 128, 128, 0.55); }
103
+ .nav-github svg { display: block; flex-shrink: 0; }
104
+
105
+ /* getdesign.md nav centering */
106
+ .nav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
107
+ .nav > .nav-left { justify-self: start; }
108
+ .nav > .nav-links { justify-self: center; }
109
+ .nav > :last-child { justify-self: end; }
110
+ </style>
111
+ </head>
112
+ <body>
113
+ <nav class="nav"><div class="nav-left">
114
+ <a href="https://getdesign.md/" target="_blank" rel="noopener noreferrer" class="nav-brand-link">
115
+ <span class="nav-brand">getdesign.md</span>
116
+ </a>
117
+ <a class="nav-github" href="https://github.com/VoltAgent/awesome-design-md" target="_blank" rel="noopener noreferrer" aria-label="awesome-design-md on GitHub">
118
+ <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2 .37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"/></svg>
119
+ awesome-design-md
120
+ </a>
121
+ </div><ul class="nav-links"><li><a href="#colors">Colors</a></li><li><a href="#typography">Typography</a></li><li><a href="#buttons">Buttons</a></li><li><a href="#cards">Cards</a></li><li><a href="#forms">Forms</a></li></ul><a class="nav-cta" href="#">Get started</a></nav>
122
+ <section class="hero"><h1>Design System<br>Inspired by <span>Webflow</span></h1><p>Every color, font, and component — smarter sites start here.</p><div class="hero-buttons"><a class="btn-blue" href="#">Get started — it's free</a><a class="btn-outline" href="#">Contact sales</a></div></section>
123
+ <hr class="section-divider">
124
+ <section class="section" id="colors"><div class="section-label">01 / Colors</div><h2 class="section-title">Color Palette</h2>
125
+ <div class="color-group-label">Primary</div>
126
+ <div class="color-grid">
127
+ <div class="color-swatch"><div class="color-swatch-block" style="background:#080808"></div><div class="color-swatch-info"><div class="color-swatch-name">Near Black</div><div class="color-swatch-hex">#080808</div></div></div>
128
+ <div class="color-swatch"><div class="color-swatch-block" style="background:#146ef5"></div><div class="color-swatch-info"><div class="color-swatch-name">Webflow Blue</div><div class="color-swatch-hex">#146ef5</div></div></div>
129
+ <div class="color-swatch"><div class="color-swatch-block" style="background:#3b89ff"></div><div class="color-swatch-info"><div class="color-swatch-name">Blue 400</div><div class="color-swatch-hex">#3b89ff</div></div></div>
130
+ </div>
131
+ <div class="color-group-label">Secondary</div>
132
+ <div class="color-grid">
133
+ <div class="color-swatch"><div class="color-swatch-block" style="background:#7a3dff"></div><div class="color-swatch-info"><div class="color-swatch-name">Purple</div><div class="color-swatch-hex">#7a3dff</div></div></div>
134
+ <div class="color-swatch"><div class="color-swatch-block" style="background:#ed52cb"></div><div class="color-swatch-info"><div class="color-swatch-name">Pink</div><div class="color-swatch-hex">#ed52cb</div></div></div>
135
+ <div class="color-swatch"><div class="color-swatch-block" style="background:#00d722"></div><div class="color-swatch-info"><div class="color-swatch-name">Green</div><div class="color-swatch-hex">#00d722</div></div></div>
136
+ <div class="color-swatch"><div class="color-swatch-block" style="background:#ff6b00"></div><div class="color-swatch-info"><div class="color-swatch-name">Orange</div><div class="color-swatch-hex">#ff6b00</div></div></div>
137
+ <div class="color-swatch"><div class="color-swatch-block" style="background:#ffae13"></div><div class="color-swatch-info"><div class="color-swatch-name">Yellow</div><div class="color-swatch-hex">#ffae13</div></div></div>
138
+ <div class="color-swatch"><div class="color-swatch-block" style="background:#ee1d36"></div><div class="color-swatch-info"><div class="color-swatch-name">Red</div><div class="color-swatch-hex">#ee1d36</div></div></div>
139
+ </div>
140
+ <div class="color-group-label">Neutral</div>
141
+ <div class="color-grid">
142
+ <div class="color-swatch"><div class="color-swatch-block" style="background:#222222"></div><div class="color-swatch-info"><div class="color-swatch-name">Gray 800</div><div class="color-swatch-hex">#222222</div></div></div>
143
+ <div class="color-swatch"><div class="color-swatch-block" style="background:#363636"></div><div class="color-swatch-info"><div class="color-swatch-name">Gray 700</div><div class="color-swatch-hex">#363636</div></div></div>
144
+ <div class="color-swatch"><div class="color-swatch-block" style="background:#5a5a5a"></div><div class="color-swatch-info"><div class="color-swatch-name">Mid Gray</div><div class="color-swatch-hex">#5a5a5a</div></div></div>
145
+ <div class="color-swatch"><div class="color-swatch-block" style="background:#ababab"></div><div class="color-swatch-info"><div class="color-swatch-name">Gray 300</div><div class="color-swatch-hex">#ababab</div></div></div>
146
+ <div class="color-swatch"><div class="color-swatch-block" style="background:#d8d8d8"></div><div class="color-swatch-info"><div class="color-swatch-name">Border</div><div class="color-swatch-hex">#d8d8d8</div></div></div>
147
+ </div></section>
148
+ <hr class="section-divider">
149
+ <section class="section" id="typography"><div class="section-label">02 / Typography</div><h2 class="section-title">Typography</h2>
150
+ <div class="type-sample"><div style="font-size:64px; font-weight:600; line-height:1.04; letter-spacing:-0.8px;">Display Hero</div><div class="type-meta">WF Visual Sans — 80px / 600 / 1.04 / -0.8px</div></div>
151
+ <div class="type-sample"><div style="font-size:32px; font-weight:500; line-height:1.30;">Sub-heading</div><div class="type-meta">WF Visual Sans — 32px / 500 / 1.30</div></div>
152
+ <div class="type-sample"><div style="font-size:20px; font-weight:400; line-height:1.50; color:var(--gray);">Body — Smarter sites start here. Build your next project with the web platform.</div><div class="type-meta">WF Visual Sans — 20px / 400 / 1.50</div></div>
153
+ <div class="type-sample"><div style="font-size:16px; font-weight:500; line-height:1.60; letter-spacing:-0.16px;">Button Label</div><div class="type-meta">WF Visual Sans — 16px / 500 / 1.60 / -0.16px</div></div>
154
+ <div class="type-sample"><div style="font-size:15px; font-weight:500; line-height:1.30; text-transform:uppercase; letter-spacing:1.5px;">UPPERCASE LABEL</div><div class="type-meta">WF Visual Sans — 15px / 500 / uppercase / +1.5px</div></div>
155
+ <div class="type-sample"><div style="font-size:10px; font-weight:600; line-height:1.30; text-transform:uppercase; letter-spacing:1px; color:var(--gray-300);">MICRO LABEL</div><div class="type-meta">WF Visual Sans — 10px / 600 / uppercase / +1px</div></div>
156
+ </section>
157
+ <hr class="section-divider">
158
+ <section class="section" id="buttons"><div class="section-label">03 / Buttons</div><h2 class="section-title">Buttons</h2>
159
+ <div class="button-row">
160
+ <div class="button-item"><a class="btn-blue" href="#">Get started</a><div class="button-label">Primary Blue</div></div>
161
+ <div class="button-item"><a class="btn-outline" href="#">Contact</a><div class="button-label">Outlined</div></div>
162
+ <div class="button-item"><span style="display:inline-block; background:rgba(20,110,245,0.1); color:var(--blue); padding:3.2px 6px; border-radius:4px; font-size:12.8px; font-weight:550;">NEW</span><div class="button-label">Badge</div></div>
163
+ </div>
164
+ <p style="font-size:11px; color:var(--gray-300); margin-top:10px;">Hover to see translate(6px).</p>
165
+ </section>
166
+ <hr class="section-divider">
167
+ <section class="section" id="cards"><div class="section-label">04 / Cards</div><h2 class="section-title">Cards</h2>
168
+ <div class="card-grid">
169
+ <div class="card"><h3>Design</h3><p>Build visually with a flexible canvas and production-ready code output.</p></div>
170
+ <div class="card"><h3>CMS</h3><p>Create dynamic content with a powerful content management system.</p></div>
171
+ <div class="card"><h3>Interactions</h3><p>Craft complex animations without writing a single line of code.</p></div>
172
+ </div></section>
173
+ <hr class="section-divider">
174
+ <section class="section" id="forms"><div class="section-label">05 / Forms</div><h2 class="section-title">Forms</h2>
175
+ <div class="form-group"><label class="form-label">Email</label><input class="form-input" type="email" placeholder="you@company.com"><div class="form-state-label">Default</div></div>
176
+ <div class="form-group"><label class="form-label">Project</label><input class="form-input form-input--focus" type="text" value="My Website"><div class="form-state-label">Focus (blue ring)</div></div>
177
+ <div class="form-group"><label class="form-label">Domain</label><input class="form-input form-input--error" type="text" value="invalid"><div class="form-state-label">Error</div></div>
178
+ <div class="form-group"><label class="form-label">Description</label><textarea class="form-textarea" placeholder="Describe your project..."></textarea></div>
179
+ </section>
180
+ <hr class="section-divider">
181
+ <section class="section"><div class="section-label">06 / Spacing</div><h2 class="section-title">Spacing</h2>
182
+ <div class="spacing-row"><div class="spacing-item"><div class="spacing-block" style="width:4px"></div><div class="spacing-value">4</div></div><div class="spacing-item"><div class="spacing-block" style="width:8px"></div><div class="spacing-value">8</div></div><div class="spacing-item"><div class="spacing-block" style="width:12px"></div><div class="spacing-value">12</div></div><div class="spacing-item"><div class="spacing-block" style="width:16px"></div><div class="spacing-value">16</div></div><div class="spacing-item"><div class="spacing-block" style="width:24px"></div><div class="spacing-value">24</div></div></div></section>
183
+ <hr class="section-divider">
184
+ <section class="section"><div class="section-label">07 / Radius</div><h2 class="section-title">Radius</h2>
185
+ <div class="radius-row"><div class="radius-item"><div class="radius-box" style="border-radius:2px"></div><div class="radius-label">2px</div></div><div class="radius-item"><div class="radius-box" style="border-radius:4px"></div><div class="radius-label">4px</div></div><div class="radius-item"><div class="radius-box" style="border-radius:8px"></div><div class="radius-label">8px</div></div><div class="radius-item"><div class="radius-box" style="border-radius:50%; width:40px; height:40px;"></div><div class="radius-label">50%</div></div></div></section>
186
+ <hr class="section-divider">
187
+ <section class="section"><div class="section-label">08 / Elevation</div><h2 class="section-title">Depth</h2>
188
+ <div class="elevation-grid"><div class="elevation-card" style="border:1px solid var(--border);"><div class="elevation-label">Flat</div><div class="elevation-desc">Border only</div></div><div class="elevation-card" style="box-shadow:rgba(0,0,0,0.09) 0px 3px 7px, rgba(0,0,0,0.08) 0px 13px 13px, rgba(0,0,0,0.04) 0px 30px 18px;"><div class="elevation-label">5-Layer</div><div class="elevation-desc">Cascading shadow stack</div></div></div></section>
189
+ <footer class="footer">Maintained by <a href="https://github.com/VoltAgent/voltagent" target="_blank" rel="noopener noreferrer" style="text-decoration:none;"><img src="https://github.com/VoltAgent.png?size=32" alt="VoltAgent" width="14" height="14" style="border-radius:3px;vertical-align:-2px;margin-right:3px;">VoltAgent</a> team</footer>
190
+ </body>
191
+ </html>