Let’s Rebuild The 90s Web with AI

Let’s Rebuild The 90s Web ith AI Geocities meets GPT

Hello! I’m Lisi Staff Engineer @

INTRO To the 90’s eb. A Trip Down Memory Lane

WAYBACK MACHINE

webdesignmuseum.org

webdesignmuseum.org

webdesignmuseum.org

camerons orld.net

cameronsworld.net

GIFS: gifcities.org

geocities. restorati land.org

90’s eb Weirdly limited to HTML tables Bright Colors A place of personal expression and hobbies Pixelated Art It wasn’t polished and as complex as it is today Midi Music

90s Website Starter Pack ● 1 x Obscure Hobby ● LOTS of Blinking GIFs ● 1 x MIDI Background Tune (autoplay, obviously) ● Sharing your personal ramblings endlessly

Vercel V0

V0 Prompt # Core Identity - You are v0, Vercel’s AI-powered assistant. # Instructions You are always up-to-date with the latest technologies and best practices. Your responses use the MDX format, which is a superset of Markdown that allows for embedding React components we provide. v0 must only create one Code Project per response, and it MUST include all the necessary React Components or edits (see below) in that project. v0 MUST maintain the same project ID across Code Project blocks unless working on a completely different project. ### Structure v0 uses the tsx le=" le_path" syntax to create a React Component in the Code Project. NOTE: The le MUST be on the same line as the backticks. 1. v0 MUST use kebab-case for le names, ex:login-form.tsx`.

Vercel V0.De Good at 👍 Bad at 👍

• Layouts with Tailwind - Next.js le and folder structure - General ReactJs components and formatting - “Modern” code and UI component focus
• Lot’s of xed pixels and absolute positioning - Hard to do actual 90s HTML nested table layouts - HTML & CSS & JS, no media generation

CHATGPT Image Creation

CHATGPT PATTERN Creation

CHATGPT Images Good at 👍 - Mimics existing styles - Creates exible visuals FAST - Some safeguards for “fake image” manipulation Bad at 👍 - Small details, sometimes things are off - Often struggles with text - Consistent creations - Copyright

AI Sound Creation

90s Website Starter Pack ● 1 x Obscure Hobby ● ✅ LOTS of Blinking GIFs & Art ● ✅ 1 x MIDI Background Tune & slow connections ● Sharing your personal ramblings endlessly

Sam Goody

Meet Amanda Job Works at Sam Goody Passions Art, Music, Doodling in Class Assets Too Much Free Time Assets Access to the internet

AI PHOTO: Leonardo.AI

REALISTIC Photos ith AI - Tools : Leonardo.AI, Midjourney, DALL-E 3 - Can generate highly realistic images from text prompts - The line between real and AI-generated is blurring

Lo able Like Pair Programming… with a Robot

Input - Output

Lo able Prompt You are Lovable, an AI editor that creates and modi es web applications. You assist users by chatting with them and making changes to their code in real-time. You understand that users can see a live preview of their application in an iframe on the right side of the screen while you make code changes. Users can upload images to the project, and you can use them in your responses. You can access the console logs of the application in order to debug and use them to help you make changes. Not every interaction requires code changes - you’re happy to discuss, explain concepts, or provide guidance without modifying the codebase. When code changes are needed, you make ef cient and effective updates to React codebases while following best practices for maintainability and readability. You are friendly and helpful, always aiming to provide clear explanations whether you’re making changes or just chatting.

1. Code Quality and Organization: - Create small, focused components (< 50 lines) - Use TypeScript for type safety - Follow established project structure - Implement responsive designs by default - Write extensive console logs for debugging …. You understand that you can only modify allowed les and must use speci c commands: File Operations: - <lov-write> for creating or updating les. Must include complete le contents. - <lov-rename> for renaming les from original path to new path.

90s-ai. ercel.app Let’s see it live

03 To ards Agents The “Interns” Arrive

Claude 4 Agent Mode

Claude Agent Demo

04 Beyond 90s Nostalgia What AI is Changing

Web Then s. Web No 90’s web - Simple HTML Table Layouts FTP uploads Slow dial-up connections Patient users today - Complex SPAs Microservices Github & CI/CD AI code assistants Impatient users (and developers)

AI Is only as good as the data its trained ith: GarbaGe In-Garbage Out

What AI is changing SPEED : Prototyping & development got way faster CREATION FOR ALL : More people can build, design, make cool stuff FOCUS SHIFT : Less typing boilerplate → More strategy and re nement

Tips For You The Prompt Matters Be the Curator Be super speci c on what you want to achieve AI generates, you curate & assemble Use the right tool & model Claude for code + Stable Diffusion Have Fun for pixel art + ElevenLabs for sound GenAI is great for prototyping and getting small projects live

As arti cial intelligence evolves, we must remember that its power lies not in replacing human intelligence, but in augmenting it . The true potential of AI lies in its ability to amplify human creativity and ingenuity . — Ginni Rometty, Former CEO of IBM

Talk Resources https://github.com/lisilinhart/90s-ai https://90s-ai.vercel.app/ https://noti.st/lisi/

Resources https://www.cameronsworld.net https://in nitemac.org/ https://www.geocities.ws/oldtern et https://theoldnet.com/ https://geocities.restorativland .org/ https://oldweb.today/ http://oldcomputers.net/ https://www.webdesignmuseu m.org/exhibitions/web-design-i n-the-90s https://wiby.me/ https://gifcities.org/ http://web.archive.org/

Thank you! lisilinhart.info linkedin.com/in/lisi-linhart/