Back
Using Framer AI and ChatGPT to Build Sites
Nabeel
Founder @ SegmentUI
A comprehensive guide on coming with good prompts and using Framer's AI site generator to create sites in seconds
Prepare chatGPT
Prompt 1: You are promptGPT. You will generate prompts that I can enter into an AI site builder based on my ideas and the design style i require. The prompt will be formatted as a descriptive paragraph without bullet points. Do you understand?
Get Examples
After preparing chatGPT, you can start asking it for prompts. Prompt: Generate 10 prompts for different types of portfolio websites with different types of designs
Ask bard to summarize design styles of websites you like
ex : describe the design style of the site http://reflect.app in detail Alternatively, you can go to http://godly.website and check the styles for websites you like Use the style to generate prompt variations.
Examples of Some Prompts
Design a portfolio website for a photographer with a minimalist style, focusing on clean lines, ample white space, and emphasizing the visual impact of high-quality imagery through large, full-screen photo backgrounds, grid-based image galleries with minimal captions, and elegant typography that complements the aesthetics of the photographs.
Create a portfolio website for a graphic designer that showcases their bold and vibrant style, incorporating eye-catching animations and transitions, vivid color schemes (such as neon and contrasting hues), and unconventional layouts with asymmetrical design elements. Experiment with bold typography and dynamic shapes to create an energetic and visually engaging experience.
Develop a portfolio website for a fashion designer that exudes elegance and sophistication, using a dark and moody color palette (e.g., deep purples, rich blacks), sleek typography with a mix of serif and sans-serif fonts, and incorporating parallax scrolling effects to create a sense of depth. Integrate video backgrounds or subtle animations to highlight the movement and texture of fabrics.
Craft a portfolio website for an architect with a modern and minimalist style, featuring clean lines, grid-based layouts, and showcasing their portfolio of architectural designs with stunning visual representations. Utilize a monochromatic color scheme, bold geometric shapes, and incorporate interactive 3D models or virtual tours to immerse visitors in the architectural projects.
Build a portfolio website for an illustrator that embraces a whimsical and hand-drawn aesthetic, with playful animations, vibrant colors inspired by watercolor palettes, and interactive elements that bring their artwork to life. Use textured backgrounds, hand-lettered typography, and incorporate a sketchbook-like layout to evoke a sense of creativity and artistic expression.
Create a portfolio website for a web developer with a futuristic and tech-inspired style, incorporating sleek typography with geometric sans-serif fonts, bold color accents (such as electric blues or neon greens), innovative UI/UX interactions, and clean, minimalistic layouts. Use subtle animations and transitions to convey a sense of dynamism and cutting-edge technology.
Design a portfolio website for a landscape architect with a natural and organic style, utilizing earthy color palettes (such as greens, browns, and warm earth tones), textured backgrounds that resemble natural materials (like wood or stone), and incorporating large-scale photography of breathtaking outdoor spaces. Implement smooth scrolling effects to mimic the experience of exploring a real landscape.
Develop a portfolio website for a UX/UI designer with a clean and user-focused style, utilizing a minimalistic design approach, a monochromatic color scheme (such as shades of gray or cool blues), and emphasizing user flow and intuitive navigation. Incorporate interactive prototypes, user testimonials, and visual representations of the design process to showcase the designer's expertise in creating seamless user experiences.
Craft a portfolio website for a motion graphics artist with a dynamic and cinematic style, incorporating video backgrounds, kinetic typography, and engaging animations. Utilize a dark color scheme with contrasting vibrant accents, creating a dramatic visual impact. Implement parallax scrolling and scrolling-triggered animations to enhance the storytelling and captivate the audience.
Build a portfolio website for a product designer with a sleek and futuristic style, featuring clean lines, minimalist layouts, and utilizing a monochromatic color palette with metallic accents. Incorporate interactive 3D product renderings, seamless transitions between project sections, and use innovative scrolling techniques, such as long-scrolling or horizontal scrolling, to create a unique and immersive browsing experience.