毫無疑問，高效的代碼工具能夠讓前端和網(wǎng)頁設(shè)計師的工作事半功倍。實(shí)用的代碼工具不僅能夠幫你更為有效的應(yīng)付不同類型的任務(wù)，還能幫助你的項(xiàng)目更為有效的推進(jìn)。
今天推薦的前端代碼工具能夠讓你擁有更為富有成效的工作流程，這些工具涉及到字體、色彩、PSD、HTML/CSS等多個不同的環(huán)節(jié)。合理的選取適合你的工具，并且運(yùn)用到對的項(xiàng)目當(dāng)中，當(dāng)有奇效。
HTML COLOR CODES
如果你需要 HTML 色彩代碼，那么通過這里的取色器、色表，可以幫你快速獲取 Hex值，RGB和HSL值，對于設(shè)計師和前端而言非常實(shí)用。
FONTFLAME
Font Flame 是一個幫你無憂無慮地選取網(wǎng)站字體的服務(wù)，它會讓選取字體成為一種充滿樂趣的過程。
PURE CSS APPLE
這是一個純粹的蘋果設(shè)備的代碼轉(zhuǎn)換工具，全程只涉及到一些CSS3動畫和一些JS代碼。
CODESIGN
Codesign 是一個超級方便的在線工具，能夠讓你的設(shè)計擁有組織明確、快速干凈的視覺反饋。
PIXELMAPGENERATOR
PixelMapGenerator 是一個幫你制作高交互性、創(chuàng)意十足的地圖的工具，你可以幫你保存成為圖片或者JS代碼，便于網(wǎng)站使用。
DROP.JS
Drop.js 是一款JS庫，可以幫你生成各種下拉框按鈕等控件或者元素。
APOSTROPHE
Apostrophe 是一個基于Node.JS 和MongoDB 的內(nèi)容管理系統(tǒng)，它可以幫你創(chuàng)造復(fù)雜的內(nèi)容驅(qū)動的網(wǎng)站。
GRADIFY
Gradify 可以幫你從照片中找到主色調(diào)，并且生成一套可拓展、響應(yīng)式的CSS漸變色代碼。
XPOSIT
無需編寫代碼，Xposlt 可以以可視化的方式動態(tài)編輯你的HTML文件 ，它還是一個開源的內(nèi)容管理系統(tǒng)。
PARADEISER
Paradeiser 主要是幫你解決響應(yīng)式網(wǎng)頁設(shè)計中最關(guān)鍵的元素之一——導(dǎo)航。
COPYNHASTE
不論你是不是程序員，這個網(wǎng)站都能作為一個展現(xiàn)你打字技能的平臺而存在。
CODEDOODL.ES
CodeDoodle 是一個用來策劃創(chuàng)意代碼涂鴉的地方，你在這里能夠看到各種各樣優(yōu)秀有趣的動畫。
IOS COLORS
這個網(wǎng)站會為你提供一系列基于iOS的色彩或者漸變色彩的合集，值得試試。
FRONTIFY
在Frontify 的幫助下，你能創(chuàng)造許多漂亮的樣式，并且輕松地保存。
COHESIVE?COLORS
Cohesive Colors 是一款能夠幫你創(chuàng)造充滿凝聚力配色方案的工具。
FLEXBOX
FlexBox 能夠幫你免費(fèi)學(xué)習(xí)CSS Flexbox，你可以從免費(fèi)提供的20個視頻中了解到關(guān)于CSS FlexBox 的知識。
GRID LAYOUT
這是一個輕量級的柵格系統(tǒng)，可以兼容橫向和縱向的Web應(yīng)用，最關(guān)鍵的是它還保留了對于舊版瀏覽器的支持和兼容。
CSSPLUS
這是一個為前端所準(zhǔn)備的基于CSS的工具，快速而強(qiáng)健是它的特色。
WALLOP
Wallop 是一個僅有4kb 的庫，幫你實(shí)現(xiàn)一款極簡的輪播圖，用來展示圖片等內(nèi)容。
EXPORT KIT
Export Kit 是一款進(jìn)階的PS插件，幫助用戶將PSD轉(zhuǎn)化為HTML、CSS甚至是Wordpress主題、jQuery代碼，甚至能夠兼容到Android平臺。
【技多不壓身的設(shè)計師才有高薪資！】
- 平面設(shè)計：《超贊！設(shè)計師完全自學(xué)指南》
- 交互設(shè)計：《交互設(shè)計師修煉指南！教你從零開始成為優(yōu)秀交互設(shè)計師》
- UI設(shè)計：《超實(shí)用新手指南！零基礎(chǔ)如何自學(xué)UI設(shè)計？》
- 前端開發(fā)：《天貓高手來教你！零基礎(chǔ)如何系統(tǒng)地學(xué)習(xí)前端開發(fā)？》
- 摳圖技巧：《從菜鳥到高手！PHOTOSHOP摳圖全方位攻略》
- 配色方案：《色彩搭配速成！3個實(shí)用方法幫你全面搞定配色》
- DPI指南：《基礎(chǔ)知識學(xué)起來！為設(shè)計師量身打造的DPI指南》
- 交互設(shè)計自學(xué)路徑圖：《零基礎(chǔ)入門！給非科班生的自學(xué)路徑圖之交互設(shè)計篇》
原文地址：webdesigndev
優(yōu)設(shè)譯文：@陳子木
本文由優(yōu)設(shè)網(wǎng)原創(chuàng)翻譯，請尊重版權(quán)和譯者成果，轉(zhuǎn)摘請附上優(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"是國內(nèi)人氣最高的網(wǎng)頁設(shè)計師學(xué)習(xí)平臺，專注分享網(wǎng)頁設(shè)計、無線端設(shè)計以及PS教程。
【特色推薦】
設(shè)計師需要讀的100本書：史上最全的設(shè)計師圖書導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計微博：擁有粉絲量150萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計 ，歡迎關(guān)注獲取網(wǎng)頁設(shè)計資源、下載頂尖設(shè)計素材。
設(shè)計導(dǎo)航：全球頂尖設(shè)計網(wǎng)站推薦，設(shè)計師必備導(dǎo)航：http://hao.uisdc.com
復(fù)制本文鏈接 文章為作者獨(dú)立觀點(diǎn)不代表優(yōu)設(shè)網(wǎng)立場，未經(jīng)允許不得轉(zhuǎn)載。
繼續(xù)閱讀本文相關(guān)話題
發(fā)評論！每天贏獎品
點(diǎn)擊 登錄 后，在評論區(qū)留言，系統(tǒng)會隨機(jī)派送獎品
2012年成立至今，是國內(nèi)備受歡迎的設(shè)計師平臺，提供獎品贊助 聯(lián)系我們
品牌形象設(shè)計標(biāo)準(zhǔn)教程
已累計誕生 726 位幸運(yùn)星
發(fā)表評論
↓ 下方為您推薦了一些精彩有趣的文章熱評 ↓