vibespot 0.9.2 → 0.9.3
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.
- package/assets/extraction-prompt.md +49 -0
- package/dist/index.js +152 -122
- package/dist/index.js.map +1 -1
- package/package.json +8 -1
- package/ui/code-editor.js +393 -0
- package/ui/dashboard.js +152 -0
- package/ui/dialog.js +136 -0
- package/ui/index.html +38 -1
- package/ui/styles.css +276 -4
- package/ui/vendor/codemirror-bundle.global.js +24 -0
- package/ui/vendor/marked.umd.js +74 -0
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
You are a design system analyst. Given the CSS, HTML templates, and field definitions of a HubSpot CMS theme, extract a comprehensive design system document.
|
|
2
|
+
|
|
3
|
+
Output a markdown document with these sections. Be specific — include actual values, not vague descriptions.
|
|
4
|
+
|
|
5
|
+
## Color Palette
|
|
6
|
+
List all colors used in the theme with their roles:
|
|
7
|
+
- Primary, secondary, accent colors (hex values)
|
|
8
|
+
- Background colors (light/dark sections)
|
|
9
|
+
- Text colors (headings, body, muted)
|
|
10
|
+
- Border/divider colors
|
|
11
|
+
- Button colors (default, hover, CTA variants)
|
|
12
|
+
|
|
13
|
+
## Typography
|
|
14
|
+
- Font families (headings, body, monospace) with full fallback stacks
|
|
15
|
+
- Font size scale (h1 through body/small, in px or rem)
|
|
16
|
+
- Font weights used and where
|
|
17
|
+
- Line heights
|
|
18
|
+
- Letter spacing if customized
|
|
19
|
+
|
|
20
|
+
## Spacing & Layout
|
|
21
|
+
- Section padding (top/bottom, mobile vs desktop)
|
|
22
|
+
- Container max-width
|
|
23
|
+
- Grid system (columns, gaps)
|
|
24
|
+
- Common spacing values (margins between elements)
|
|
25
|
+
|
|
26
|
+
## Component Patterns
|
|
27
|
+
For each distinct component pattern found:
|
|
28
|
+
- **Buttons**: styles, sizes, border-radius, hover effects
|
|
29
|
+
- **Cards**: layout, shadow, border-radius, padding
|
|
30
|
+
- **Section layouts**: full-width vs contained, background patterns
|
|
31
|
+
- **Navigation**: style, mobile behavior
|
|
32
|
+
- **Forms**: input styles, labels, validation
|
|
33
|
+
- **Lists/grids**: layout patterns, responsive behavior
|
|
34
|
+
|
|
35
|
+
## CSS Custom Properties
|
|
36
|
+
List all CSS custom properties (--var-name: value) defined in the theme. These are the design tokens that new modules should reuse.
|
|
37
|
+
|
|
38
|
+
## Content Patterns
|
|
39
|
+
- Heading style (sentence case, title case, etc.)
|
|
40
|
+
- CTA language patterns (action verbs used)
|
|
41
|
+
- Content density (minimal/moderate/dense)
|
|
42
|
+
- Section narrative flow (common module sequence)
|
|
43
|
+
|
|
44
|
+
## Animation & Interaction
|
|
45
|
+
- Scroll animations (classes, timing, easing)
|
|
46
|
+
- Hover effects
|
|
47
|
+
- Transitions
|
|
48
|
+
|
|
49
|
+
Be precise and actionable. A developer should be able to read this document and create new modules that are visually indistinguishable from the original theme.
|