Сегодня нет никакого смысла с нуля создавать стили для типовых интерфейсов, кроме случая когда это является самим предметом вашей работы. В Figma в полном доступе есть сотни готовых решений. В каждую дизайн систему UI вложено сотни часов труда, и лучше сперва потратить свои несколько часов на изучение готовых решений, в поисках подходящего, чем окунаться с головой в создание своего.

Если вы про дизайн-системы ничего не знаете — начните изучение вопроса с этих библиотек дизайнов интерфейсов доступных в Фигме или просто используйте их:

Bootstrap 5 https://www.figma.com/community/file/1044316192441037087

United UI https://www.figma.com/community/file/1020079203222518115

Tailwind CSS UI https://www.figma.com/community/file/768809027799962739

Medusa UI https://www.figma.com/community/file/1278648465968635936

Align UI https://www.figma.com/file/PJ630SzPS3x2D807GYKHOk/

Для оформления веб-страниц часто нужна тень. В CSS есть тень, которую назвали почему-то «box-shadow», которая создаёт тень как от плоского прямоугольника, которая выглядит как его размытая исходная форма, а, не как ожидается из названия, как тень от коробки (box).

При этом достаточно часто нужна псевдотрехмерная тень, которая имела бы имитацию высоты предмета — когда в близи от объекта тень имеет небольшое размытие, а на расстоянии уже размывается. Например, для кнопок или карточек, или для изображений, которым надо сделать тень, чтобы она выглядела не как тень от открытки, а как тень от книги, которая имеет высоту. Такая псевдотрехмерная тень сильно бы спасла дизайнеров и фронтенд-разработчиков, сейчас такой эффект или имитируется картинкой или набором из теней «размытых форм», что приемлемо выглядит только при имитации теней от объекта небольшой высоты. 

И, соответственно, стоило бы назвать такие тени по их объёмности: тень, которая создается от плоского прямоугольника назвать «rectangle-shadow», а тень которая имитирует выдавливание прямоугольного параллелепипеда — «box-shadow».

Всем, кто делает сайты на WordPress рекомендую приобрести Crocoblock, там скидка 40% на Black Friday. В этом наборе плагинов есть мощнейший плагин JetEngine, позволяющий создавать записи любого типа и содержания. Один заменяет весь неудобный зоопоарк из плагинов ACF, Custom Post Type UI и Types. Поддержите украинских разработчиков:
https://vovkasolovev.ru/go/crocoblock/

Если вы знаете что такое Elementor, то знаете, что там только что появился простенький конструктор для Listing Grid — дизайн вывода карточек постов на сайте. В Crocoblock JetEngine давно есть намного более продвинутый конструктор Listing Grid, добавляющий возможность создания условий к запросу и встраивание других карточек.

Кроме этого в Crocoblock JetEngine есть собственный конструктор Личного кабинета. Сможете создать закрытую часть сайта, в которой пользователи могут заполнять и хранить свои данные. В комбинации с их же плагином JetFormBuilder это невероятная мощь! Ради личных кабинетов больше не нужно заводить проекты на Yii, Symfony или Laravel.
https://vovkasolovev.ru/go/jetformbuilder/

Crocoblock JetEngine работает и с редактором Gutenberg и c Elementor. Если вы до сих пор не пользуетесь Elementor, то очень рекомендую и его к приобретению на Black Friday. Окупите первым же созданым сайтом. Elementor это самый удачный, популярный и кастомизируемый конструктор страниц и дизайна темы (Page Builder и Site Builder).
https://vovkasolovev.ru/go/elementor/

О глобальной популярности Elementor очень легко судить — это единственный конструктор, для которого есть специальный раздел на Envato Market ThemeForest. Элементор — невероятно мощный инструмент. Позволяет визуально конструировать свои лендинги из готовых настраиваемых блоков. Лучше чем Tilda и WebFlow. Я даже в нем сразу прототипирую, Figma не нужна.
https://vovkasolovev.ru/go/envato-elementor/

Набор WordPress + Elementor + Crocoblock это достаточный набор чтобы решать практически любую сайтостроительную задачу. Работаю с этой связкой уже 3 года, это самый удобный стек для дизайнера сайтов. 

Записал ролик, с ликбезом про WordPress, чем хороша эта CMS, какие есть ключевые плагины, что такое Page Builder, что такое CPT и CF, какие проблемы я вижу у этого движка. На видео рисую на iPad в Procreate.

Изучал зоопарк тем с Page Builder для WordPress, и ключевые WYSIWYG и Rich Editor для веба, которые можно прикрутить к фреймворку или отдельно использовать. Встретил вот такое обсуждение https://news.ycombinator.com/item?id=15497972 и вот такой список на гитхабе https://gist.github.com/manigandham/65543a0bc2bf7006a487, который я отдельно себе сюда срисую и дополню. Так же насыпал звёздочек, на то что мне особенно приглянулось.

WordPress page builders

Плагины, конструкторы страниц сайта из блоков. Если указано что они на основе шорткодов, значит они чуть медленнее при генерации страниц.

• Elementor ⭐⭐ – https://elementor.com/?ref=3267

  Огромное коммунити, очень надёжный. Частично на шорткодах.

• SiteOrigin Page Builder – https://siteorigin.com/page-builder/

  Бесплатный и базовый. Полностью на основе шорткодов.

• Divi – https://www.elegantthemes.com/gallery/divi/

  Красивый, гладкий, но очень медленно с ним конструировать. Полностью на основе шорткодов.

• Oxygen 2 ­⭐ — https://oxygenbuilder.com/

  Очень перспективный низкоуровневый конструктор, в 2018 г. пока есть не все базовые умения есть. На шорткодах.

• Thrive Architect ­- https://thrivethemes.com/architect/

  Не трогал, демо не нашёл.

• Beaver Builder ­- https://www.wpbeaverbuilder.com/

  Старый успешный, сегодня Elementor его по всем сравнениям обошел.

На Visual Composer, WPBakery, Themify уже смотреть не стоит, на Brizy ещё совсем рано.

Темы, в которые встроен свой или сторонний конструктор сайта из блоков.

• Genesis – https://my.studiopress.com/themes/genesis/
• Avada –https://themeforest.net/item/avada-responsive-multipurpose-theme/2833226?ref=podhod
• Newspaper ⭐ – https://themeforest.net/item/newspaper/5489609?ref=podhod
• Newsmag – https://themeforest.net/item/newsmag-news-magazine-newspaper/9512331?ref=podhod
• Enfold ⭐ – https://themeforest.net/item/enfold-responsive-multipurpose-theme/4519990?ref=podhod
• Salient – https://themeforest.net/item/salient-responsive-multipurpose-theme/4363266?ref=podhod
• Betheme – https://themeforest.net/item/betheme-responsive-multipurpose-wordpress-theme/7758048?ref=podhod
• Theme.co X ⭐ – https://themeforest.net/item/x-the-theme/5871901?ref=podhod
• Weber – https://themeforest.net/item/weber-multipurpose-html-template-with-page-builder/21951995?ref=podhod
• The7 – https://themeforest.net/item/the7-responsive-multipurpose-wordpress-theme/5556590?ref=podhod
• Jupiter – https://themeforest.net/item/jupiter-multipurpose-responsive-theme/5177775?ref=podhod
• Total – https://themeforest.net/item/total-responsive-multipurpose-wordpress-theme/6339019?ref=podhod
• Impreza – https://themeforest.net/item/impreza-retina-responsive-wordpress-theme/6434280?ref=podhod
• Apex Pro – https://theme.co/pro/
• Qards – https://designmodo.com/qards/

Не сюда, но отдельно отмечу инструмент https://www.froala.com/design-blocks, который задуман, чтобы делать лендинги с разметкой Bootstrap из готовых блоков. Но мне он оказался удобным для ранней стадии эскизного прототипирования любого сайта.

Abstracted Editors

These use separate document structures instead of HTML, some are more modular libraries than full editors

• ProseMirror — http://prosemirror.net/ — supports collaborative editing, offers similar options to Mobiledoc for data structure
• Slate — https://github.com/ianstormtaylor/slate — framework to build more customized editors inspired by Draft, ProseMirror, Quill
• Draft — https://draftjs.org — rich text editor framework for React
• Quill ⭐ — http://quilljs.com/
• Trix — https://github.com/basecamp/trix — by Basecamp team and used in v3
• Scribe — https://github.com/guardian/scribe — by the Guardian team
• Etherpad ⭐ — http://etherpad.org/ — collaborative realtime editing framework, backend and editor 
• Texture — http://substance.io/texture/ — editor built on Substance library

Dom-Based Editors

• Froala ⭐ — https://www.froala.com/wysiwyg-editor — best editor (IMO) for traditional HTML structure
• Pell — https://github.com/jaredreich/pell — designed to be the simplest and smallest
• CKEditor (v5) — https://ckeditor.com/ — long history, very customizable, new architecture with built-in collaboration
• TinyMCE ⭐⭐ — http://www.tinymce.com/ — older editor, similar to CKEditor
• Textbox.IO — https://textbox.io/ — new from the owners of TinyMCE project
• Squire — https://github.com/neilj/Squire — used in FastMail webmail, better for text than images
• medium-editor — https://github.com/yabwe/medium-editor — clone of Medium.com’s editor
• Medium.js — http://jakiestfu.github.io/Medium.js — clone of Medium.com’s editor
• wysihtml — http://wysihtml.com/
• Redactor ⭐ — http://imperavi.com/redactor/
• Summernote — http://summernote.org/
• ZenPen — http://www.zenpen.io/
• Trumbowyg — https://alex-d.github.io/Trumbowyg/ — html5 editor as jquery plugin
• Jodit — https://xdsoft.net/jodit/