Webデザインにおけるプロトタイピングと呼ばれる手法は、ユーザーの使い勝手、すなわち人間中心設計を早い段階で仮説検証を繰り返して完成度を高める、という役割があります。また、プロジェクトの後半では、画面遷移やアニメーションなどの、デザインデータ単体ではなかなか表現できない部分に対して、実装後の手戻り（思ってたんと違う）を減らすための補足材料としても機能します。
例えば、デザイナーが、
ここはプニョっとした動きでお願いします。
と伝えても、デザイナーの頭の中では確固たるイメージがあるのかもしれませんが、なかなか伝わりづらいですね。
もう少し具体的に、
ここはお皿に乗せたプリンを動かしたような動きでお願いします。
と言ったとしたら、なんとなく伝わるでしょうか？
どっちにしても、それを実装する側からすると、手探りで作ってデザイナーの頭の中のイメージに近付けるように確認を繰り返す、という作業が予想されます。
そんなときにデザイナーが動きも含めたプロトタイプを作ることができると、言葉以上のデータを渡すことができます。
↑これはAdobe XDで作ったプロトタイプを埋め込んだものです。実際にタブをクリック（タップ）して、その動きを確認することができます。
Adobe XDで作ったプロトタイプを埋め込みコードとしてコピーする手法はこちらをご確認ください。
実際のXDファイルを渡すことで、デザイナーは一切コードを書かなくても、アニメーションとしての変形度合い、イージングやデュレーションなどの数値などを明確に実装者に伝えることができます。
このデータを元に実装したものがこちら（実際には両方自分が作ったものですが）。
プリンの動き。
これはAdobe XDを使った例ですが、プリンみたいな動きにしてください、なんて言う前に、自分に合ったツールを使ってプロトタイピングを作ってみるのも良いかもしれません。
