Generate Unique Website Designs with AI using a Custom Design System
Job to be done: Generate unique website designs with AI by providing a custom design system
🇳🇬 Ways to use this in Nigeria
Ideas to get you started, adapt to your situation.
- Entrepreneur
Generate a unique website landing page concept for your handmade soap business, ensuring it matches your brand's calm, warm aesthetic using a custom AI design system.
- Student
Create a unique visual theme for your personal portfolio website, guiding the AI with specific fonts and colors to avoid generic templates.
- 9-5 employee
Develop a distinct visual style for a new internal company microsite, providing the AI with a brand design system to ensure consistency.
What you’ll get
You will get unique website design ideas or code snippets from an AI that do not look like typical AI-generated content. By giving the AI a specific “design system” (a set of rules for colors, fonts, and styles), you can guide it to create designs that match your brand’s unique look and feel, avoiding the common, repetitive aesthetics often seen in AI outputs.
Tools you need
- ChatGPT (freemium): An AI chatbot that can generate text, ideas, and code based on your instructions.
- Google Fonts (free): A large library of free fonts that the AI can reference for typography in its designs.
Steps
-
Open your AI chatbot: Go to the ChatGPT website on your phone or computer. If you don’t have an account, you can sign up for free. You should see the chat interface ready for your input.
-
Copy the design system: Carefully copy the entire text block below. This is your custom design system that will guide the AI.
Use this design system for everything you build. Follow it precisely. AESTHETIC: Soft, human, approachable, calm. Warm tones, gently rounded forms, welcoming, never clinical. COLOURS (use these exact values as CSS variables): - Background: #FBF7F2 (warm cream, never pure white) - Surface: #FFFFFF - Primary text: #3A342E (warm charcoal) - Secondary text: #8A8178 - Accent: #E07856 (warm coral) - Secondary accent: #7BA88F (soft sage green) - Border: #EDE6DD TYPOGRAPHY: - Headings: "Fraunces" (serif, from Google Fonts), weight 600 - Body: "Source Sans 3" (from Google Fonts) - Never use Inter, Roboto, or system fonts - Type scale: 14 / 15 / 16 / 22 / 56px, line height 1.7 SPACING: 4px base. Scale: 8 / 16 / 22 / 34 / 56px. Generous, never cramped. COMPONENTS: - Asymmetric hero: reassuring copy on one side, a functional card on the other, not centered - Rounded everything: cards, inputs, tags (12 to 24px radius) - Buttons: sage green pill for nav, solid coral for primary actions - Pill tags with a hairline border AVOID: purple, gradients, pure white backgrounds, sharp corners, …Make sure you have copied all the text from “Use this design system…” to “…sharp corners, …”.
-
Paste the design system: Paste the copied text into the message box of your AI chatbot and press Enter or send. The AI will acknowledge your input, or simply wait for your next instruction. It has now “learned” your design preferences.
-
Ask for your website design: Now, tell the AI what kind of website you want, making sure to refer to the design system you just provided. The author doesn’t share their exact prompt for this step, but a good starting point is to ask for a specific page type.
Design a landing page for a small business selling handmade natural soaps, strictly following the design system I provided. Include a hero section, a product showcase, and a contact form.You should receive a text-based description of a landing page, including details about its layout, colors, and fonts, all based on your custom design system. The AI might even provide CSS code snippets.
-
Review and refine: Read through the AI’s output. Check if it followed all the rules from your design system (e.g., no purple, correct fonts, rounded corners). If something isn’t quite right, you can ask the AI to revise specific parts, reminding it to “refer to the design system.” You should see a design concept that feels fresh and distinct, not like a generic AI template.
Original source
This workflow was inspired by a Reddit post from user /u/Professional-Rest138. The author shared this “one-paste fix” to help creators avoid the repetitive design patterns often generated by AI tools when asked to build websites.
Notes & variations
- Free-tier alternatives: If ChatGPT’s free tier isn’t enough, you can also use other freemium AI chatbots like Claude.ai (https://claude.ai) or Gemini (https://gemini.google.com) for similar results.
- Common mistake: A common pitfall is not explicitly telling the AI to “follow it precisely” or “strictly follow the design system” in your prompts. Without these clear instructions, the AI might revert to its default design tendencies.
- Tip for better results: For more detailed and accurate outputs, ask the AI to design one section of the website at a time (e.g., “First, design the hero section for the landing page, following the design system”). You can also ask it to generate specific CSS code for the design elements.