designnn 0.2.0 → 0.3.0
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/dist/cli.js +249 -5
- package/package.json +1 -1
- package/public/app.js +146 -31
- package/public/index.html +79 -26
- package/public/style.css +421 -231
package/public/index.html
CHANGED
|
@@ -3,7 +3,8 @@
|
|
|
3
3
|
<head>
|
|
4
4
|
<meta charset="UTF-8" />
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
6
|
-
<title>DESIGNNN — Trend-driven Design Prompt Engine</title>
|
|
6
|
+
<title>DESIGNNN — Trend-driven Design Prompt Engine for Figma AI</title>
|
|
7
|
+
<meta name="description" content="Generate high-quality UI/UX design prompts powered by real-time design trend analysis. Built for Figma AI." />
|
|
7
8
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
8
9
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
|
9
10
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet" />
|
|
@@ -13,17 +14,36 @@
|
|
|
13
14
|
<!-- Header -->
|
|
14
15
|
<header class="header">
|
|
15
16
|
<div class="header-left">
|
|
16
|
-
<h1 class="logo">
|
|
17
|
+
<h1 class="logo">DESIGN<span class="logo-accent">NNN</span></h1>
|
|
17
18
|
<span class="tagline">for Figma AI</span>
|
|
19
|
+
<span class="version-badge" id="version-badge">v0.3.0</span>
|
|
18
20
|
</div>
|
|
19
21
|
<nav class="nav">
|
|
20
|
-
<button class="nav-btn active" data-tab="chat">
|
|
21
|
-
|
|
22
|
-
|
|
22
|
+
<button class="nav-btn active" data-tab="chat">
|
|
23
|
+
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"/></svg>
|
|
24
|
+
Chat
|
|
25
|
+
</button>
|
|
26
|
+
<button class="nav-btn" data-tab="explore">
|
|
27
|
+
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/></svg>
|
|
28
|
+
Explore
|
|
29
|
+
</button>
|
|
30
|
+
<button class="nav-btn" data-tab="mix">
|
|
31
|
+
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M8 3H5a2 2 0 00-2 2v3m18 0V5a2 2 0 00-2-2h-3m0 18h3a2 2 0 002-2v-3M3 16v3a2 2 0 002 2h3"/></svg>
|
|
32
|
+
Mix
|
|
33
|
+
</button>
|
|
34
|
+
<button class="nav-btn" data-tab="stats">
|
|
35
|
+
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 20V10M12 20V4M6 20v-6"/></svg>
|
|
36
|
+
Stats
|
|
37
|
+
</button>
|
|
23
38
|
</nav>
|
|
24
|
-
<
|
|
25
|
-
<
|
|
26
|
-
|
|
39
|
+
<div class="header-right">
|
|
40
|
+
<a href="https://www.npmjs.com/package/designnn" target="_blank" class="header-link" title="npm">
|
|
41
|
+
<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M0 7.334v8h6.666v1.332H12v-1.332h12v-8H0zm6.666 6.664H5.334v-4H3.999v4H1.335V8.667h5.331v5.331zm4 0h-2.666V8.667h2.666v5.331zm12 0h-1.333v-4h-1.333v4h-1.334v-4h-1.333v4h-2.666V8.667h8v5.331z"/></svg>
|
|
42
|
+
</a>
|
|
43
|
+
<a href="https://github.com/abe430/designnn" target="_blank" class="header-link" title="GitHub">
|
|
44
|
+
<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z"/></svg>
|
|
45
|
+
</a>
|
|
46
|
+
</div>
|
|
27
47
|
</header>
|
|
28
48
|
|
|
29
49
|
<!-- Main Content -->
|
|
@@ -32,19 +52,27 @@
|
|
|
32
52
|
<section class="tab-content active" id="tab-chat">
|
|
33
53
|
<div class="tab-hero">
|
|
34
54
|
<h2>Chat to Prompt</h2>
|
|
35
|
-
<p>Describe what you want to design. DESIGNNN will generate an optimized Figma AI prompt
|
|
55
|
+
<p>Describe what you want to design. DESIGNNN will generate an optimized Figma AI prompt powered by <span class="highlight">65+ design trends</span>.</p>
|
|
36
56
|
</div>
|
|
37
57
|
<div class="chat-container">
|
|
38
58
|
<div class="input-group">
|
|
39
|
-
<
|
|
40
|
-
|
|
59
|
+
<div class="input-wrapper">
|
|
60
|
+
<svg class="input-icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"/></svg>
|
|
61
|
+
<input type="text" id="chat-input" placeholder="e.g., SaaS dashboard with analytics charts and dark theme" autocomplete="off" />
|
|
62
|
+
</div>
|
|
63
|
+
<button id="chat-submit" class="btn-primary">
|
|
64
|
+
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M22 2L11 13M22 2l-7 20-4-9-9-4 20-7z"/></svg>
|
|
65
|
+
Generate
|
|
66
|
+
</button>
|
|
41
67
|
</div>
|
|
42
68
|
<div class="quick-prompts">
|
|
43
69
|
<span class="quick-label">Try:</span>
|
|
44
70
|
<button class="quick-btn" data-prompt="Landing page for a fitness app with bold typography">Fitness Landing</button>
|
|
45
71
|
<button class="quick-btn" data-prompt="E-commerce product page with glassmorphism style">E-commerce Glass</button>
|
|
46
|
-
<button class="quick-btn" data-prompt="Mobile onboarding flow for a meditation app">Meditation
|
|
72
|
+
<button class="quick-btn" data-prompt="Mobile onboarding flow for a meditation app">Meditation App</button>
|
|
47
73
|
<button class="quick-btn" data-prompt="SaaS pricing page with dark theme and neon accents">SaaS Pricing</button>
|
|
74
|
+
<button class="quick-btn" data-prompt="Dashboard with bento grid layout and data visualization">Bento Dashboard</button>
|
|
75
|
+
<button class="quick-btn" data-prompt="Portfolio website with retrofuturism aesthetic">Retrofuturism Portfolio</button>
|
|
48
76
|
</div>
|
|
49
77
|
<div id="chat-result" class="result-area hidden"></div>
|
|
50
78
|
</div>
|
|
@@ -54,17 +82,24 @@
|
|
|
54
82
|
<section class="tab-content" id="tab-explore">
|
|
55
83
|
<div class="tab-hero">
|
|
56
84
|
<h2>Explore Trends</h2>
|
|
57
|
-
<p>Browse
|
|
85
|
+
<p>Browse <span class="highlight" id="trend-count">65+</span> curated UI/UX design trends. Click any trend to generate a Figma AI prompt.</p>
|
|
58
86
|
</div>
|
|
59
87
|
<div class="explore-container">
|
|
60
|
-
<div class="
|
|
61
|
-
<
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
88
|
+
<div class="explore-toolbar">
|
|
89
|
+
<div class="filter-bar">
|
|
90
|
+
<button class="filter-btn active" data-category="all">All</button>
|
|
91
|
+
<button class="filter-btn" data-category="style">Style</button>
|
|
92
|
+
<button class="filter-btn" data-category="component">Component</button>
|
|
93
|
+
<button class="filter-btn" data-category="pattern">Pattern</button>
|
|
94
|
+
<button class="filter-btn" data-category="layout">Layout</button>
|
|
95
|
+
<button class="filter-btn" data-category="interaction">Interaction</button>
|
|
96
|
+
</div>
|
|
97
|
+
<div class="search-bar">
|
|
98
|
+
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/></svg>
|
|
99
|
+
<input type="text" id="explore-search" placeholder="Search trends..." />
|
|
100
|
+
</div>
|
|
67
101
|
</div>
|
|
102
|
+
<div class="trends-count" id="trends-count-label"></div>
|
|
68
103
|
<div id="trends-grid" class="trends-grid"></div>
|
|
69
104
|
<div id="explore-result" class="result-area hidden"></div>
|
|
70
105
|
</div>
|
|
@@ -78,17 +113,18 @@
|
|
|
78
113
|
</div>
|
|
79
114
|
<div class="mix-container">
|
|
80
115
|
<div class="mix-selectors">
|
|
81
|
-
<div class="mix-slot"
|
|
116
|
+
<div class="mix-slot">
|
|
82
117
|
<div class="slot-label">Trend 1</div>
|
|
83
118
|
<select id="mix-select-1" class="mix-select">
|
|
84
119
|
<option value="">Select a trend...</option>
|
|
85
120
|
</select>
|
|
86
121
|
</div>
|
|
87
122
|
<div class="mix-icon">
|
|
88
|
-
<
|
|
89
|
-
|
|
123
|
+
<div class="mix-icon-circle">
|
|
124
|
+
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M12 5v14M5 12h14"/></svg>
|
|
125
|
+
</div>
|
|
90
126
|
</div>
|
|
91
|
-
<div class="mix-slot"
|
|
127
|
+
<div class="mix-slot">
|
|
92
128
|
<div class="slot-label">Trend 2</div>
|
|
93
129
|
<select id="mix-select-2" class="mix-select">
|
|
94
130
|
<option value="">Select a trend...</option>
|
|
@@ -98,15 +134,32 @@
|
|
|
98
134
|
<div class="context-group">
|
|
99
135
|
<input type="text" id="mix-context" placeholder="Additional context (optional): e.g., for a music streaming app" />
|
|
100
136
|
</div>
|
|
101
|
-
<button id="mix-submit" class="btn-primary btn-mix">
|
|
137
|
+
<button id="mix-submit" class="btn-primary btn-mix">
|
|
138
|
+
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M8 3H5a2 2 0 00-2 2v3m18 0V5a2 2 0 00-2-2h-3m0 18h3a2 2 0 002-2v-3M3 16v3a2 2 0 002 2h3"/></svg>
|
|
139
|
+
Mix & Generate
|
|
140
|
+
</button>
|
|
102
141
|
<div id="mix-result" class="result-area hidden"></div>
|
|
103
142
|
</div>
|
|
104
143
|
</section>
|
|
144
|
+
|
|
145
|
+
<!-- Stats Tab -->
|
|
146
|
+
<section class="tab-content" id="tab-stats">
|
|
147
|
+
<div class="tab-hero">
|
|
148
|
+
<h2>Database Stats</h2>
|
|
149
|
+
<p>Overview of the DESIGNNN trend database.</p>
|
|
150
|
+
</div>
|
|
151
|
+
<div class="stats-container" id="stats-container">
|
|
152
|
+
<div class="stats-loading">Loading stats...</div>
|
|
153
|
+
</div>
|
|
154
|
+
</section>
|
|
105
155
|
</main>
|
|
106
156
|
|
|
107
157
|
<!-- Footer -->
|
|
108
158
|
<footer class="footer">
|
|
109
|
-
<
|
|
159
|
+
<div class="footer-content">
|
|
160
|
+
<p>DESIGNNN v0.3.0 — Trend-driven design prompt engine</p>
|
|
161
|
+
<p class="footer-sub">Made by <a href="https://github.com/abe430" target="_blank">concepter</a> · <a href="https://www.npmjs.com/package/designnn" target="_blank">npm</a> · <a href="https://github.com/abe430/designnn" target="_blank">GitHub</a></p>
|
|
162
|
+
</div>
|
|
110
163
|
</footer>
|
|
111
164
|
|
|
112
165
|
<script src="/app.js"></script>
|