The live demo was built from exactly this text — nothing added.

# AI Tools Directory Website

Build this website exactly as described below. Replace the [VARIABLES] with your own values; keep everything else.

## Brief
Build [BRAND], a complete directory of 64 invented tools for [DIRECTORY_FOCUS], with a polished lime-and-lilac catalog, rich original product previews and useful browser-persisted interactions. The directory itself is the homepage, populated on first load.

- Audience: [AUDIENCE] discovering and comparing practical tools; independent directory publishers adapting the site.
- Goal: Make search, filters, detailed evaluation, saving, comparing and local submissions work as one coherent flow. Provide honest local newsletter and featured-placement requests through a single replaceable adapter.
- Tone: Curious, concise and editorial. Describe what each tool does in ordinary English, with balanced limitations and specific sample use cases.

## Stack
- Framework: Vite + React + TypeScript
- Styling: Tailwind CSS 3.4
- Libraries: react (MIT), react-dom (MIT), vite (MIT), typescript (Apache-2.0), tailwindcss (MIT), lucide-react (ISC), @fontsource/space-grotesk (OFL-1.1), @fontsource/dm-sans (OFL-1.1)
- Build: `npm run build` → static files in `dist/`. No backend, no server code, no external APIs.
- Setup:
  - Use Vite with React and TypeScript, Tailwind CSS 3.4, lucide-react and the two Fontsource packages listed below. Implement motion in CSS and an in-project hash router; do not add an animation library or a router dependency.
  - Set Vite base to './', build.outDir to 'dist', build.sourcemap to false and npm run build to type-check then build. Install and bundle all assets locally; deploy as static files under an arbitrary URL subdirectory.
  - Keep every user-facing string, variable value, seeded tool record, collection, price and preview sample in src/content.ts. Derive BRAND_SLUG from BRAND. Defaults build the exact world below; different variable values must coherently rewrite the catalog's purposes, sample UI content, collection names and audience copy without changing the layout or functional coverage. Keep exactly 64 initial tools, eight per category, for both cases.
  - Model each tool with id, slug, name, tagline, description, category, pricingModel, monthlyPrice, platforms[], useCases[], baseVotes, addedOrder, featured, logoSeed, features[4], pros[2], cons[2], previewKind and previewData. Every seeded name and purpose is specified below; write a unique 55–85 word description and specific features and tradeoffs for that purpose, not a repeated generic paragraph. Prices and vote counts are fictional sample data, never presented as audited traction.
  - Seed this complete catalog in the listed category and item order, assigning ids t01 to t64 and lowercase-hyphenated name slugs. These are invented examples, not references to existing products. Writing: Quillnest | Turn rough notes into a structured first draft; Promptpetal | Build a reusable brand voice from writing samples; Sentencegrove | Rewrite dense sentences into clear plain language; Outlinefern | Organize a long article before writing; Copyacorn | Draft focused product descriptions from feature notes; Briefwillow | Turn a creative brief into three campaign directions; Editmoss | Spot repeated phrases and uneven tone; Storybramble | Plan scenes and character arcs on a visual board.
Design: Frameplum | Explore landing-page compositions from a content outline; Hueburrow | Build accessible color palettes from a single swatch; Gridpebble | Arrange a consistent set of social graphics; Shapeorchard | Create editable geometric illustration studies; Typecove | Pair open fonts and preview a type scale; Mockfern | Place an invented interface inside clean device frames; Vectorlilt | Refine hand-drawn shapes into editable vector paths; Layoutthistle | Check spacing and alignment across screen sizes.
Coding: Patchfinch | Explain a code change and propose focused tests; Testwren | Draft test cases from function signatures; Querymoth | Turn a data question into a readable query; Dockitfern | Turn documented functions into a browsable reference; Regexbud | Build and explain text-matching patterns; Refactorplum | Break a long function into named smaller pieces; Traceacorn | Summarize a local error trace and likely causes; Schemaflock | Draft typed data shapes from example records.
Audio: Hushreed | Remove steady room noise from spoken clips; Voicemallow | Sketch fictional narration with adjustable pacing; Beatthicket | Arrange an original percussion loop; Chordfinch | Suggest chord progressions for a melody sketch; Transcriptcove | Make searchable text from short voice notes; Stemwillow | Separate a demo loop into instrument layers; Audiobramble | Compare loudness across clips in a project; Soundpetal | Build simple interface sound palettes.
Video: Cutgrove | Find concise highlights in a long interview; Captionfern | Design readable captions for short clips; Sceneburrow | Turn a script outline into a shot board; Motionacorn | Animate flat shapes with reusable motion presets; Reelwillow | Assemble a vertical edit from a clip list; Framehush | Stabilize a shaky scene and preview its crop; Clipmoss | Tag and organize a folder of video snippets; Storyspindle | Compare two edit structures before rendering.
Research: Notefinch | Group research notes into useful themes; Sourcewillow | Track source excerpts beside their claims; Paperburrow | Summarize a paper with links to supplied passages; Insightlilt | Cluster customer comments by recurring need; Questionfern | Turn a broad topic into a research question map; Evidenceplum | Compare supporting and conflicting evidence; Surveyacorn | Draft neutral questions for a small survey; Readthicket | Build a reading queue with concise annotations.
Automation: Flowquill | Connect a form response to a review queue; Taskmoth | Classify incoming requests into next actions; Routepetal | Route a record using a readable rule tree; Formgrove | Convert structured notes into a form schema; Syncwillow | Match columns between two local data files; Ruleburrow | Preview a rule against sample records; Loopfinch | Build a repeatable checklist from a process; Handoffmoss | Package task context for the next teammate.
Productivity: Focuspebble | Break a large task into a realistic focus session; Planbramble | Balance work across a small project board; Meetfern | Turn meeting notes into owners and next steps; Inboxlilt | Group messages into clear action buckets; Goalacorn | Track a goal through concrete milestones; Boardwillow | Summarize a busy project board; Timeburrow | Estimate effort using small comparable tasks; Recallpetal | Find an idea across saved personal notes.
  - For zero-based index i, addedOrder=i+1, baseVotes=83+((i*37)%421); popular sorts by baseVotes plus the user's vote, then name, while newest sorts addedOrder descending without displaying a date or timestamp. Pricing cycles Free, Freemium, Paid, Free trial by i modulo 4, with monthly prices 0, 12+(i%5)*3, 19+(i%5)*5, 15+(i%5)*4. Display Free; Free + from $N/mo; From $N/mo; or Trial + $N/mo respectively. Mark the three featured records Quillnest, Frameplum and Flowquill as editorial picks; show Paid placement only on placement previews, not on these editorial picks.
  - For each record, assign a primary platform cycling Web app, Desktop, Browser extension, API by i modulo 4; every fifth record also supports Web app if not already listed. Use cases are Writing, Editing, Design, Development, Research, Marketing, Operations, Planning. Give each category its obvious primary use case and add Editing to Writing/Audio/Video, Marketing to Design, Operations to Automation, and Planning to Productivity. These exact values populate dropdowns; filter values use lowercase slugs.
  - Implement one catalog store and adapters in src/demoAdapter.ts for submitTool, subscribeNewsletter, requestPlacement and local product preview actions. They return deterministic local success results, never fetch. localStorage key is BRAND_SLUG + ':directory:v1'; store version, savedIds, votedIds, compareIds, submissions, submissionDraft, newsletter and placementRequests. Wrap parsing and writes in try/catch; corrupted data restores defaults and blocked storage uses in-memory state with a small 'Changes last for this visit' message. Never save HTML; render user strings as text. Seed once, merge saved local submissions on reload, and retain stable ids and slugs.
  - The router accepts #/, #/tool/<slug>, #/tool, #/collections, #/collection/<slug>, #/collection, #/saved, #/compare, #/submit and #/featured. Listing query parameters belong inside the hash, for example #/?q=draft&category=writing&pricing=freemium&platform=web-app&use=writing&sort=popular. Parse with URLSearchParams, omit defaults, encode every value, preserve unrelated filter values, and update without reload. On q input use history.replaceState after 120ms; discrete selections use pushState. Handle both hashchange and popstate so Back and Forward restore controls and results. Invalid values fall back to defaults. Missing detail slug shows the first seeded tool or collection; unknown slugs show a useful local not-found panel with a home link.
  - As specifically requested for this directory, each tool route sets document.title to tool.name + ' — ' + BRAND and replaces one description meta element with the tool's tagline. Other routes restore the brand title and directory description. Do not add any other SEO work, social metadata or generated crawler files.
  - On route changes focus the main h1 and scroll to the top, except when returning to the catalog: restore its previous scroll offset and query. All links are hash routes or explicit local file names; never bare server paths. Only external link allowed by default is the template renderer's optional credit. Product cards use a local Open demo preview instead of fictitious outbound website links.
  - Verify the production build at 1440×900 and 390×844: 64 initial records, live search and all filters, deep-link reload and browser history, toggled vote persistence, saved tools after refresh, fourth compare item rejection, comparison removal, all 64 detail routes, each collection, three-step validation/back navigation/draft recovery, a locally added 65th tool, newsletter duplicate handling, placement request confirmation, blocked storage fallback and zero console errors. Check that no visible dates or real product names were introduced.

## Variables
- [BRAND] — Directory brand (default: "Sprigstack"). An invented directory brand; derive its slug, favicon and storage namespace from this value.
- [DIRECTORY_FOCUS] — Directory focus (default: "AI tools for independent work"). Rewrite the hero, catalog purposes, collections and submission examples to fit this focus.
- [AUDIENCE] — Primary audience (default: "independent makers and small teams"). Who the editorial guidance and featured-placement offer are for.
- [NEWSLETTER_NAME] — Newsletter name (default: "The Useful Stack"). An invented editorial newsletter name used in the sign-up and saved preference state.
- [FEATURED_PRICE] — Featured placement price (default: "39"). Whole US dollars for the single-placement example; other plan prices derive from this value.
- [CREDIT] — keep a small "Template by VibeFather" link to https://vibefather.ai/t/ai-tools-directory-website in the footer (default: yes; delete this line to remove it)

The copy under Pages & Sections is written for the default values. If your values differ, rewrite every headline, paragraph, label and image for them — same length, tone and structure. Layout, colors, type and motion stay as described.
Keep all copy, image paths and links in one content file (for example `src/content.ts`), keyed by section, so the content can be swapped later without touching components.

## Design
### Colors
- Canvas `#111214` — Page canvas and darkest controls.
- Surface `#1B1D20` — Normal tool cards and detail panels.
- Raised `#25282D` — Inputs, dialogs and selected dark controls.
- Lime `#C8F560` — Primary actions, first featured card, headline emphasis and newsletter band; dark text only.
- Lilac `#B9A6FF` — Hero preview, second featured card, collection artwork and bundle plan; dark text only.
- Main text `#F5F6F2` — Headings and primary text on dark surfaces.
- Secondary text `#B5B9C1` — Readable descriptions, labels and helper text on dark surfaces.
- Line `#3D424A` — Borders and dividers, with brighter focus ring on interactive surfaces.
- Ink `#17210D` — Text and marks on lime and lilac.
- Error `#FF9E9E` — Error text on dark surfaces; also show an icon and explanatory words.

### Typography
- Wordmark, headings, tool names, prices: Space Grotesk (OFL), weights 500/600/700
- Body, controls, descriptions and microcopy: DM Sans (OFL), weights 400/500/600/700

### Layout & motion
- Spacing: 4px base rhythm; page gutters 40px desktop, 24px tablet, 20px mobile. Content max-width 1280px. Hero gap 72px; section gaps 48px, never long empty screenfuls. Cards 24px padding, grid gap 20px. Text line-height 1.55; readable body 15–16px and minimum auxiliary copy 12px. Controls at least 44×44px, visible focus 2px lime with 3px offset. Desktop opening view must include real catalog cards, not just a headline.
- Radius: Tool and preview cards 16px; controls 10px; pills 999px; inner UI panels 8px. Rounded corners are consistent, never bubbly giant pills for entire sections.
- Motion: Use only CSS transitions of 140–180ms for control color, shadow and modest 2–3px movement.
- Motion: Show content by default: no initial opacity-zero sections, clip-path reveals, perpetual marquee, parallax or scroll hijacking.
- Motion: Reduced motion removes transforms, looping playheads and delayed state updates, preserving all functionality.
- Motion: Dialog and sheet transitions must never delay focus, input response or route navigation.
- Imagery: All visuals are original SVG/CSS/HTML. Build 64 distinct deterministic abstract marks using category shape families and individual seeds: leaves for writing, offset rectangles for design, brackets for coding, waveforms for audio, frames for video, connected dots for research, paths for automation and tiles for productivity. No letters in circles as the only identity and no imitation product logos. Use the eight detailed product workspace families specified below. Large lime and lilac visual fields must both be visible in the first desktop screen. No raster images, portraits, network assets or stock placeholders are needed.

## Pages & Sections
### Explore tools (`#/`)
1. **Shared shell and discovery hero** — Header: original two-leaf geometric mark, [BRAND] wordmark, Explore, Collections, Saved with live count, and an outlined 'Submit a tool' button. Active route gets a slim lime underline. The logo links to #/. Hero eyebrow 'SMALL TOOLS. BETTER WORK.'; headline 'Find your next
unfair advantage.' with 'unfair advantage.' in lime; body 'A considered collection of [DIRECTORY_FOCUS]. Find the useful ones, compare the details, and build a stack that fits.' Show a quiet '64 tools · 8 categories · Made for curious people' line with counts derived from data. Above the right-hand visual show 'EDITOR’S PICK' and a small arrow linking to #/tool/quillnest. The large lilac visual card contains Quillnest's original writing workspace: a small content outline rail, readable title 'A clearer first draft', four sentence blocks, a three-item 'Keep / Tighten / Rewrite' toolbar, and one floating lime summary card 'Notes → Outline → Draft'. The mock is a visual entry to the local preview, not a fake video player. Below it show Quillnest with a purpose line and 'Take a closer look ↗'. Footer shared on all pages contains directory navigation, a 'Fictional tools. Local demo interactions.' sentence, newsletter link anchor where available and optional renderer credit; no copyright year. Mobile nav uses a labeled Menu button and a focus-trapped drawer with Escape and outside-click close.
   Layout: Near-black canvas; centered max-width 1280px. Desktop header height 76px, hero starts 44px later, two columns 1.05fr 1fr with 72px gap and a 324px-high visual. Headline 64px/1.02 weight 700, tightly tracked; body 16px/1.6 max-width 470px. Visual is a 16px-radius lilac panel with a rich white-and-dark miniature interface, subtle shadow and no browser chrome. Keep the complete hero plus category rail and tops of results visible at 1440×900. At 390px header is 64px, hero heading 40px and preview height 205px; stack with 24px gap and keep search visible without a large empty intro.
   Motion: Mock toolbar highlight moves once on entry over 350ms, then stops. Hover on the preview raises its small lime summary by 3px. Content is visible before motion and in reduced-motion mode.
2. **Search, categories and catalog** — Wide input with Search icon and label 'Search tools'; placeholder 'What do you want to make?'; visible clear control when nonempty. Search matches all whitespace-separated tokens case-insensitively across name, tagline, category, features and useCases, applying every token with AND. A lightweight suggestion panel shows up to five matching tools with code marks, name and category; Arrow keys, Enter and Escape work; pressing Enter without a suggestion keeps the filtered grid. Under the input, category chips show All tools and the eight category names with derived counts. Filter row contains Pricing, Platform, Use case, sort Popular/Newest, and a result count. Filters intersect. A removable chip appears per active filter and Clear all resets query, category, filters and sort to defaults. Sidebar filters are not needed. Mobile uses horizontally scrollable category pills and a 'Filters' sheet with immediate preview count, Reset and Show results. Filtering is real and URL-synchronized using setup rules. The grid initially shows 12 records, with featured records first only when no search/filter is active and sort is Popular; remaining records follow the selected sort without duplicates. 'Show 12 more' appends up to 12 and states 'Showing X of Y'. Reset visible count to 12 when filters or sort change. Saved tools has its own route. Empty state reads 'No tools fit this combination.' and offers Clear filters plus a working query suggestion.
   Layout: Search spans full width at 64px height with #202226 fill, 1px #3A3D43 border and 12px radius. At desktop category rail and controls fit two compact rows. Result heading 'Tools worth your attention' sits left with a small spark mark; count and sort right. Three-column card grid with 20px gutters, 2 columns from 740–1099px, 1 column below 740px. The first card is electric lime, second lilac, third dark. Other cards are #1B1D20 with thin borders. Featured cards carry readable dark text. Every card: 48px original mark, 20px tool name, two-line useful tagline, category/pricing labels, and bottom actions. At least six cards should be substantially visible within the first desktop viewport. No vertical filter sidebar.
   Motion: Search results update within 120ms. Cards lift 3px and reveal a subtle arrow on hover; no tilt. Filter chips change fill in 140ms. Preserve focus during recomputation and announce result counts in a polite live region.
3. **Catalog card actions and compare tray** — Each card has one title link opening #/tool/<slug>, a bookmark button labeled Save tool or Unsave tool, an upvote button with count and aria-pressed, and an Add to compare checkbox. Do not wrap the entire card around its action buttons. Voting toggles exactly one local vote per tool; every location reflects the same count, without manufacturing extra votes. Saving updates header count and the saved grid immediately. Comparing persists ids and opens a fixed bottom tray with up to three miniature tool chips, individual remove buttons, Clear and 'Compare tools (N)'. At N<2 the compare action is disabled with 'Choose at least two tools'; at N=2 or 3 it routes to #/compare?tools=<comma-separated-slugs>. Attempting a fourth tool leaves all existing selections untouched and announces 'Compare up to 3 tools. Remove one to add another.' A single shared toast area confirms Save, Unsave and copy actions. Give card controls specific accessible labels containing the tool name.
   Layout: Footer of each card has a divider and 44px action targets. Votes left in a small rounded outline control; bookmark and compare right. Tool cards are 250–280px tall with aligned text and footer. Tray max-width 850px centered 20px above the viewport bottom, dark elevated surface and lime CTA; add matching page bottom padding so it never conceals the last card. On mobile tray fits the viewport with horizontally scrollable selected chips and a full-width Compare button.
   Motion: Vote arrow nudges upward 2px and count changes without layout shift. Save icon fills in 140ms. Tray slides up 12px over 180ms, reduced motion shows instantly.
4. **Collections teaser and newsletter** — Below the complete catalog area show a compact 'A good stack starts here' collection strip linking to three editorial collections: 'Make your first launch', 'Create without a big team', 'Research with a clear head'. Each shows a code-drawn composition of four relevant tool marks and exact collection count. Newsletter block headline 'Useful tools. Less noise.'; body 'Join [NEWSLETTER_NAME] for thoughtful picks for [AUDIENCE].'; label Email address, placeholder '[email protected]', CTA 'Join the list'. Adjacent helper 'Demo: your sign-up stays on this device.' Validate email, focus inline error if invalid, and pass valid values to demoAdapter. Save subscription in localStorage with no timestamp shown; success replaces the form with 'You’re on the local list.' plus stored email, Change email and Remove subscription. Repeating the same email returns an already-subscribed message without duplicates. No fake email delivery or live subscriber total.
   Layout: Collections use three horizontal editorial panels with a small 2×2 icon composition and thin borders, not giant full-screen sections. Newsletter is one electric-lime band with black text, 32px padding, a heading left and two-control form right; stack on mobile. Footer follows with 36px vertical padding and 12px muted microcopy.
   Motion: Form success crossfades over 140ms; no confetti. Collection marks move 2px on hover only.

### Tool detail (`#/tool`)
1. **Tool detail and local product preview** — All #/tool/<slug> routes share this page. #/tool alone resolves to Quillnest. Breadcrumb 'Explore / Writing / Quillnest' uses real hash links. Hero has 72px code mark, name, purpose tagline, pricing/category/platform badges, Save, Upvote and Compare controls. Main primary button 'Open demo' opens a rich accessible local preview dialog; secondary 'Copy link' copies the current deep link with fallback selectable URL and honest status. Quillnest exact heading 'Turn rough notes into a structured first draft.' and opening copy 'Give your next piece a useful shape before you polish a sentence. Quillnest groups loose notes, proposes an outline, and keeps the original ideas within reach.' The lower page contains Overview, four Key features, two concrete Good for points, two Limitations, Pricing, and three Similar tools excluding the current record and ranked by matching category then shared use cases. Pricing displays the actual record pricing model and amount, plus a clear local-demo note. No dead visit-site CTA. All tools have distinct complete data and matching preview labels; reuse a visual grammar per category, not the identical screenshot for every product. Tool route updates the title and description as specified in setup.
   Layout: Header hero max-width 1060px with back link; title 48px desktop/34px mobile. Below, 2fr/1fr split: a 16:10 polished code interface preview above overview on the left; sticky 300px facts/pricing column on the right until footer. Preview panel changes between lilac and lime by category; inner workspace uses near-black panels and readable light text. Feature list is a 2×2 grid with fine dividers; pros/cons two columns. Similar tools is a real three-card grid. On mobile everything stacks and the detail side panel is not sticky.
   Motion: Dialog enters with opacity and 8px translate over 160ms, locks body scroll, traps focus, closes with Escape/backdrop/Close and restores focus. Similar card hover matches the catalog.
2. **Eight original product workspace families** — Implement previewKind by category with meaningful, locally working controls inside Open demo. Writing: editable rough-notes textarea and 'Build outline' producing three deterministic headings from the entered nouns; default input 'Launch a simple waitlist. Explain the benefit. Ask one useful question.' and outline 'The promise / The first step / The feedback loop'. Design: a three-swatch palette and four composition tiles, a 'Try another palette' button cycles three fixed accessible palettes and applies them to the preview canvas. Coding: original short pseudocode, a readable diff and 'Run sample checks' revealing three fixed passing checks, explicitly labeled Sample checks. Audio: a drawn waveform with trim markers, Play preview toggles a small moving playhead without emitting sound; show 'Silent waveform preview'. Video: three color scene blocks and timeline, Next scene changes the selected block and caption. Research: four original notes and an evidence map, Group notes switches to two named clusters. Automation: three connected blocks Input → Review → Ready, Run sample moves one sample record through the three states and produces a visible completion card. Productivity: a four-card task board, Complete next task moves a card to Done and updates a derived progress bar. Each tool changes the labels and sample purpose within its family's workspace. Never simulate an actual remote model call or imply generated media was saved externally. All preview state can reset with Reset preview; stop timers when the modal closes.
   Layout: Workspace frames have a narrow functional toolbar, 20% navigation rail where relevant, 60% central content and a compact inspector. Use real SVG/CSS vector shapes and readable sample content, avoiding lorem ipsum and rows of meaningless bars. Desktop dialog max-width 940px and max-height 88vh with internal scroll; mobile fills available width with 16px margin and rearranges preview panels. Every visible control has an action; tiny decorative mock controls are noninteractive and aria-hidden.
   Motion: Only active previews animate. A simulated run takes at most 700ms; reduced-motion updates states instantly. Waveform playhead stops on close and under reduced motion.

### Collections (`#/collections`)
1. **Editorial collections index** — Headline 'Good tools work better together.'; body 'Small, considered stacks for a specific job.' Show four collections with cover art drawn as a composition of their included original tool marks, editorial summary, tool count and 'Explore collection'. Make your first launch includes Quillnest, Frameplum, Copyacorn, Flowquill, Formgrove, Meetfern. Create without a big team includes Promptpetal, Gridpebble, Hushreed, Cutgrove, Captionfern, Motionacorn. Research with a clear head includes Notefinch, Sourcewillow, Paperburrow, Evidenceplum, Readthicket, Recallpetal. Keep the work moving includes Taskmoth, Routepetal, Syncwillow, Loopfinch, Planbramble, Boardwillow. Routes derive from each title slug. Collection details never link to missing tool ids.
   Layout: Four 2-column landscape editorial cards with alternate lime, lilac and dark art fields, generous 24px padding and a small 6-item count badge. Collapse to one column on mobile. Top header compact so all four cards start within a normal page length.

### Collection detail (`#/collection`)
1. **Collection story and ordered tools** — # /collection without the space and without a slug resolves to make-your-first-launch. Hero title 'Make your first launch'; subtitle 'Six tools for turning an idea into a clear, useful first release.' Include a 90-word editorial introduction, a 'Save all 6 tools' button that performs an idempotent union with savedIds and announces the number newly saved, and a Copy link action. Show the six actual records in curated order with a specific one-sentence 'Why it belongs' note and normal save/vote/compare actions. End with 'Explore more collections' linking to the index. Each of the other three collections has its own title, introduction and per-tool rationale.
   Layout: Lilac hero panel with compact mark collage right and 42px heading left. Ordered cards use a 36px index and a 1fr/2fr text split; use ordinary numbers 01–06, never release dates. Mobile index and mark sit beside the title, rationale wraps below. No blank placeholder collection route.

### Saved tools (`#/saved`)
1. **Saved tools** — Headline 'Your useful little shortlist.' with a derived saved count, Search saved tools input, and Clear saved action requiring an inline confirm/cancel prompt. Reuse the same cards and filter matching across the saved subset. State is persisted and synchronized with every card and header. Initial state may be empty only on this dedicated page; show an original code-drawn bookmark composition, 'Save the ones you want to come back to.' and 'Explore tools' linking home. A removed final record immediately restores this empty state. Never silently pre-save tools on behalf of the user.
   Layout: Compact page intro and the ordinary three-column card grid. Empty state max-width 560px centered with a 160px lime/lilac vector illustration; useful browsing CTA stays visible on mobile.

### Compare tools (`#/compare`)
1. **Side-by-side comparison** — Read up to three valid unique tool slugs from the tools hash query; if none are supplied and no stored selection exists, show Quillnest and Promptpetal as an explicitly labeled 'Sample comparison' without silently modifying saved or compare state. If exactly one selected item exists, show that real selection with an Add a tool selector and a clear prompt to select one more. Column headers contain mark, title link, remove button and Save. Rows compare purpose, category, pricing model, monthly starting price, platforms, four key features, two strengths, two limitations and recommended use case. 'Only show differences' hides rows whose values match across selected tools. Add tool control is a searchable local selector, disabled at three with the exact limit message. Remove updates URL and store; replacing a tool recalculates all rows. Copy comparison link works with a fallback selectable field. Never invent scores or a winner. Empty explicit selection after removing all shows a useful Add a tool state instead of reintroducing samples.
   Layout: Main heading 'Find the right fit.' and selected count; table within its own horizontal scroll region, first label column 180px and each tool column min-width 250px. Desktop 2–3 tool columns fit centered max-width 1280px. Sticky table heading and row-label cells use opaque near-black fills. At 390px keep labels 116px, tool columns 230px, show an unobtrusive 'Swipe to compare' hint and contain overflow inside the table; page itself never overflows. Alternate subtle row backgrounds and use lime only for a chosen action, not to suggest a winning product.

### Submit a tool (`#/submit`)
1. **Three-step submission with live card preview** — Headline 'Put something useful on the map.'; intro 'Show [AUDIENCE] what your tool helps them do.' Steps are 1 Basics, 2 Details, 3 Review. Step 1 requires tool name 3–40 characters, tagline 15–110 characters and one category; reject duplicate names case-insensitively. Step 2 requires pricing model, nonnegative starting monthly price when not Free, at least one platform and one use case, description 60–500 characters and three newline-separated features. Optional website URL must be HTTPS if supplied; render it only as text in the submitted record, never auto-open it. Step 3 shows a complete review and requires 'I understand this submission stays in this browser.' checkbox. Desktop live preview uses the exact catalog card component, updating as fields change with a generated geometric mark. Next validates only current-step fields, places errors beside labels, focuses first invalid input and preserves all values on Back. Autosave a draft into localStorage after 250ms. Reload resumes step and fields; 'Discard draft' uses a visible confirm/cancel control. On final 'Add to my directory' call demoAdapter, generate unique id and slug, set baseVotes=0, addedOrder to highest+1, featured=false and meaningful default detail pros/cons, append it to the same catalog, remove draft, show 'Added to your local directory.' and a View tool link. Repeated final clicks cannot create duplicates. The catalog count becomes 65 and newest sort shows this entry first. No fake pending moderation, remote submission, file upload or email confirmation.
   Layout: Desktop 7/5 two-column form/preview layout max-width 1120px; preview sticky at 100px with 'LIVE CARD PREVIEW' label and a compact local-storage note below. Stepper is a thin horizontal line with numbered nodes; current node lime. Forms use 48px-high inputs, 8px field gap, 20px group gap, clear helper text and full error text. Previous and Continue buttons at bottom; final button lime. Mobile preview appears above the form as a compact real card, never hidden and never overlays inputs.
   Motion: Stepper line fills over 160ms; field errors appear without shaking. Preview reflects inputs immediately. Success swaps content in place and focuses confirmation.

### Featured placement (`#/featured`)
1. **Featured placement plans and local request** — Headline 'Give a useful tool a little more room.'; subtitle 'Choose a placement for [AUDIENCE]. See exactly how it will look before you request it.' Three plans: Standard listing $0, 'A place in the searchable directory', CTA Submit a tool links #/submit; Featured card $[FEATURED_PRICE] per placement, 'One highlighted card in a focused category', CTA Preview placement; Editorial bundle $[FEATURED_PRICE multiplied by 3] per bundle, 'A highlighted card and a collection placement preview', CTA Preview bundle. No scarcity counts, audience reach promises, dates, rankings for sale or live checkout. Selecting a paid option opens an accessible drawer with plan summary, a selector of seeded plus submitted tools, required contact email and an exact preview of that tool's card with a small 'Paid placement' label. Copy says 'Local preview only. No payment or placement is processed.' Confirm button 'Save placement request' validates, stores a unique local request via adapter and shows a local receipt with plan, tool, price and reference such as SP-0001 (derive prefix from BRAND letters, no timestamp). Offer Edit request and Close; never request a card number. Three FAQ accordions explain what is highlighted, that editorial picks remain separate, and that this demo stores requests only on the device.
   Layout: Compact 3-column pricing row with Featured card on lime, Standard dark and Editorial bundle lilac. Price 48px, units 14px; all body text dark on bright cards. Below show a full-width before/after card placement preview, then three understated FAQ rows. Mobile plans stack; preview drawer is full width up to 520px, scrolls internally and respects safe-area insets.
   Motion: Plan selection moves a 2px border over 140ms. FAQ uses height transition 160ms with aria-expanded; drawer has standard focus and Escape behavior.

## Assets
- image: Create all 64 tool marks, collection compositions, the hero workspace and eight preview families directly in local SVG/CSS/HTML components. Original work created for this template; no downloaded imagery or external image requests. Decorative art is aria-hidden; meaningful workspace figures receive concise English descriptions.
- icon: Bundle lucide-react icons from the npm package under ISC: Search, ArrowUpRight, Bookmark, ChevronUp, SlidersHorizontal, Check, X, Plus, ArrowLeft, ChevronDown, Menu, Copy, ArrowRight and Sparkles. Use 18–20px, stroke-width 1.75; never use brand icons. Record package, source https://github.com/lucide-icons/lucide, author Lucide contributors and ISC license in ASSETS.md.
- font: Self-host Space Grotesk weights 500/600/700 through @fontsource/space-grotesk and DM Sans weights 400/500/600/700 through @fontsource/dm-sans. Import only Latin subsets needed. ASSETS.md records package file paths, https://fontsource.org/fonts/space-grotesk and https://fontsource.org/fonts/dm-sans, their font authors and OFL-1.1. Never load remote font stylesheets.

## Don'ts
- Do not introduce a backend, API route, database, login, analytics, third-party API, remote AI call, external form submission or payment. All service-like actions go through src/demoAdapter.ts and stay on this device; never claim an email, payment, moderation decision or placement was actually processed.
- Do not use real product or platform names, logos, copied screenshots, celebrity likeness, borrowed slogans, recognizable mascots, restricted library code or commercial fonts. All directory entries and brands are invented and all visual marks and UI scenes are original.
- Do not display calendar dates, timestamps, relative publication dates, release years, copyright years or time-based promotion deadlines. Newest uses an internal ordinal only. Plan prices per placement and fictional vote counts may appear; do not claim measured reach or real endorsements.
- Do not reduce the seeded catalog below 64 complete unique records or ship repeated filler descriptions, blank details or decorative controls. Every listed route, filter, modal, checkbox, card action, compare rule and submission step must work according to this prompt.
- Do not allow more than three compared tools, double-count votes, duplicate final submissions, remove saved content without confirmation, crash on corrupt localStorage or break back/forward navigation and reload of hash routes. Query parameters live inside the hash and use URLSearchParams encoding.
- Do not create bare-directory links or depend on server rewrites. Use hash routes or real HTML filenames, relative local assets, Vite base ./, and a static dist/ under 20 MB. npm run build must produce a minified build without source maps or source folders.
- Do not hotlink images, fonts, scripts or styles; all resources are bundled locally. No CDN tags, placeholder services, stock photos, unverified download URLs or packages with incompatible licenses. List third-party asset paths, authors, source links and licenses in ASSETS.md.
- Do not leave the opening catalog empty or replace its visual anchor with typography alone. Preserve the specified near-black, electric-lime and lilac palette, original code-drawn hero workspace and visible populated cards. Keep AA text contrast, especially dark text on lime and lilac.
- Do not hide essential information behind hover, use nested interactive controls, omit labels and keyboard support, trap focus in a closed dialog, or place fake buttons inside a mock without action. Sheets and dialogs trap focus while open, restore it when closed and support Escape. Use aria-live for result and action feedback.
- Do not allow page-level horizontal overflow or overlapping controls at 390×844. Contain comparison overflow in its table scroller, make the mobile filter sheet usable, leave room for the fixed tray, and keep tap targets at least 44px.
- Do not gate content behind an intro, use scroll hijacking, flash effects, perpetual background motion or initially hidden sections. Honor prefers-reduced-motion and stop preview timers on close. Console must be free of runtime errors.
- Do not hard-code default-brand references outside the content file or leave old content after variables change. Keep all strings, records, examples and prices in src/content.ts, derive storage namespace and brand slug, and rewrite the catalog and collection copy coherently for alternative values.
- Do not add SEO deliverables beyond the specifically requested per-tool document title and description, a plain site title and original favicon. Do not add social metadata, structured data, sitemaps or keyword filler.
- Do not put template production instructions, model names, plan identifiers, costs or internal file paths in the rendered product. All visible copy, field errors, sample records, accessible labels and alternative text must be US English. The only optional template-library mention is the renderer-provided credit.

---
— Prompt by VibeFather · https://vibefather.ai/t/ai-tools-directory-website · CC BY-NC 4.0 (non-commercial; commercial use needs a VibeFather Pro license) · Request removal: https://vibefather.ai/takedown

Free for personal projects under CC BY-NC 4.0. Commercial use comes with Pro.