PromptVault — AI Prompt Library Manager

Foundation & Constraints

PromptVault was built intentionally without a server: no accounts, no hosted database, and offline-friendly persistence via the browser. That constraint drove the IA toward export/import as the real backup story and toward honest labeling of features that are stored as preferences vs. fully-implemented services — sync and encryption treated as roadmap items unless backed by infrastructure.

Fixed: Single-page architecture and localStorage as the source of truth. Flexible: Category taxonomy, card density, which metrics appear in the KPI bar, and how aggressively "AI Insights" language matches actual model-backed behavior in v1.

Early structure prioritized one-handed navigation (sidebar) and modal-based depth so the grid stays the hero surface — the place users spend most of their time.

Look & Feel: Structured Glass

Brand intent: PromptVault should feel like a precision instrument — calm, legible, and slightly futuristic, evoking "workspace for serious prompting" without cartoonish AI tropes. High contrast for text, restrained glow, and glass panels that separate content from the animated field behind them.

Named direction: "Structured Glass"

Glassmorphism provides hierarchy (panels float; background moves slowly). Structure comes from strict grids, uppercase micro-labels, and consistent radii so the effect reads as product UI, not decoration. The chosen route trades maximal depth illusion for readability at 12–15 prompts per view.

Mini Case Study: Save, Locate, and Reuse a Prompt

The core loop — create a prompt, find it again, and put it to use — is where PromptVault earns its place. Getting friction out of this path was the highest-priority design problem.

Requirements

• Users must create a prompt with title, category, body, and optional tags.
• Users must find it again via category filtering and browsing (search as enhancement).
• Users must reuse it efficiently via full-text view and one-click copy to clipboard.
• Destructive actions require explicit confirmation — no accidental deletions.

First Exploration — Problems Identified

• Discoverability of secondary actions when the card is dense with tags and metadata — the edit/delete controls competed with content.
• Trust in "saved" state with no server — users need confirmation the write happened, plus a recovery path (export).
• Category growth without breaking filters — horizontal tabs overflow silently past a small number of categories.
• Honest expectations for Insights — without a live LLM, the section risks feeling like empty marketing if not clearly framed as local analytics.

Iteration — What Changed

• Hover-revealed vertical action stack on cards to declutter the default scan path — actions present only when you need them.
• Separate view vs. edit modes in the detail modal — read-only by default reduces accidental overwrites.
• Delete confirmation modal with a preview of the content being removed — so the cost of the action is visible before committing.
• JSON export/import under Settings — addresses backup anxiety in a local-only architecture with a concrete, trustworthy story.
• Insights refresh affordance — analytics feel user-controlled, not magic. Explicit trigger communicates local computation, not remote inference.

Heuristic Evaluation — Core Loop

I evaluated the save → locate → copy loop against Nielsen's core heuristics, mapping each to a concrete design decision in the shipped product.

Design Decisions Table

Design System

Built directly in CSS without a framework, the system is organized from atoms up through templates. Radii cluster around 12–16px; separation uses 1px hairlines with low-opacity cyan; elevation is communicated with blur and shadow rather than heavy borders — keeping the "structured glass" direction legible at every level.

Outcome

v1 delivers a coherent local-first prompt library with credible backup/export behavior and a scalable card/grid pattern for future features. Real full-text search, cloud sync, or model-backed assist can each slot into the same IA without renaming the product story — the architecture is honest about what it is today and extensible toward what it could become.

The project demonstrates how production-quality product thinking and visual craft can be achieved in a zero-dependency, framework-free implementation: the performance, persistence, and interaction model all work without a build step, making it immediately inspectable and deployable.

What I'd do next

• Full-text search across prompt body and tags — the most-requested feature once the library grows past ~50 prompts.
• Real model-backed Insights — swap local analytics for actual LLM-assisted summaries (with an honest toggle when no API key is configured).
• Cloud sync option — opt-in, privacy-preserving, with the local-only mode remaining the default.
• Prompt templates / variables — parameterized prompts with {{variable}} placeholders that populate on copy.
• Automated tests for localStorage migrations — currently manual verification only.