fast-faqs-screenshot

Project Overview

Fast FAQs

Upload screenshots of your app, get a help center. Generates structured support docs with FAQ schema that AI answer engines can parse and cite. Built for a hackathon, used on my live projects.

Founders and small teams ship features faster than they document them. Writing docs for a help center is boring and always at the bottom of the priority list. Meanwhile, more users are getting support answers from ChatGPT, Perplexity, and Google AI Overviews instead of visiting your docs page. If those answer engines can't parse your docs, users don't know how your product is used and they might conclude that a competitor's product is a better solution.

 

Solution

Fast FAQs takes screenshots of your app and turns them into a ready-to-publish help center. Upload screenshots in order, add a one-line caption to each ("billing page, users change plans here"), and the tool generates a product overview, feature explanations, and a categorized FAQ.

The AI infers functionality from screenshots. A settings page doesn't always reveal what the toggles do. So I added a captions field to help the human-in-the-loop provide context to the AI and this minimizes the liklihood of the docs from having hallucinated FAQs.

 

How it works

Screenshots and captions go to Claude's vision API. The system prompt tells the model to describe only what's visible or stated in captions, never invent features, and return structured JSON with an overview, features, and 8-15 frequently asked questions into 2-5 categories.

The output renders on screen immediately. From there you can preview the generated FAQs or export the data in two ways:

  • HTML export. A self-contained, styled help page with question-formatted h2 headings and embedded schema.org FAQPage JSON-LD. This is the part that makes docs citable by answer engines. You can preview the rendered page live in the app before downloading.
  • Markdown export. For pasting into whatever CMS you're already using.
The AEO angle

AEO (answer engine optimization) is why the output is structured the way it is. An AEO checklist panel sits next to the generated docs and scores 5 things: question-format headings, FAQPage schema embedded, self-contained answers, semantic HTML structure, and product overview present. It turns an invisible benefit into something you can see and verify. This helps build trust with the user.


What I used to build it

 Tools used:

  • React
  • Vite
  • Tailwind
  • Claude Sonnet for the vision-to-docs generation.
  • Netlify for hosting and serverless functions.

The example mode uses pre-baked Airbnb screenshots so you can see the full output without uploading anything.

dd-circle-white

© 2023 Danita Delce. All rights reserved.

email icon
linkedin logo