Creating Websites and Presentations with AI
Alexander Efremov, AI Expert
Aspirity Company
Email: ae@aspirity.com | Telegram: @sabbah13
The Magic of a Simple Prompt?
A Simple AI Request
Expectations vs. Reality when creating a website with a single simple AI prompt.
Expectation: A Masterpiece!
"Make me a beautiful website for a coffee shop!"
Reality (Often): Basic Skeleton
Very simple HTML, no styles or content.
What Went Wrong?
Why does this happen and how can we fix it? Let's find out!
Why is the Result "Underwhelming"?
- Lack of quality assets: AI doesn't always find or generate suitable images, videos, or texts.
- No well-thought-out styles and structure: Basic AI output often lacks design and user-friendly navigation.
- The site isn't published: Generated code needs to be hosted somewhere to be accessible online.
- Lack of uniqueness and branding: Generic solutions don't reflect the project's individuality.
Assets: Where to Get and How to Create?
Ready-made Assets: Photo and Video Stocks
Quality content is the foundation of any website or presentation.
Pexels โ free stock photos and videos.
Unsplash โ a large collection of free high-resolution photos.
Generating Images with AI
Create unique images from text descriptions.
ChatGPT 4o
Midjourney
Stable Diffusion
Google Imagen 4
Creating Videos with AI
From short clips to text animations.
Runway (Gen-2, Gen-3)
HeyGen (for videos with avatars)
Generating Audio and Voice
Voiceovers, music, and sound effects.
ElevenLabs (realistic speech synthesis)
Suno AI (music generation)
Udio (music generation)
Riffusion (music generation)
Frameworks and Generators: Structure and Style
Tools for creating modern structure and appearance.
UI Frameworks: Ready-made Design
Sets of pre-built components and styles.
Bootstrap (172kโ )
Tailwind CSS (87kโ )
shadcn/ui (85kโ )
Bulma (50kโ )
Meta-frameworks: Quick Start
Comprehensive solutions for modern web applications.
Static Site Generators: Speed and Simplicity
Creating fast websites from templates and data.
CMS: Convenient Content Management
AI generates the site, and you easily edit it through a CMS.
- Headless CMS: Strapi, Sanity.io - AI helps with content, CMS provides API.
- Traditional CMS with AI plugins: WordPress + AI Plugins.
- Many AI website builders (e.g., Durable.co) offer built-in editors.
AI can generate structure and initial content, which can then be easily imported and managed via CMS.
Showcasing to the World: Publishing (Deployment)
Putting your site online is easy!
Deployment Platforms
Services that automate the publishing process.
Many offer free tiers and automatic temporary domains.
Your Own Address: Domains
How to buy and link a unique name for your website.
Popular domain registrars:
Namecheap
GoDaddy
REG.RU (for .RU/.ะ ะค domains)
The linking process usually involves changing DNS records on the registrar's site to point to your hosting platform (Vercel, Netlify, etc.).
AI Developer Tools
From simple chatbots to specialized IDEs.
Browser-based Assistants
Quick code generation, explanations, refactoring.
AI Agents: Autonomous Development
Tools that can create entire applications from descriptions.
Replit (AI / Ghostwriter)
v0.dev (by Vercel) - UI generation
Lovable.dev
Bolt.new
Pro Tools: AI-IDEs and Plugins
Deep AI integration into the development process.
Presentations = Websites: Reveal.js
This presentation is made with Reveal.js!
Reveal.js: Interactive HTML Presentations
Reveal.js (69kโ on GitHub) is a framework for creating beautiful interactive presentations directly in the browser using HTML, CSS, and JavaScript.
Why Reveal.js?
- Interactivity: Embed web content, animations, interactive diagrams.
- Flexibility: Horizontal and vertical slides, themes, plugins.
- PDF Export: Easily share or print.
- Website: Published as a regular website, accessible via a link.
- Code Control: Full control over structure and style.
- Markdown Support: Write content in Markdown.
Online Editor: Slides.com
Slides.com is a commercial online editor built on Reveal.js. It allows creating and editing presentations in a user-friendly visual interface, without direct HTML editing.
Advanced Design with AI
Integrating AI into professional design tools.
Figma + AI = Design Magic
Popular UI/UX design tool Figma is actively integrating with AI:
- AI Plugins:
- Galileo AI: UI generation from text descriptions.
- FigGPT (and similar): ChatGPT integration for text/idea generation.
- Plugins for automating routine tasks.
- AI Assistants (e.g., Cursor): Can help with Figma via API or plugins for generating/modifying designs based on instructions.
Google Stitch: UI from Prompt
Google Stitch (announced at Google I/O, may be part of Google Labs or Project IDX) โ an experimental tool for generating UI mockups and ready HTML/CSS code from text or image prompts.
- Promises rapid prototype generation.
- Ability to export to Figma for further refinement.
- Shows the future of AI-driven design.
Your Action Plan: Checklist
- Choose a framework: Decide on the technological basis for your site (Bootstrap, Next.js, Astro, etc.).
- Gather/generate assets: Prepare texts, images, videos (stock sites, AI generation).
- Create and refine: Use AI tools (ChatGPT, Cursor, v0.dev) to generate and customize code and design.
- Publish the site: Deploy your project on Vercel, Netlify, or another platform.
- (Optional) Link a domain: Make your site accessible via a unique address.
- Gather feedback and improve: Analyze and develop your project.
Useful Links and Resources
- Pexels, Unsplash
- Image Generation: ChatGPT (DALL-E), Midjourney
- Video Generation: Runway, HeyGen
- Audio Generation: ElevenLabs, Suno AI
- Browser-based: ChatGPT, Claude AI, Gemini
- Agents: Replit AI, v0.dev, Lovable.dev
- AI-IDEs: Cursor, GitHub Copilot, Codeium
- Reveal.js, Slides.com
- Figma + AI Plugins (Galileo AI)
Logos provided by Logo.dev
Thank You for Your Attention!
Alexander Efremov
AI Expert, Aspirity Company
โ๏ธ ae@aspirity.com | Telegram: @sabbah13
