Make AI-Built Websites Look Professional: Custom Fonts & Colors

What you’ll get

You will get an AI-generated website that looks more unique and professionally designed, rather than a generic template. This approach works by avoiding the common default fonts and pure white backgrounds that make many AI-built sites look cheap, helping your site stand out.

Tools you need

• AI Chatbot (freemium): To give instructions for building your website with specific design choices.
• Google Fonts (free): To explore and confirm the font names mentioned in the recipe, or find alternatives.

Steps

1. Open your AI Chatbot: Go to your preferred AI chatbot (like ChatGPT, Claude, or Gemini) on your phone or computer. You should see the chat interface ready for your input.

2. Paste the design rules and your request: Copy the following text and paste it into the chatbot. Remember to replace the placeholder [Then tell it what to build, e.g., "Build me a simple portfolio website for a freelance graphic designer, showcasing my best work and contact information."] with your actual request for the website content and structure.

   Two hard rules for this build:
   1. Do not use Inter, Roboto, Arial, or any system font. Use "Fraunces" for headings and "Source Sans 3" for body, both from Google Fonts.
   2. Never use pure white (#FFFFFF) as the page background. Use a warm off-white: #FAFAF8. Also: no purple, no gradients. One accent colour only, a warm ochre #B0731F, used sparingly.
   
   [Then tell it what to build, e.g., "Build me a simple portfolio website for a freelance graphic designer, showcasing my best work and contact information."]

   The chatbot will begin processing your request, aiming to generate a website design that follows your specific font and color instructions.

3. Review the AI’s output: Look at the website design or code the AI provides. Check if it has used the specified fonts (Fraunces for headings, Source Sans 3 for body) and the warm off-white background (#FAFAF8) with the ochre accent color (#B0731F). You should see a design that avoids the typical AI-generated look, with a more intentional and professional feel.

4. Refine if needed: If the AI didn’t perfectly follow the instructions, you can ask it to make adjustments. For example, “Please ensure the background is #FAFAF8 and not pure white.” Continue refining until the design meets your expectations for fonts and colors.

Original source

This workflow was shared by Reddit user /u/Professional-Rest138, who discovered that specific font and color choices significantly improve the perceived quality of AI-generated websites. The original post highlighted how common AI defaults make sites look generic and how simple changes can make a big difference.

Notes & variations

• Free-tier alternatives: You can use other freemium AI chatbots like Claude (claude.ai) or Gemini (gemini.google.com) to achieve similar results, as they also allow for detailed instructions.
• Common mistake: A common pitfall is forgetting to include the design rules before your main request for the website content. Always provide the design constraints first so the AI incorporates them from the start.
• Tip for better results: Experiment with other font pairings from Google Fonts and different warm color palettes. The key is to avoid the most common default choices and create a unique visual identity for your site.