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

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

列表中不僅有免費(fèi)的工具，還有付費(fèi)的工具。好的東西自然有它的價(jià)值，難道不是么？它們可以簡(jiǎn)化你的工作流程，提高效率，不論你是設(shè)計(jì)師還是開發(fā)者，新手還是老司機(jī)，這些工具都相當(dāng)實(shí)用。

1. Smartmockups

Smartmockups 看名字就知道是一款和視覺稿設(shè)計(jì)相關(guān)的工具，它是迎合開發(fā)者、設(shè)計(jì)師和營(yíng)銷人員需求的一款新興的在線視覺稿設(shè)計(jì)工具。對(duì)，沒錯(cuò)，即使是營(yíng)銷和策劃人員也可以輕松借助這款工具來(lái)制作出視覺稿來(lái)向領(lǐng)導(dǎo)展示新計(jì)劃/新產(chǎn)品！所有的設(shè)計(jì)出來(lái)的視覺稿都可以個(gè)人使用和商用。

2. Reedsy

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

3. MJML

MJML 一種旨在盡量降低代碼成本的標(biāo)記語(yǔ)言，可以幫你制作響應(yīng)式的電子郵件。它的語(yǔ)義語(yǔ)法都相當(dāng)簡(jiǎn)單易懂，擁有豐富的組件庫(kù)供你選擇，盡量減少你的開發(fā)時(shí)間。

4. Phoenix Framework

Phoenix framework是一個(gè)相當(dāng)高效的網(wǎng)絡(luò)框架，速度可觀，可維護(hù)性強(qiáng)。通過(guò)將真正的技術(shù)和功能性的想法融為一體，將真正的簡(jiǎn)單和樂趣帶入到現(xiàn)代Web應(yīng)用的開發(fā)工作中去。你可以結(jié)合名為Channels 的實(shí)時(shí)流媒體技術(shù)，創(chuàng)造出擁有豐富的跨瀏覽器交互體驗(yàn)的原生移動(dòng)端應(yīng)用。

5. JS Tips

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

6. Color Safe

Color Safe 是一款配色生成器，它的特殊之處在于，它所生成的配色都是符合WCAG標(biāo)準(zhǔn)的方案，確保配色的可訪問(wèn)性，用戶瀏覽無(wú)障礙。

7. Vagrant Manager

Vagrant Manager 是一款 GUI應(yīng)用，它主要用來(lái)控制Vagrant。和MAMP相似，你可以通過(guò)它來(lái)查看Vagrant 是否在運(yùn)行，以及目前的運(yùn)行狀態(tài)。這款A(yù)PP目前擁有Mac和Windows的版本供你使用。

8. Mo.js

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

9. Branches

Branches 是一款 iOS 應(yīng)用，它讓你可以在iPad和iPhone上管理你的GitHub、GitLab 和 Bitbucket 項(xiàng)目。通過(guò)它，你可以創(chuàng)建或者關(guān)閉特定的問(wèn)題，查看回復(fù)，并且可以完美地解析Markdown語(yǔ)言。

10. Meatier

作為一款現(xiàn)代網(wǎng)站開發(fā)平臺(tái)，Meteor 無(wú)疑是強(qiáng)大而帶感的！但是三年的發(fā)展歷程讓它顯得略有一點(diǎn)過(guò)時(shí)，不過(guò)，Meatier 的存在彌補(bǔ)了它的缺陷。Meatier 并沒有前者的整體結(jié)構(gòu)，但是保留了相同的功能，更加靈活簡(jiǎn)單。

11. LettError

LettError 為你提供了可拓展、可插入的矢量形狀，它是基于Snap.svg 和 jQuery 來(lái)實(shí)現(xiàn)的。

12. Spine.js

Spine.js 是一款用來(lái)構(gòu)建JS MVC應(yīng)用的框架，簡(jiǎn)單、輕量級(jí)、無(wú)需復(fù)雜配置，也沒有大量無(wú)用的控件。

13. Bliss.js

Bliss.js 是在Vanilla.JS 的基礎(chǔ)上簡(jiǎn)化語(yǔ)法發(fā)展而來(lái)的，它原本被設(shè)計(jì)出來(lái)同Polyfill.io聯(lián)動(dòng)，并盡量獲得最大程度的瀏覽器支持。

14. Fansoro

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

15. Morphy Toolbar

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

16. Cocycles

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

17. Gatsby

結(jié)合React.JS，Gatsby 讓純文本變?yōu)閯?dòng)態(tài)博客和網(wǎng)站更加簡(jiǎn)單，它支持Markdown、HTML和React.js，并且很容易增加對(duì)其他文件類型的支持。

18. Reem

Reem 是一款使用JS寫成的靜態(tài)網(wǎng)站生成器，它同時(shí)具有命令行界面和編程界面，可以為個(gè)人使用，也可以協(xié)助自動(dòng)化站點(diǎn)生成。

【技多不壓身的設(shè)計(jì)師才有高薪資！】

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

原文地址：codegeekz
原文作者：Gavin
優(yōu)設(shè)譯文：@陳子木

本文由優(yōu)設(shè)網(wǎng)原創(chuàng)翻譯，請(qǐng)尊重版權(quán)和譯者成果，轉(zhuǎn)摘請(qǐng)附上優(yōu)設(shè)鏈接，違者必究。謝謝各位編輯同仁配合。

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國(guó)內(nèi)人氣最高的網(wǎng)頁(yè)設(shè)計(jì)師學(xué)習(xí)平臺(tái)，專注分享網(wǎng)頁(yè)設(shè)計(jì)、無(wú)線端設(shè)計(jì)以及PS教程。
【特色推薦】
設(shè)計(jì)師需要讀的100本書：史上最全的設(shè)計(jì)師圖書導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量104萬(wàn)的人氣微博@優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁(yè)設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com