-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
324 lines (310 loc) · 20 KB
/
Copy pathindex.html
File metadata and controls
324 lines (310 loc) · 20 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
<!DOCTYPE html>
<html lang="en" data-theme="dark">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="PromptShelf — A home for the prompts you actually reuse. Every save is versioned, everything syncs, and your whole library is one keystroke away inside Claude." />
<title>PromptShelf — AI Prompt Management</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="landing.css" />
</head>
<body>
<!-- ============ NAV ============ -->
<header class="nav" id="nav">
<div class="wrap nav-in">
<a class="brand" href="#top">
<span class="brand-mark" aria-hidden="true">
<svg viewBox="0 0 24 24" fill="none"><path d="M4 7h16M4 12h16M4 17h10" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"/></svg>
</span>
PromptShelf
</a>
<nav class="nav-links">
<a class="lnk" href="#features">Features</a>
<a class="lnk" href="#versioning">Versioning</a>
<a class="lnk" href="#mcp">MCP</a>
<a class="lnk" href="https://github.com/n2waf/PromptShelf">GitHub</a>
</nav>
<div class="nav-cta">
<button class="icon-btn" id="themeToggle" title="Toggle theme" aria-label="Toggle theme">
<svg class="i-moon" viewBox="0 0 24 24" fill="none"><path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8Z" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/></svg>
</button>
<a class="btn btn-primary" href="app.html">Get Started</a>
</div>
</div>
</header>
<main id="top">
<!-- ============ HERO ============ -->
<section class="hero section">
<div class="hero-glow" aria-hidden="true"></div>
<div class="wrap">
<div class="hero-in">
<div class="hero-copy">
<span class="badge"><span class="dot"></span>Open source · <b>MCP-ready</b> for Claude</span>
<h1 class="hero-title">Your AI prompts,<br><span class="accent">organized & versioned.</span></h1>
<p class="hero-sub">A home for the prompts you actually reuse. Every save is versioned, everything syncs, and your whole library is one keystroke away inside Claude.</p>
<div class="hero-actions">
<a class="btn btn-primary btn-lg" href="app.html">Get Started — it's free</a>
<a class="btn btn-ghost btn-lg" href="https://github.com/n2waf/PromptShelf">
<svg class="ic" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.48 2 2 6.58 2 12.25c0 4.53 2.87 8.37 6.84 9.73.5.1.68-.22.68-.49v-1.7c-2.78.62-3.37-1.21-3.37-1.21-.45-1.18-1.11-1.5-1.11-1.5-.91-.64.07-.62.07-.62 1 .07 1.53 1.06 1.53 1.06.9 1.56 2.36 1.11 2.94.85.09-.66.35-1.11.63-1.37-2.22-.26-4.56-1.14-4.56-5.07 0-1.12.39-2.03 1.03-2.75-.1-.26-.45-1.3.1-2.71 0 0 .84-.27 2.75 1.05a9.4 9.4 0 0 1 5 0c1.91-1.32 2.75-1.05 2.75-1.05.55 1.41.2 2.45.1 2.71.64.72 1.03 1.63 1.03 2.75 0 3.94-2.34 4.81-4.57 5.06.36.32.68.94.68 1.9v2.82c0 .27.18.59.69.49A10.26 10.26 0 0 0 22 12.25C22 6.58 17.52 2 12 2Z"/></svg>
View Source
</a>
</div>
<div class="hero-meta">
<span><span class="ok">✓</span> No credit card</span>
<span><span class="ok">✓</span> Google sign-in</span>
<span><span class="ok">✓</span> Self-hostable</span>
</div>
</div>
<!-- ===== APP MOCKUP ===== -->
<div class="hero-stage-col">
<div class="hero-stage-wrap reveal">
<div class="stage-frame">
<div class="win-bar">
<div class="win-dots"><i></i><i></i><i></i></div>
<span class="win-title">promptshelf — library</span>
</div>
<div class="app">
<!-- sidebar -->
<aside class="app-pane app-side">
<div class="side-top">
<button class="newbtn"><svg viewBox="0 0 24 24" fill="none"><path d="M12 5v14M5 12h14" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"/></svg>New Prompt</button>
<div class="search">
<svg viewBox="0 0 24 24" fill="none"><circle cx="11" cy="11" r="7" stroke="currentColor" stroke-width="1.8"/><path d="m20 20-3-3" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></svg>
Search prompts…
</div>
</div>
<div class="side-section">Tags</div>
<div class="tag-row">
<span class="tag on">writing</span>
<span class="tag">code</span>
<span class="tag">research</span>
<span class="tag">agents</span>
</div>
<div class="side-section">Prompts · 24</div>
<div class="plist">
<div class="pitem active">
<div class="pt">Blog post outliner</div>
<div class="pd">Turn a rough idea into a structured outline</div>
<div class="pv">v8 · edited 2h ago</div>
</div>
<div class="pitem">
<div class="pt">Code reviewer</div>
<div class="pd">Strict review with security focus</div>
<div class="pv">v3 · yesterday</div>
</div>
<div class="pitem">
<div class="pt">Cold email rewrite</div>
<div class="pd">Punch up tone, keep it short</div>
<div class="pv">v12 · 3d ago</div>
</div>
<div class="pitem">
<div class="pt">Research synthesizer</div>
<div class="pd">Summarize sources into themes</div>
<div class="pv">v5 · last week</div>
</div>
</div>
</aside>
<!-- editor -->
<section class="app-pane ed">
<div class="ed-head">
<div class="ed-title">Blog post outliner</div>
<div class="ed-desc">Turn a rough idea into a structured, publish-ready outline.</div>
<div class="ed-tags">
<span class="tag on">writing</span>
<span class="tag">content</span>
</div>
</div>
<div class="ed-body">You are an expert editor. Draft a detailed outline for a blog post about <span class="ph">[topic]</span> aimed at <span class="ph">[audience]</span>.
Use a <span class="ph">[tone]</span> tone. Include a hook, 4–6 sections with one-line summaries, and a closing CTA.</div>
<div class="ed-foot">
<button class="mini-btn solid"><svg viewBox="0 0 24 24" fill="none"><path d="M8 7V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-2M5 8h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-9a2 2 0 0 1 2-2Z" stroke="currentColor" stroke-width="1.8"/></svg>Copy</button>
<button class="mini-btn"><svg viewBox="0 0 24 24" fill="none"><path d="M4 20h4L18.5 9.5a2.1 2.1 0 0 0-3-3L5 17v3Z" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/></svg>Edit</button>
</div>
</section>
<!-- history -->
<aside class="app-pane app-hist">
<div class="hist-head"><svg class="ti" width="15" height="15" viewBox="0 0 24 24" fill="none"><path d="M12 8v4l3 2M21 12a9 9 0 1 1-9-9" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></svg>Version History</div>
<div class="hist-list">
<div class="hrev cur">
<div class="rail"><div class="node"></div><div class="line"></div></div>
<div><div class="hv">v8 · current</div><div class="hm">2 hours ago</div><div class="hadd">+3 −1 lines</div></div>
</div>
<div class="hrev">
<div class="rail"><div class="node"></div><div class="line"></div></div>
<div><div class="hv">v7</div><div class="hm">Yesterday, 4:12 PM</div><div class="hadd">+1 −0 lines</div></div>
</div>
<div class="hrev">
<div class="rail"><div class="node"></div><div class="line"></div></div>
<div><div class="hv">v6</div><div class="hm">May 30</div><div class="hadd">+6 −2 lines</div></div>
</div>
<div class="hrev">
<div class="rail"><div class="node"></div><div class="line"></div></div>
<div><div class="hv">v5</div><div class="hm">May 24</div></div>
</div>
</div>
</aside>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- ============ FEATURES ============ -->
<section class="section" id="features">
<div class="wrap">
<div class="sec-head center reveal">
<span class="eyebrow">Everything in one shelf</span>
<h2>Built for people who write prompts all day.</h2>
<p>No more scattered notes, screenshots, and lost-good-versions. Just a fast, organized library that keeps up with you.</p>
</div>
<div class="feat-grid">
<article class="feat reveal">
<div class="feat-ic"><svg viewBox="0 0 24 24" fill="none"><path d="M6 3v12a3 3 0 0 0 3 3h9M6 3a3 3 0 0 0 0 6m0-6a3 3 0 0 1 0 6m12 9a3 3 0 1 0 0 .01" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></svg></div>
<h3>Automatic versioning</h3>
<p>Every save spawns a new version. Compare any two with a unified diff and roll back in a click.</p>
</article>
<article class="feat reveal">
<div class="feat-ic"><svg viewBox="0 0 24 24" fill="none"><path d="M4 7h16M4 12h16M4 17h16" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/><circle cx="8" cy="7" r="1.6" fill="currentColor"/><circle cx="15" cy="12" r="1.6" fill="currentColor"/><circle cx="10" cy="17" r="1.6" fill="currentColor"/></svg></div>
<h3>Claude Desktop integration</h3>
<p>Reach your whole library from inside Claude over MCP. List, search, and pull prompts — no copy-paste.</p>
</article>
<article class="feat reveal">
<div class="feat-ic"><svg viewBox="0 0 24 24" fill="none"><path d="M7 18a5 5 0 0 1-1-9.9A6 6 0 0 1 18 9a4 4 0 0 1 0 9H7Z" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/></svg></div>
<h3>Cloud sync</h3>
<p>Sign in with Google and your prompts follow you to every device, instantly and securely.</p>
</article>
<article class="feat reveal">
<div class="feat-ic"><svg viewBox="0 0 24 24" fill="none"><path d="M3 7.5 11 3l8 4.5M3 7.5v9L11 21l8-4.5v-9M3 7.5 11 12m0 9V12m8-4.5L11 12" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round"/></svg></div>
<h3>Tags & instant search</h3>
<p>Organize with custom tags and find any prompt the moment you start typing.</p>
</article>
<article class="feat reveal">
<div class="feat-ic"><svg viewBox="0 0 24 24" fill="none"><path d="M4 6h8M4 12h16M4 18h12" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/><rect x="14" y="3" width="6" height="6" rx="1.5" stroke="currentColor" stroke-width="1.8"/></svg></div>
<h3>Placeholder quick-fill</h3>
<p>Click any <code style="font-family:var(--font-mono);color:var(--accent)">[placeholder]</code> to fill it inline, then copy a ready-to-run prompt.</p>
</article>
<article class="feat reveal">
<div class="feat-ic"><svg viewBox="0 0 24 24" fill="none"><path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8Z" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/></svg></div>
<h3>Thoughtful dark mode</h3>
<p>Designed dark-first and easy on the eyes. Your preference persists across every session.</p>
</article>
</div>
</div>
</section>
<!-- ============ VERSIONING SHOWCASE ============ -->
<section class="section" id="versioning">
<div class="wrap showcase">
<div class="reveal">
<span class="eyebrow">Never lose a good prompt</span>
<div class="sec-head" style="margin-bottom:0">
<h2>Track every change, like git for prompts.</h2>
<p>Tweaked a prompt and the magic disappeared? Open the history, diff the versions, and restore the one that worked.</p>
</div>
<ul class="check-list">
<li><span class="ck"><svg viewBox="0 0 24 24" fill="none"><path d="m5 13 4 4L19 7" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/></svg></span><span><b>Unified diff view</b> — see exactly what changed, line by line.</span></li>
<li><span class="ck"><svg viewBox="0 0 24 24" fill="none"><path d="m5 13 4 4L19 7" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/></svg></span><span><b>One-click restore</b> — bring any earlier version back as the latest.</span></li>
<li><span class="ck"><svg viewBox="0 0 24 24" fill="none"><path d="m5 13 4 4L19 7" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/></svg></span><span><b>Full timeline</b> — every save timestamped and kept, automatically.</span></li>
</ul>
</div>
<div class="diff reveal">
<div class="diff-head">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none"><path d="M6 3v12a3 3 0 0 0 3 3h9" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/><circle cx="6" cy="6" r="2.4" stroke="currentColor" stroke-width="1.8"/><circle cx="18" cy="18" r="2.4" stroke="currentColor" stroke-width="1.8"/></svg>
<span class="fn">Blog post outliner</span>
<span class="pill">v7 → v8</span>
</div>
<div class="diff-body">
<div class="dl"><span class="ln">1</span><span class="sg"></span><span class="tx">You are an expert editor. Draft a</span></div>
<div class="dl del"><span class="ln">2</span><span class="sg">−</span><span class="tx">outline for a post about [topic].</span></div>
<div class="dl add"><span class="ln">2</span><span class="sg">+</span><span class="tx">detailed outline for a blog post about</span></div>
<div class="dl add"><span class="ln">3</span><span class="sg">+</span><span class="tx">[topic] aimed at [audience].</span></div>
<div class="dl"><span class="ln">4</span><span class="sg"></span><span class="tx"> </span></div>
<div class="dl add"><span class="ln">5</span><span class="sg">+</span><span class="tx">Use a [tone] tone. Include a hook,</span></div>
<div class="dl"><span class="ln">6</span><span class="sg"></span><span class="tx">4–6 sections with summaries, and a CTA.</span></div>
</div>
</div>
</div>
</section>
<!-- ============ MCP ============ -->
<section class="section" id="mcp">
<div class="wrap">
<div class="mcp reveal">
<div class="mcp-grid">
<div class="mcp-left">
<span class="eyebrow">Model Context Protocol</span>
<h2>Your prompt library, inside Claude.</h2>
<p>Connect PromptShelf to Claude Desktop with MCP and reach your entire library without leaving the conversation. Drop in two lines of config and you're done.</p>
<div class="mcp-steps">
<div class="mstep"><span class="num">1</span><div><div class="mt">Grab your API key</div><div class="ms">Generate a secure key from your profile in one click.</div></div></div>
<div class="mstep"><span class="num">2</span><div><div class="mt">Add the MCP server</div><div class="ms">Paste the endpoint into your Claude Desktop config.</div></div></div>
<div class="mstep"><span class="num">3</span><div><div class="mt">Ask Claude for a prompt</div><div class="ms">List, search, and pull prompts by tag — natively.</div></div></div>
</div>
</div>
<div class="mcp-right">
<div class="code">
<div class="code-head">
<span class="fname">claude_desktop_config.json</span>
<button class="copy" data-copy="config"><svg viewBox="0 0 24 24" fill="none"><path d="M8 7V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-2M5 8h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-9a2 2 0 0 1 2-2Z" stroke="currentColor" stroke-width="1.8"/></svg><span class="copy-label">Copy</span></button>
</div>
<pre class="code-body"><code id="config"><span class="tk-pun">{</span>
<span class="tk-key">"mcpServers"</span><span class="tk-pun">: {</span>
<span class="tk-key">"promptshelf"</span><span class="tk-pun">: {</span>
<span class="tk-key">"url"</span><span class="tk-pun">:</span> <span class="tk-str">"https://…cloudfunctions.net/mcp"</span><span class="tk-pun">,</span>
<span class="tk-key">"headers"</span><span class="tk-pun">: {</span>
<span class="tk-key">"Authorization"</span><span class="tk-pun">:</span> <span class="tk-str">"Bearer YOUR_API_KEY"</span>
<span class="tk-pun">}</span>
<span class="tk-pun">}</span>
<span class="tk-pun">}</span>
<span class="tk-pun">}</span></code></pre>
</div>
<div class="mcp-steps" style="padding-inline:4px">
<div class="mstep" style="padding:6px 0"><span class="num"><svg width="13" height="13" viewBox="0 0 24 24" fill="none"><path d="m5 13 4 4L19 7" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/></svg></span><div><div class="mt">List & search prompts</div></div></div>
<div class="mstep" style="padding:6px 0"><span class="num"><svg width="13" height="13" viewBox="0 0 24 24" fill="none"><path d="m5 13 4 4L19 7" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/></svg></span><div><div class="mt">Get content with version history</div></div></div>
<div class="mstep" style="padding:6px 0"><span class="num"><svg width="13" height="13" viewBox="0 0 24 24" fill="none"><path d="m5 13 4 4L19 7" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/></svg></span><div><div class="mt">Filter by tags, secured by API key</div></div></div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- ============ FINAL CTA ============ -->
<section class="section" id="cta">
<div class="wrap">
<div class="cta reveal">
<div class="cta-glow" aria-hidden="true"></div>
<div class="cta-in">
<h2>Ready to organize your prompts?</h2>
<p>Join the developers using PromptShelf to run their AI workflows. Free to start, open source, yours to host.</p>
<div class="hero-actions">
<a class="btn btn-primary btn-lg" href="app.html">Get Started — it's free</a>
<a class="btn btn-ghost btn-lg" href="https://github.com/n2waf/PromptShelf">
<svg class="ic" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.48 2 2 6.58 2 12.25c0 4.53 2.87 8.37 6.84 9.73.5.1.68-.22.68-.49v-1.7c-2.78.62-3.37-1.21-3.37-1.21-.45-1.18-1.11-1.5-1.11-1.5-.91-.64.07-.62.07-.62 1 .07 1.53 1.06 1.53 1.06.9 1.56 2.36 1.11 2.94.85.09-.66.35-1.11.63-1.37-2.22-.26-4.56-1.14-4.56-5.07 0-1.12.39-2.03 1.03-2.75-.1-.26-.45-1.3.1-2.71 0 0 .84-.27 2.75 1.05a9.4 9.4 0 0 1 5 0c1.91-1.32 2.75-1.05 2.75-1.05.55 1.41.2 2.45.1 2.71.64.72 1.03 1.63 1.03 2.75 0 3.94-2.34 4.81-4.57 5.06.36.32.68.94.68 1.9v2.82c0 .27.18.59.69.49A10.26 10.26 0 0 0 22 12.25C22 6.58 17.52 2 12 2Z"/></svg>
Star on GitHub
</a>
</div>
</div>
</div>
</div>
</section>
</main>
<!-- ============ FOOTER ============ -->
<footer class="foot">
<div class="wrap foot-in">
<div>
<div class="brand">
<span class="brand-mark" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none"><path d="M4 7h16M4 12h16M4 17h10" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"/></svg></span>
PromptShelf
</div>
<div class="tag-line" style="margin-top:8px">Built with AI, for humans who work with AI.</div>
</div>
<div class="foot-links">
<a class="lnk" href="https://github.com/n2waf/PromptShelf">GitHub</a>
<a class="lnk" href="https://github.com/n2waf">@n2waf</a>
</div>
</div>
</footer>
<script src="landing.js"></script>
</body>
</html>