I've been working in the frontend web space for quite some time. I've created some terrible user experiences along the way. So bad that I refuse to take on any major project without someone competent driving UI/UX. Design is hard. When you encounter a terrible app it's usually because design was an afterthought to the team. Frontend developers slapping together markup and css on the fly is not design. Component libraries such as bootstrap, material design, ant design, or tailwind get you to a decent place for basic apps. However, if you need some bespoke components and your team does not have a capable designer you can end up with a fragmented/inconsistent user experience.

I've had the most success on projects where we:

• start with wire-frames
• build navigation flows
• create a comprehensive style guide covering color palette and typography
• identify common components and their variations
• responsive layouts if building for the web or cases where you need to support multiple screen sizes

Tools such as Adobe XD, Figma, and Sketch support all of the above. Most designers today use these tools in their design workflow. Ideally the design team is presenting these in design review meetings with stakeholders and sharing so that everyone can validate. These tools typically give you the ability to grab styles directly from the designs and drop them in your component stylesheets. Frontend teams should mirror components specified by the design team in their framework of choice i.e. React, Vue, Svelte, Angular, etc. On the dev side Storybook is a great tool for documentation. Having a living style guide and component library will ensure that your UX is consistent and will help accelerate feature development. You don't need to do all this from scratch. Figma has pretty good design system starters on the design side which your design team can use to get started. On the dev side you can fork an opensource component library (preferably one that supports themes) that is close enough to your needs and build from there.