編者按：相比于在每月設計圈干貨里面漫無目的的“碰”，不如試試 CodeGeekz 推薦的精選工具合集。這些精選的工具同樣不拘泥于受眾，不論你是設計師還是開發者，同樣可以從中發掘出不少正好能用到的好工具，而且會更容易在有限的精品中發現正好用的上的干貨。

這次是CodeGeekz 的設計干貨專場！這里同樣有最新的設計和開發資源，這里精選的工具大都是針對設計師、開發者和自由設計師，其中的JS代碼、開源工具、CSS資源、設計素材基本上大家都用的到。

列表中不僅有免費的工具，還有付費的工具。好的東西自然有它的價值，難道不是么？它們可以簡化你的工作流程，提高效率，不論你是設計師還是開發者，新手還是老司機，這些工具都相當實用。

1. Smartmockups

Smartmockups 看名字就知道是一款和視覺稿設計相關的工具，它是迎合開發者、設計師和營銷人員需求的一款新興的在線視覺稿設計工具。對，沒錯，即使是營銷和策劃人員也可以輕松借助這款工具來制作出視覺稿來向領導展示新計劃/新產品！所有的設計出來的視覺稿都可以個人使用和商用。

2. Reedsy

Reedsy 是一款漂亮的文本格式管理、轉換和制作工具，即使你尚未將內容徹底寫完，也同樣可以拿來用。整個工具界面足夠漂亮，讓你不容易在寫作的時候分心，工具欄也足夠使用，并確保樣式整齊可控。在排版上，Reedsy 同樣能保證各種格式下足夠統一，無論是IngramSpark 下的POD格式，還是亞馬遜的AZW格式，蘋果的iBooks還是Kobo的格式，都可以輕松應對，統一漂亮。

3. MJML

MJML 一種旨在盡量降低代碼成本的標記語言，可以幫你制作響應式的電子郵件。它的語義語法都相當簡單易懂，擁有豐富的組件庫供你選擇，盡量減少你的開發時間。

4. Phoenix Framework

Phoenix framework是一個相當高效的網絡框架，速度可觀，可維護性強。通過將真正的技術和功能性的想法融為一體，將真正的簡單和樂趣帶入到現代Web應用的開發工作中去。你可以結合名為Channels 的實時流媒體技術，創造出擁有豐富的跨瀏覽器交互體驗的原生移動端應用。

5. JS Tips

JS Tips 是JS的開發技巧合集，其中涵蓋了JS語法的技巧、如何提高代碼效率和性能，以及諸如AngularJS這樣的框架的使用方式。這個合集的內容會每天增加。

6. Color Safe

Color Safe 是一款配色生成器，它的特殊之處在于，它所生成的配色都是符合WCAG標準的方案，確保配色的可訪問性，用戶瀏覽無障礙。

7. Vagrant Manager

Vagrant Manager 是一款 GUI應用，它主要用來控制Vagrant。和MAMP相似，你可以通過它來查看Vagrant 是否在運行，以及目前的運行狀態。這款APP目前擁有Mac和Windows的版本供你使用。

8. Mo.js

Mo.js 是一款完整的JS動效庫，目前它擁有一系列的預設參數，確保你能快速的上手使用。值得注意的是，Mo.JS 是模塊化的，你可以輕松移除不必要的功能，確保體量合理和流暢運行。

9. Branches

Branches 是一款 iOS 應用，它讓你可以在iPad和iPhone上管理你的GitHub、GitLab 和 Bitbucket 項目。通過它，你可以創建或者關閉特定的問題，查看回復，并且可以完美地解析Markdown語言。

10. Meatier

作為一款現代網站開發平臺，Meteor 無疑是強大而帶感的！但是三年的發展歷程讓它顯得略有一點過時，不過，Meatier 的存在彌補了它的缺陷。Meatier 并沒有前者的整體結構，但是保留了相同的功能，更加靈活簡單。

11. LettError

LettError 為你提供了可拓展、可插入的矢量形狀，它是基于Snap.svg 和 jQuery 來實現的。

12. Spine.js

Spine.js 是一款用來構建JS MVC應用的框架，簡單、輕量級、無需復雜配置，也沒有大量無用的控件。

13. Bliss.js

Bliss.js 是在Vanilla.JS 的基礎上簡化語法發展而來的，它原本被設計出來同Polyfill.io聯動，并盡量獲得最大程度的瀏覽器支持。

14. Fansoro

Fansoro 是一款開源、快速、輕量級且基于文件的內容管理系統，易于安裝，容易升級，便于使用。Fansoro 為開發者提供了基本的API、插件、主題。而Fansoro 其中包含的內容則只需要用Markdown語法來書寫，并放置到特定頁面的文件夾當中即可！

15. Morphy Toolbar

Morphy-Toolbar 是一款可變形的工具欄，它可以輕松地伸展和收縮，便于集成。

16. Cocycles

Cocycles 是一款為開源項目而生的搜索引擎，它目前已經支持JS，并且即將支持PHP、Java、Ruby和更多編程語言。

17. Gatsby

結合React.JS，Gatsby 讓純文本變為動態博客和網站更加簡單，它支持Markdown、HTML和React.js，并且很容易增加對其他文件類型的支持。

18. Reem

Reem 是一款使用JS寫成的靜態網站生成器，它同時具有命令行界面和編程界面，可以為個人使用，也可以協助自動化站點生成。

【技多不壓身的設計師才有高薪資！】

1. 平面設計：《超贊！設計師完全自學指南》
2. 交互設計：《交互設計師修煉指南！教你從零開始成為優秀交互設計師》
3. UI設計：《超實用新手指南！零基礎如何自學UI設計？》
4. 前端開發：《天貓高手來教你！零基礎如何系統地學習前端開發？》
5. 摳圖技巧：《從菜鳥到高手！PHOTOSHOP摳圖全方位攻略》
6. 配色方案：《色彩搭配速成！3個實用方法幫你全面搞定配色》
7. DPI指南：《基礎知識學起來！為設計師量身打造的DPI指南》
8. 交互設計自學路徑圖：《零基礎入門！給非科班生的自學路徑圖之交互設計篇》

原文地址：codegeekz
原文作者：Gavin
優設譯文：@陳子木

本文由優設網原創翻譯，請尊重版權和譯者成果，轉摘請附上優設鏈接，違者必究。謝謝各位編輯同仁配合。

【優設網 原創文章 投稿郵箱：2650232288@qq.com】

================關于優設網================
"優設網uisdc.com"是國內人氣最高的網頁設計師學習平臺，專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書：史上最全的設計師圖書導航：http://hao.uisdc.com/book/。
設計微博：擁有粉絲量104萬的人氣微博@優秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com