在信息爆炸的今天，設計師要通過網絡尋找設計素材和工具是一件簡單的事情，相應的，要找到真正可靠且素質優秀的素材，也越發的不容易。在海量的網站中尋找一個符合需求的素材，花費在搜索和篩選上的時間也越來越長。這種情況使得今天這樣的設計工具/素材推薦類的文章與合集顯得更有意義，也彌足珍貴。

由於網頁設計師和開發者之間的界限越來越模糊，兩者所用的工具和素材的交叉重疊的情況也非常普遍。今天所推薦的這15項全新的工具/素材裡，應該有很多都值得網頁設計從業者們收入囊中。這當中涵蓋了設計類應用、框架、分析工具、柵格系統等多種類別，單把它們放到一起，就足以組成一個網頁設計師的日常用工具合集了。接下來我們具體看看這些新工具能幫你做哪些事情。

1、Frontify

網站名稱：Frontify

網站鏈接：https://frontify.com/styleguide

Frontify

Frontify 可以讓你在5分鐘內創建一套漂亮而完備的風格指南！這個在線工具有趣而簡單，讓你維護品牌風格和樣式快速而方便。由於Frontify 優秀的用戶體驗設計，你可以很快上手，即使你有專業的需求，Frontify 的說明文檔也可以引導你實現一些更細緻更專業的東西。

2、Flarum

網站名稱：Flarum

網站鏈接：http://flarum.org/

Flarum

Flarum 是一套簡約易用的開源論壇系統。如果你需要一個相對簡單的論壇網站的話，可以考慮Flarum，它界面簡單且可以快速上手，讓你更多的專注於話題討論。Flarum的論壇頁面滾動加載流暢，無需等待頁面加載。

3、Lightning Design Systems

網站名稱：Lightning Design Systems

網站鏈接：http://www.lightningdesignsystem.com/

Lightning Design Systems

這個名為閃電設計系統的工具專注於構建體驗優秀的企業級APP。在這套系統的支持之下，你可以快速地對整個界面進行深度定製，保持整個界面保持高度的一致性而無需讓工程師在此耗費更多精力，你所需要做的就是下載那些無平臺限制的CSS框架，然後開工就可以了。你可以參考這套系統的詳細說明作出符合SalesForce生態的優質APP，輕鬆地調用SalesForce的核心視覺組件和交互模式，拿出最佳的方案。

4、Rucksack

網站名稱：Rucksack

網站鏈接：http://simplaio.github.io/rucksack/

Rucksack

Rucksack 是一款有趣的CSS工具，讓CSS的開發過程更加有趣了。Rucksack 是基於PostCSS構建的，模塊化設計，沒有冗餘，運行起來飛快。將Rucksack融入到你的開發流程是很簡單的，Rucksack對絕大多數的工具都有相應的插件。由於它是基於PostCSS來構建的，所以它同其他的CSS處理工具都能很好的兼容，甚至能夠同Stylus直接協同。

5、GridLayout

網站名稱：GridLayout

網站鏈接：https://ghinda.net/gridlayout/

GridLayout

GridLayout是一款輕量級的柵格系統，用以製作水平滾動或者垂直滾動的Web應用，並且能夠兼容舊版的瀏覽器。如果你需要創建複雜的佈局，並且需要對舊版的瀏覽器進行兼容，選擇GridLayout是很不錯的。這套工具涵蓋了1KB大小的CSS文件和大概0.5KB的JS文件，如果你只需要支持更為現代的瀏覽器，最好不要使用Flexbox。這個工具是基於MIT的協議來分發的。

6、Grid.Guide

Big Bite 的員工發現計算柵格的寬度是一件非常惱人的事情，尤其是在嵌套結構下。正是在這種需求的驅動下，他們發明了這款Grid.Guide工具。這款工具會根據最大寬度和列數來幫你計算可能的排列組合，生成對應的PNG文件，讓你可以直接託拽到相應的工具中使用。更重要的是，Grid.Guide是完全免費的！

7、Quantity Queries

網站名稱：Quantity Queries

網站鏈接：http://quantityqueries.com/

Quantity Queries 是一款幫你進行數量查詢的工具。