/

Using Framer AI and ChatGPT to Build Sites

Using Framer AI and ChatGPT to Build Sites

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
  1. 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.

  2. 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.

  3. 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.

  4. 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.

  5. 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.

  6. 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.

  7. 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.

  8. 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.

  9. 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.

  10. 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.


Unlock everything with a one time payment

For the fraction of your next project, you can boost your workflow by 10 folds

psst, you're eligible for a secret discount. Use SCHOLARSJOURNEY at checkout

Pro

$89

One Time Payment

Full Access to the UI Kit

Styles, Components, Code Overrides, Sections & Layouts

4 Premium Templates

Foundation Kit for Figma

CMS Upgrades

Framer Code Genie GPT

Light, Dark & Dynamic Mode

Commercial License Only

Use for personal and client projects

Use for unlimited projects

Request Components & Layouts

Pro Creator

$149

One Time Payment

Everything in Pro

Template & Commercial License

Use UI Kit to create unlimited client projects and templates

  • Danny Sapio

    Founder, FramerOverrides, FramerAuth

    "If you're a freelancer, agency, or just someone who makes a lot of Framer sites then this such a solid investment and time saver. Nabeel you crushed it on this one dude!"

  • Carlos Geronimo

    Framer Designer

    "Anyone who creates things with Framer should keep the SegmentUI kit in mind to improve their workflow!"

  • Marc Andrew

    Founder, Cabanna Design System

    "This is a no-brainer. Nabeel is a master at his craft and someone who only builds products of extreme value to the end-user. 100% recommend."

Frequently Asked

For anything not covered here, mail us at hello@segmentui.com

What is SegmentUI?

Is this a one time payment or a subscription?

Will I get Future updates if I purchase now?

Is there a free version?

Do you have a student discount?

How do I access after purchasing?

What makes this special?

Is there a dark mode for the UI Kit?

Supercharge your Framer workflow

100+ variations of styles, components, interactions, layouts, transforms, code overrides, code components. Preview Kit

Join our Mailing List

Receive updates on release dates, products, tips, and tutorials. No spam. Unsubscribe anytime.

Unlock everything with a one time payment

For the fraction of your next project, you can boost your workflow by 10 folds

psst, you're eligible for a secret discount. Use SCHOLARSJOURNEY at checkout

Pro

$89

One Time Payment

Full Access to the UI Kit

Styles, Components, Code Overrides, Sections & Layouts

4 Premium Templates

Foundation Kit for Figma

CMS Upgrades

Framer Code Genie GPT

Light, Dark & Dynamic Mode

Commercial License Only

Use for personal and client projects

Use for unlimited projects

Request Components & Layouts

Pro Creator

$149

One Time Payment

Everything in Pro

Template & Commercial License

Use UI Kit to create unlimited client projects and templates

  • Danny Sapio

    Founder, FramerOverrides, FramerAuth

    "If you're a freelancer, agency, or just someone who makes a lot of Framer sites then this such a solid investment and time saver. Nabeel you crushed it on this one dude!"

  • Carlos Geronimo

    Framer Designer

    "Anyone who creates things with Framer should keep the SegmentUI kit in mind to improve their workflow!"

  • Marc Andrew

    Founder, Cabanna Design System

    "This is a no-brainer. Nabeel is a master at his craft and someone who only builds products of extreme value to the end-user. 100% recommend."

Frequently Asked

For anything not covered here, mail us at hello@segmentui.com

What is SegmentUI?

Is this a one time payment or a subscription?

Will I get Future updates if I purchase now?

Is there a free version?

Do you have a student discount?

How do I access after purchasing?

What makes this special?

Is there a dark mode for the UI Kit?

Supercharge your Framer workflow

100+ variations of styles, components, interactions, layouts, transforms, code overrides, code components. Preview Kit

Join our Mailing List

Receive updates on release dates, products, tips, and tutorials. No spam. Unsubscribe anytime.

Unlock everything with a one time payment

For the fraction of your next project, you can boost your workflow by 10 folds

psst, you're eligible for a secret discount. Use SCHOLARSJOURNEY at checkout

Pro

$89

One Time Payment

Full Access to the UI Kit

Styles, Components, Code Overrides, Sections & Layouts

4 Premium Templates

Foundation Kit for Figma

CMS Upgrades

Framer Code Genie GPT

Light, Dark & Dynamic Mode

Commercial License Only

Use for personal and client projects

Use for unlimited projects

Request Components & Layouts

Pro Creator

$149

One Time Payment

Everything in Pro

Template & Commercial License

Use UI Kit to create unlimited client projects and templates

  • Danny Sapio

    Founder, FramerOverrides, FramerAuth

    "If you're a freelancer, agency, or just someone who makes a lot of Framer sites then this such a solid investment and time saver. Nabeel you crushed it on this one dude!"

  • Carlos Geronimo

    Framer Designer

    "Anyone who creates things with Framer should keep the SegmentUI kit in mind to improve their workflow!"

  • Marc Andrew

    Founder, Cabanna Design System

    "This is a no-brainer. Nabeel is a master at his craft and someone who only builds products of extreme value to the end-user. 100% recommend."

Frequently Asked

For anything not covered here, mail us at hello@segmentui.com

What is SegmentUI?

Is this a one time payment or a subscription?

Will I get Future updates if I purchase now?

Is there a free version?

Do you have a student discount?

How do I access after purchasing?

What makes this special?

Is there a dark mode for the UI Kit?

Supercharge your Framer workflow

100+ variations of styles, components, interactions, layouts, transforms, code overrides, code components. Preview Kit

Join our Mailing List

Receive updates on release dates, products, tips, and tutorials. No spam. Unsubscribe anytime.