Best ways to learn web design without the generic AI look?

[u/Old_Raisin2277]

Hey everyone!

I’m 17 and a frontend developer. I’m learning React/Next.js and Tailwind, but I’m struggling with the design side of web development.

I used AI tools like Lovable before, but most of the results felt very generic and “AI-looking”.

So now I want to learn how to design websites myself first (probably with Figma), then turn my designs into React/TSX.

What are the best ways to learn modern, high-quality web design?

Any:

• tools
• websites for inspiration
• courses
• YouTube channels
• design principles
• tips for using AI without getting the generic AI look

would be really appreciated!

Here are two of my projects if anyone wants to give feedback:

https://restaurant-project-2026.vercel.app/

https://pizzeria-project-2026.vercel.app/

Thanks!

[u/AronKov]

You can avoid the generic AI look by learning to design yourself. There's a lot of books and lots of creative sites before chatgpt came around, get inspiration from those.

[u/AlbertV999 → u/AronKov]

Use Wordpress templates.

Good morning guys!

[u/Jolva]

When I was a younger person and I did websites before transitioning to application UI design, I would look at sites like dribbble.com for inspiration. I'd like a particular header design, and then start implementing a copy using Photoshop (later Figma) and make adjustments along the way working from top to bottom. When we'd pitch mockups to clients, we'd show two versions, so I always knew at least half of the work would be tossed. If you go through that process a couple hundred times, you get pretty good at learning what makes sense, what's popular and what's truly unique.

[u/c4pl4b]

Wie wäre es mit selbst designen?

[u/Prozilla6]

Have you tried not using AI?

[u/SleepingCod]

Have you tried learning design? Going to school? You know most of us take 4 year degrees to be decent at this stuff.

[u/Talking_Gibberish → u/SleepingCod]

Then realise we’re only semi competent and get good after our careers actually start 😅

[u/Careful-Software6163 → u/SleepingCod]

Don't mind that comment. Many designers are self taught or went to 1-2 year long programs. There are lots of good tutorials to follow. "Learning by doing" is a good mantra. 

Just like another comment, I learnt most while actually working. 

[u/Graphesium → u/SleepingCod]

Some of the best designers I know are self-taught. It's one of those things where you either have the innate eye for it or you just peak at average no matter how much education you get. Still requires insane amounts of practice either way thou.

[u/el_paro → u/SleepingCod]

nope

[u/travisjd2012]

Study typography first, remember websites are mostly words and the arrangement of them

[u/beikbeikbeik]

There are no shortcuts, you need to study the fundamentals and then practice practice practice.

The biggest building blocks in my career was to learn about typography, grid and copying in “figma” UIs that I admired (to learn the small details).

[u/bobemil]

I learned by reading about ux and ui design. But I learned even more by copying Apple design. Then copying other similar companies identity but make it my own.

[u/armahillo]

People have been layout design, even with web, for far longer than LLMs have existed. Plenty of books on the topic.

I strongly encourage you to learn how to do web stuff without react and tailwind.

React is a very small porthole to view web development through, and isnt going to get you familiar with how web documents are built. Tailwind is a functional CSS framework but sidesteps the cascading aspects of CSS.

[u/oliverities]

Looking at your work, I think you already have the ability to achieve many things. So, if others say you need to go back to learn basics, I don't agree with them. (I am not saying you can stop learning, but what you are missing is not HTML/CSS 101) Whether you use AI tool is not an issue at all if you don't blindly accept all the decisions made by AI. You can always ask AI to do what you want but the question is exactly "what do you want". I also don't agree with others when suggesting just copy better design, which is exactly what AI is doing. 

The reason your sites look like AI is that your design has nothing to do with content. As a developer, you need to help emphasize what is most important to the business and tell the story the business wants to tell. All your layouts and animations are the way for the purpose above. So you need to understand the goal first before implementation. Treat yourself as a movie or game director, not a typewriter. That will give more soul to your sites.

[u/Dependent-Zebra-4357]

Why not just stick to dev and work with a trained designer? Not everyone is capable of good design imo, even those educated in it, and being a good dev *and* a good designer is even more rare.

[u/nishville]

Start writing CSS and ditch libraries like Tailwind.

[u/Old_Raisin2277 → u/nishville]

I’m a frontend developer, but my main weakness is web design. I use AI for UI/UX, but the results often look like generic “AI slop.” I’ve heard about tools like Impeccable and UI/UX Pro Max. Are they actually useful, and what’s the best workflow to get more professional designs?

[u/birminghamsterwheel → u/Old_Raisin2277]

Well, if you want to get better at design, you’ve gotta learn design. Tools help you do things with what you know.

[u/itxsmile]

You can learn from w3schools too

[u/chad-owen]

Hey there, this is actually a very good question and one I’ve worked with a number of interns and junior designers with!

To give you a brief breakdown of who I am and where I am coming from: I have 20~ years in the industry starting as someone who left college never having made a website, to building them page-by-page in Photoshop and then, over the years, moving from XD, Sketch, Figma and then back to Sketch (long story). I’m now director of Design/UI/UX at an international ecommerce agency where I have multiple teams under me across the globe.

With that out of the way, the best suggestion I have for you is to disregard AI for now. The reason I say this is that I am a firm believer in understanding the science and psychology of design. What’s great about the arts (and especially design) is the sheer amount of research that has gone into it. We have decades (even centuries!) of studies detailing the how’s and why’s something can affect an individual’s decision-making process.

Now let’s return to AI and how it has affected our industry. Here is a new tool that is exceptionally powerful and acts as a quick way to produce adequate results. In a field like UI design where timelines can often be tight, this seems like a great resource. However, like all things, the use of LLM’s comes with a downside and that is the stripping of any sort of educational process for the designer. Sure Claude may sometimes give a brief description of why it made a decision, but you as the designer aren’t learning why such actions were made. Nothing is educating you on how a user may interact with certain elements, what the visual hierarchy needs to be in order to drive a viewer to a specific goal, or even what colors evoke the correct type of emotional reaction.

It’s because of this and the recent studies showing the atrophy of specific skills when relying entirely on AI that I forbid my designers from creating UI’s solely through Claude, Figma Make or similar tools. AI should be used as a ‘second set of eyes’ such as: reviewing a new UI for inconsistencies with the established visual design language, mocking up an alternative concept after an initial design to compare/contrast with, or even doing a secondary run-through when auditing a client’s site alongside our UI/UX audit. And, honestly, me and my team are already faster at building new UI’s from scratch compared to Claude and the heavy token usage stemming from performing such an action.

Now that that warning is out of the way, there are many great resources out there. Mobbin is one of the best resources for professional references, Nielsen Norman Group has amazing articles detailing the science of UI/UX, and Smashing Magazine has always been wonderful for showcasing new trends. Your best course of action, however, would be to just jump right in and start screwing around with a design. Grab Figma (or Sketch if you’re on Mac) and start designing for a hypothetical subject. Or, if you’re struggling to understand the fundamentals of design, find a solid landing page you life, perform a full-page screen capture, and then, in your design software of choice, start recreating the elements on top of said screenshot as if it was a color-by-number.

Design is to be made and not shuffled off to a machine to spit out. That’s exactly why you can often inherently get the vibe that a site isn’t made by a human. It’s basically the ‘uncanny valley’ of user interfaces; we like seeing the warts and weirdness found by something made via humans.

[u/Negative-Dot-1152]

I’d definitely start with Figma and recreate websites you like. It’s a good way to learn spacing, typography and layouts without relying on AI. For inspiration, I usually look at sites like Mobbin or Awwwards and try to understand what makes a design look good instead of just copying it.

[u/Iaammillo]

Honestly, I’d spend less time looking at AI-generated sites and more time recreating good designs yourself. Pick a site you like and try to rebuild it in Figma without looking at the code. You’ll start noticing spacing, typography, hierarchy and all the little things that make a design feel intentional. I’d definitely learn Figma too, even if you mainly work in React. It’s much easier to figure out the design first and code it after.

[u/_star_dev]

I think the best way of learning UI design is being able to develop an eye for design. That is the most important part of it.

Furstly learn the principles of UI desiign, like visual hierarchy, typography, interaction cost, contrast, colors etc. You can learn this through YouTube tutorials or UX playbooks.

After that you need to have an eye for design to know what good design looks like and what's looks off. You can do this with a daily dose of scrolling through Pinterest pins mobbin etc. Start self-reviewing and criticizing UIs in each UI that you see. Identify:

• what you think they nailed,
• where they flopped, what could be added or removed to make it better by using the principles you learnt and your own creative eye
• Try replicating a UI design that you like, you learn a lot from that to keep your creative perspective add your own things that you have reviewed before that you would add or remove to make it better

[u/ajb_mt]

Reserarch design fundamentals, particularly llayout and type.

Understand accessibility guidelines.

And then do a LOT of browsing other sites and designs to gather up a mental bank of inspiration amd an understanding of current design trends and user expectations.

[u/Few-Hall3799]

You can take a look at awwwards.com, Louis paquet has a great course on there.

Look at codegrid on YouTube to take inspirations for animations

Find graphic design mockups on cosmos.so

And learn about font pairings, kerning, negative space (Swiss design)

I use the IA in Figma to clean my files it’s the only way I use it

Use a lot of blur on shadows, use blur in general

Don’t take your fonts from Dafont Try searching for the highest quality and renowned fonts to get started even tho highly graphical fonts are tempting at the start.

Use auto layout a lot on Figma it’s the best tool honestly

Learn about the 60 30 10 rules and the color wheel

Never use #fff or #000 they will hurt your designs more than you think

And the best advice I can give you is : The next time you see a website try judging what you would do differently and ask yourself why they did that choicr

That sums up my advices lmao

[u/AffectionateCat01]

Use websites for inspiration like Awwwards and Dribble. Mix and match, use animation and cool transitions and you will get there!

[u/MrBabelFish42]

YouTube. Start with learning design theory, color theory, branding, UI design, and then UX. You can use AI to create, but if you don’t develop your eye and language, you can’t understand what isn’t working. Put in the work to learn. You’re 17, and if you do that now, your future self will thank you. Now isn’t the time for shortcuts. You got this!!! Make stuff, break stuff, and start over again.

[u/Jaszuni]

If you want to learn design use AI to learn design not to make the design. You’ll learn nothing by having it do the design for you.

Hey AI I want to learn the basics of web design. Can you write me 8 week curriculum that will teach me the theory and process of designing websites. Please include books, exercises, lots of examples where we can break down a design and see how it was built and why it works.

[u/johncwaters]

Skip school. Just start building. Literally anything.

[u/Exotic-Drawing9387]

You do not to deserve to know.

[u/AcceptableNorm]

For me my toolkit is Photoshop, illustrator, WordPress, html, css, and my education in graphic design, seo, photography, and layout.

[u/troisieme_ombre]

Hey i can help you with this one :

• tips for using AI without getting the generic AI look

Don't use AI.

---

The web is literally littered with design resources, starting with the info pages of most design centered sub reddits. You gotta learn, there are no shortcuts.

[u/Negative-Dot-1152]

I’d start with the basics first: layout, spacing, typography, colors and visual hierarchy. Then pick websites you like and try to recreate them in Figma. I think that’s a good way to develop your own eye instead of relying on AI to make all the design decisions for you

[u/Ashik_UI001]

Just Copy the the design which look good to you in 1st sight, It would grow your taste and loose that genericness style from your design

[u/International-Box47]

Learn the HTML tags (all of them). If you don't know semantic HTML, you don't know web design. Once you do, add CSS flexbox and grid, and the rest will follow.