新鮮實(shí)用！20款為前端和網(wǎng)頁(yè)設(shè)計(jì)師準(zhǔn)備的代碼工具

毫無(wú)疑問(wèn)，高效的代碼工具能夠讓前端和網(wǎng)頁(yè)設(shè)計(jì)師的工作事半功倍。實(shí)用的代碼工具不僅能夠幫你更為有效的應(yīng)付不同類型的任務(wù)，還能幫助你的項(xiàng)目更為有效的推進(jìn)。

今天推薦的前端代碼工具能夠讓你擁有更為富有成效的工作流程，這些工具涉及到字體、色彩、PSD、HTML/CSS等多個(gè)不同的環(huán)節(jié)。合理的選取適合你的工具，并且運(yùn)用到對(duì)的項(xiàng)目當(dāng)中，當(dāng)有奇效。

HTML COLOR CODES

如果你需要 HTML 色彩代碼，那么通過(guò)這里的取色器、色表，可以幫你快速獲取 Hex值，RGB和HSL值，對(duì)于設(shè)計(jì)師和前端而言非常實(shí)用。

FONTFLAME

Font Flame 是一個(gè)幫你無(wú)憂無(wú)慮地選取網(wǎng)站字體的服務(wù)，它會(huì)讓選取字體成為一種充滿樂(lè)趣的過(guò)程。

PURE CSS APPLE

這是一個(gè)純粹的蘋果設(shè)備的代碼轉(zhuǎn)換工具，全程只涉及到一些CSS3動(dòng)畫和一些JS代碼。

CODESIGN

Codesign 是一個(gè)超級(jí)方便的在線工具，能夠讓你的設(shè)計(jì)擁有組織明確、快速干凈的視覺(jué)反饋。

PIXELMAPGENERATOR

PixelMapGenerator 是一個(gè)幫你制作高交互性、創(chuàng)意十足的地圖的工具，你可以幫你保存成為圖片或者JS代碼，便于網(wǎng)站使用。

DROP.JS

Drop.js 是一款JS庫(kù)，可以幫你生成各種下拉框按鈕等控件或者元素。

APOSTROPHE

Apostrophe 是一個(gè)基于Node.JS 和MongoDB 的內(nèi)容管理系統(tǒng)，它可以幫你創(chuàng)造復(fù)雜的內(nèi)容驅(qū)動(dòng)的網(wǎng)站。

GRADIFY

Gradify 可以幫你從照片中找到主色調(diào)，并且生成一套可拓展、響應(yīng)式的CSS漸變色代碼。

XPOSIT

無(wú)需編寫代碼，Xposlt 可以以可視化的方式動(dòng)態(tài)編輯你的HTML文件 ，它還是一個(gè)開(kāi)源的內(nèi)容管理系統(tǒng)。

PARADEISER

Paradeiser 主要是幫你解決響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)中最關(guān)鍵的元素之一——導(dǎo)航。

COPYNHASTE

不論你是不是程序員，這個(gè)網(wǎng)站都能作為一個(gè)展現(xiàn)你打字技能的平臺(tái)而存在。

CODEDOODL.ES

CodeDoodle 是一個(gè)用來(lái)策劃創(chuàng)意代碼涂鴉的地方，你在這里能夠看到各種各樣優(yōu)秀有趣的動(dòng)畫。

IOS COLORS

這個(gè)網(wǎng)站會(huì)為你提供一系列基于iOS的色彩或者漸變色彩的合集，值得試試。

FRONTIFY

在Frontify 的幫助下，你能創(chuàng)造許多漂亮的樣式，并且輕松地保存。

COHESIVE?COLORS

Cohesive Colors 是一款能夠幫你創(chuàng)造充滿凝聚力配色方案的工具。

FLEXBOX

FlexBox 能夠幫你免費(fèi)學(xué)習(xí)CSS Flexbox，你可以從免費(fèi)提供的20個(gè)視頻中了解到關(guān)于CSS FlexBox 的知識(shí)。

GRID LAYOUT

這是一個(gè)輕量級(jí)的柵格系統(tǒng)，可以兼容橫向和縱向的Web應(yīng)用，最關(guān)鍵的是它還保留了對(duì)于舊版瀏覽器的支持和兼容。

CSSPLUS

這是一個(gè)為前端所準(zhǔn)備的基于CSS的工具，快速而強(qiáng)健是它的特色。

WALLOP

Wallop 是一個(gè)僅有4kb 的庫(kù)，幫你實(shí)現(xiàn)一款極簡(jiǎn)的輪播圖，用來(lái)展示圖片等內(nèi)容。

EXPORT KIT

Export Kit 是一款進(jìn)階的PS插件，幫助用戶將PSD轉(zhuǎn)化為HTML、CSS甚至是Wordpress主題、jQuery代碼，甚至能夠兼容到Android平臺(tái)。

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

1. 平面設(shè)計(jì)：《超贊！設(shè)計(jì)師完全自學(xué)指南》
2. 交互設(shè)計(jì)：《交互設(shè)計(jì)師修煉指南！教你從零開(kāi)始成為優(yōu)秀交互設(shè)計(jì)師》
3. UI設(shè)計(jì)：《超實(shí)用新手指南！零基礎(chǔ)如何自學(xué)UI設(shè)計(jì)？》
4. 前端開(kāi)發(fā)：《天貓高手來(lái)教你！零基礎(chǔ)如何系統(tǒng)地學(xué)習(xí)前端開(kāi)發(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ì)篇》

原文地址：webdesigndev
優(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ì)微博：擁有粉絲量150萬(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