Back

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

Nabeel

Founder @ SegmentUI

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.


Loved by Designers, Developers and Founders

See what our 3500+ customers have to say

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

$99

One Time Payment

Full Access to the Figma UI Kit

Full Access to the Framer UI Kit

Full Access to the Framer Code Components & CMS Upgrades

Full Access to 4 Premium Framer Templates

Full Access to Framer Code Genie GPT

Request Components & Layouts

Get Updates Forever

Light, Dark & Dynamic Modes

Use for Unlimited Projects

Commercial License Only

Use for personal and client projects

Pro Creator

$199

One Time Payment

Everything in Pro

Template & Commercial License

Use UI Kit to create unlimited client projects and templates

Frequently Asked

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

General

What is SegmentUI?

Is it for Figma or Framer?

How do I access after purchasing?

What makes this special?

Is there a dark mode for the UI Kit?

Can I use it to create Framer templates?

Pricing

Can I buy components seperately?

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?

Supercharge Your Design Workflow

1000+ variations of styles, components, interactions, layouts, transforms, code overrides, code components for Framer & Figma. Power Up Now!

Join our Mailing List

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

Loved by Designers, Developers and Founders

See what our 3500+ customers have to say

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

$99

One Time Payment

Full Access to the Figma UI Kit

Full Access to the Framer UI Kit

Full Access to the Framer Code Components & CMS Upgrades

Full Access to 4 Premium Framer Templates

Full Access to Framer Code Genie GPT

Request Components & Layouts

Get Updates Forever

Light, Dark & Dynamic Modes

Use for Unlimited Projects

Commercial License Only

Use for personal and client projects

Pro Creator

$199

One Time Payment

Everything in Pro

Template & Commercial License

Use UI Kit to create unlimited client projects and templates

Frequently Asked

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

General

What is SegmentUI?

Is it for Figma or Framer?

How do I access after purchasing?

What makes this special?

Is there a dark mode for the UI Kit?

Can I use it to create Framer templates?

Pricing

Can I buy components seperately?

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?

Supercharge Your Design Workflow

1000+ variations of styles, components, interactions, layouts, transforms, code overrides, code components for Framer & Figma. Power Up Now!

Join our Mailing List

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

Loved by Designers, Developers and Founders

See what our 3500+ customers have to say

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

$99

One Time Payment

Full Access to the Figma UI Kit

Full Access to the Framer UI Kit

Full Access to the Framer Code Components & CMS Upgrades

Full Access to 4 Premium Framer Templates

Full Access to Framer Code Genie GPT

Request Components & Layouts

Get Updates Forever

Light, Dark & Dynamic Modes

Use for Unlimited Projects

Commercial License Only

Use for personal and client projects

Pro Creator

$199

One Time Payment

Everything in Pro

Template & Commercial License

Use UI Kit to create unlimited client projects and templates

Frequently Asked

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

General

What is SegmentUI?

Is it for Figma or Framer?

How do I access after purchasing?

What makes this special?

Is there a dark mode for the UI Kit?

Can I use it to create Framer templates?

Pricing

Can I buy components seperately?

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?

Supercharge Your Design Workflow

1000+ variations of styles, components, interactions, layouts, transforms, code overrides, code components for Framer & Figma. Power Up Now!

Join our Mailing List

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