Traditionally, I've been working sketch → design → code; but, I smell a trend towards capture → adapt → code. This post is a short thought piece of this exploratory workflow and its effects on prototyping and/or design.
VisBug could do this, I called it "lift and shift" in 2019. Lift the styles and HTML right from the page, and shift it into your project. Not suprised to see it massively streamlined with AI.
SuperDesign #
SuperDesign is an in IDE design tool that can capture live UI via an extension and continue from there. Streamlined lift and shift. With this, you can visit somewhere like Cosmos as an inspiration/asset library, shop around, then import or reference the inspo into your project. You can also use Mobbin as a UI-pattern library.
One helluva set of tools for curating, testing, lifting and shifting UI for prototyping and design. Hopefully this does more good than bad.
Example Workflow #
Capturing web UI via the extension and building from there, here’s how this workflow might go:
- Use Mobbin, MagicUI, any UI-pattern library, Cosmos, or a live website to find screen examples you like
- Use SuperDesign’s browser extension to capture the UI (layout, typography, spacing)
- Use SuperDesign (or other design tools) to iterate/fork the captured UI into a version that fits your brand/style; tweak colors, typography, spacing, interactions
- Export the adapted UI into your project
This essentially flips the sequence of our prior design workflows. Go straight to high quality examples, fork, adapt, iterate, and adopt.
You doing this? Do you want to do this?
Thoughts?
