Оправдано ли создание спецификации для макета сайта, как в примере по ссылке ниже?

Если проект предполагается поддерживать в живом и обновляемом виде - лучше сделать спецификацию. Для одностраничников и промо - смысла нет. Лучше всего делается для портальных систем, где часто повторяющиеся элементы используются.

Если да, то как это сделать и как лучше организовать спецификацию?

То, как я делаю в своих проектах: первый дизайн делается полностью в UI (в первую очередь для показа клиенту). Потом основные элементы интерфейса переносятся в отдельный файл и по ним делается спецификация (размеры, отступы, цвета, шрифты, комбинации, варианты применения, особенности верстки, состояния, ограничения).
А вот потом начинается магия: поменял спецификацию, передал верстальщику - внесли правки, все счастливы; новая страница - собирается прототип в акшуре или еще в чем, передается верстальщику, а тот по спецификации собирает страницу. Время экономится в разы. Переделывать макеты нужды нет.
Фичачится все в отдельный .psd файл и с помощью Specctr и иногда с CSS Hat (чтобы облегчить задачу верстальщику при работе с градиентами и прочими эффектами). При наличии SVN или Git - любое обновление файла будет сигналом верстальщику об обновлении интерфейса.

В каких случаях оправдано создание UI-kit наподобие этого?

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