For me I usually design a bunch of high fidelity mockups to see what looks best and then start adapting the components to a style guide. Are there people here who actually design the system beforehand? I'm curious to hear about how you guys handle this process.
I think there are 2 different answers for this question:
1. if you are using a UI framework like Material design or Bootstrap: In this case usually I read the documentation and choose what UI components are useful for my project. After that we need an edit on that framework. This is where I usually start sketching new components and ...
2. if you are on your own: In this case I do what you said. Design some pages to show my taste on this project. After that I start completing components while designing pages. In this case you are creating a UI kit. Pages Determine how should components be designed. After designing some pages, your kit is ready to use for the rest of the project! but It's not the end and kit will change while project goes on!
In my experience if you're starting from scratch i.e. there are no technical limitations, existing patterns that you're using (material design) then its something that I tend to do in tandem with designs.
As im creating pages im simultaneously creating a design system - if you're using Sketch correctly using symbols alot of the legwork is being done for you in the symbols page when you create buttons, colours, components etc. This can be the foundation of your style guide.
A style guide is a living entity and changes a lot with the development of the product so creating it in tandem helps in my opinion. There will be continued work on it after to finish it off no doubt.