This is why I've implemented a prototyping framework at Catalyze that's built with Angular, the same framework we use on the production front-end.
The flow typically looks like this:
1. Create conceptual wireframes
2. Build static UI components (typically in sketch)
- This step helps us define the look and feel of the product before jumping into code. However these are not full page mockups. It's more like an internal UI kit, and for the most part, it's fairly standard across products. So we don't have to update it often.
3. Build the styleguide from the UI kit in Sass (within the framework)
- Again, this is fairly standard so it's mostly templatized. We have an internal UI styleguide that's built already. So most of the changes per product are minimal (they're mostly small tweaks to give each product more character).
4. Build the prototype (within the framework)
- Since we use a template for each new prototype things like routing and more complex Angular concepts are already set up. Because of this designers aren't forced to approach the steep part of the hockey stick. They can stick to the view layer.
The flow typically looks like this:
1. Create conceptual wireframes
2. Build static UI components (typically in sketch)
3. Build the styleguide from the UI kit in Sass (within the framework) 4. Build the prototype (within the framework)