Loading video...

Video Failed to Load

Go Home

Static PDF ➡️ interactive web app, all in one prompt! We used Gemini 3.7 Flash in Google AI Studio to transform a dense PDF annual report into a beautiful website. Using its native PDF understanding, the model easily extracted data, crunched the numbers, and generated delightful interactive UI in...

66,951 views • 1 month ago •via X (Twitter)

22 Comments

genevieveh@'s profile picture
genevieveh@1 month ago

Wohoo this was so fun! For anyone else who'd like to try, here is the exact prompt I used in AI Studio: "I need you to create an extremely stylish website to present our annual report to our donors and community. you must build a single page, interactive experience to display this report. readers must be able to both see the quantitative data and explore the qualitative data. focus on the "so what?". the page title should be: "The Urban Hive Project: 2026 Annual Report". I want the report to be in light mode. use your image generator tool to add relevant images. Critical instructons: - you should first analyse the quantitative and qualitative data to pull out key insights. then, start the design. - you MUST identify 7-8 key sections on the website (vertically - no subpages). each section must be visible by itself and not overlap with other sections, with sticky scrolling, and each section should have one key insight or "so what", with 2 or 3 data points or supporting text points, maximum. - you must primarily use oversized typography to bring your point across. Display headings should be highly contrasted in size - very large and tight tracking. - you must make HEAVY use of animations, parallax scrolling effects, scroll hooks, and physics effects. - extreme border-radius on main containers. - glassmorphism: use background blur, semi-transparent white/gray backgrounds, and thin white borders or floating UI elements. Soft, diffuse drop shadows rather than harsh borders. Import whatever packages you need to make this website absolutely stunning. The goal is minimalist, letting the insights and typography do the talking!" Last few instruction bullets are very optional, but 3.7 Flash does especially well if you give it specific instructions for UI styles that you like (or attach screenshots and say something like "draw design inspiration from the attached layouts").

Google for Developers's profile picture
Google for Developers1 month ago

@GoogleAIStudio Now this is a prompt. 👏 Thanks for sharing!

Google for Developers's profile picture
Google for Developers1 month ago

Build your own:

Wes's profile picture
Wes1 month ago

@GoogleAIStudio This impressive

AI Mastery Guide's profile picture
AI Mastery Guide1 month ago

@GoogleAIStudio PDF to interactive app, super cool 🤩

ThuNoJoy | SayTXT for ADHD Reading's profile picture
ThuNoJoy | SayTXT for ADHD Reading1 month ago

@GoogleAIStudio Dense PDFs becoming easier to enter is the real win here. Not every document needs more features; some just need a better first step.

Bharatron Technologies Pvt Ltd's profile picture
Bharatron Technologies Pvt Ltd1 month ago

@GoogleAIStudio @googledevs Native PDF understanding + code generation in one prompt is the real unlock here — no more manual data extraction into a template. This is where AI moves from 'assistant' to 'builder'. #BharatronTech

Sadequr Rahman's profile picture
Sadequr Rahman1 month ago

@GoogleAIStudio Awesome

Inflectiv AI ⧉'s profile picture
Inflectiv AI ⧉1 month ago

@GoogleAIStudio 🔥🔥

HypnoDreamz's profile picture
HypnoDreamz1 month ago

@GoogleAIStudio PDF magic ✨

Kostya | AI's profile picture
Kostya | AI1 month ago

@GoogleAIStudio Gemini 3.7 Flash shows how LLMs can directly ingest PDFs and output ready‑to‑use web pages, streamlining report publishing without manual coding.

ThuNoJoy | SayTXT for ADHD Reading's profile picture
ThuNoJoy | SayTXT for ADHD Reading1 month ago

@GoogleAIStudio Dense PDFs do not always need more features. Sometimes they just need a better first step into the content.

Tilo Lock's profile picture
Tilo Lock1 month ago

@GoogleAIStudio YOUTUBE𒀀𒀁𒀂𒀃𒀄NEAL MOHAN𒀅𒀆𒀇𒀈𒀉𒀊𒀋𒀌𒀍𒀎𒀏𒀐𒀑𒀒𒀓𒀔𒀕𒀖PARTNERSHIP PROGRAM𒀗𒀘𒀙𒀚𒀛𒀜𒀝𒀞𒀟𒀠𒀡𒀢𒀣𒀤𒀥𒀦𒀧𒀨𒀩𒀪𒀫𒀬𒀭𒀮𒀯𒀰𒀱𒀲𒀳𒀴8000 HOURS𒀵

TNT's profile picture
TNT1 month ago

@GoogleAIStudio Bees: “We made honey on rooftops.” Gemini 3.7: “Hold my prompt… here’s a full interactive website with parallax, glassmorphism, and an impact calculator.” Nature is healing… and also getting completely out-designed. 🐝📷✨

Forlais's profile picture
Forlais1 month ago

@GoogleAIStudio Yeah, a dense annual report turning into something you can actually click through is a lovely demo. CNA is the architecture behind our upcoming EvaEsi models.

Mark's profile picture
Mark1 month ago

@GoogleAIStudio AI usually creates the biggest step‑change when it can turn static data into live, interactive workflows automatically.

安叫兽|Bird🕊️ 🔶 BNB's profile picture
安叫兽|Bird🕊️ 🔶 BNB1 month ago

@GoogleAIStudio 一次提示能跑起来很爽,细节校对估计还是少不了。

AMstudio's profile picture
AMstudio1 month ago

@GoogleAIStudio Quel technique utiliser vous pour avoir ces effets fabuleux ? Parce que moi, il me fait galèrer.

我是老柯's profile picture
我是老柯1 month ago

@GoogleAIStudio how can you do this. Why does the webpage I generated is so plastic

Sebastian Buzdugan's profile picture
Sebastian Buzdugan1 month ago

@GoogleAIStudio how do you verify extracted numbers against source cells, since polished errors reach production fastest

Hammad Hamid's profile picture
Hammad Hamid1 month ago

@GoogleAIStudio Google is amazing

Adel Bucetta's profile picture
Adel Bucetta1 month ago

@GoogleAIStudio the real unlock is collapsing time between idea and shipped product. but what happens when ai accelerates the wrong output?

Related Videos