六月來了，設計師與開發者的工具箱又該充實了！這份精選合集匯總了當月最實用的網站應用、框架、柵格系統、遊戲平台、靈感資源、Photoshop 插件、文本編輯器，以及多款優質新字體。絕大多數資源完全免費，無論你是網頁設計師、前端工程師還是 UI 設計師，都能在裡面找到順手的利器。

資源清單一覽

Oozled — 創意資源大搜羅

Oozled 精心整理了全網創意資源，分類涵蓋字體、圖標、CMS 系統、設計靈感、研討會、配色方案等，是尋找靈感與素材的絕佳起點。

The Awesome Free Toolbox — 免費網頁設計工具箱

收錄圖片素材、網頁模板、甚至虛擬主機推薦，幫你零成本搭建專案雛形。

Weblox — Bootstrap 響應式頁面生成器

無需寫代碼，拖拽即可生成基於 Bootstrap 的全響應式頁面，快速產出原型。

Scribe — 富文本編輯器框架

由 Guardian 開源，解決瀏覽器差異，內建實用預設屬性，適合需要自定義編輯體驗的專案。

Card — 信用卡表單最佳實踐

僅需一行代碼，純 CSS/HTML/JS 實現，四種卡片樣式皆帶動畫，極大提升表單體驗。

Simple Sharing Buttons Generator — 社交分享按鈕生成器

支援 Facebook、Twitter、Google+ 等多平台，多種樣式免費生成，無需引入重型 SDK。

PlayCanvas — 開源 WebGL 遊戲引擎

支援多人協作開發，適合瀏覽器端 3D 遊戲與互動體驗構建。

Kivo — PPT/PDF 批註神器

拖入文件即可線上標註，團隊審稿、設計驗收不再來回郵件。

Griddify — PS 自定義柵格一鍵生成

支援 Photoshop CS6/CC，讓垂直柵格佈局不再手動對齊（CS6 存在已知小 Bug）。

Screenshotter — iOS 截圖管理應用

自動區分照片與截圖，支援資料夾歸檔與快速分享，移動端設計師的歸檔利器。

Dept. of Design Web Field Manual — 網頁設計領航手冊

2014 夏季版，經過嚴格分類的資源合集，涵蓋設計流程、工具、規範等核心知識。

The Day's Color — 每日配色靈感

從實物、音樂、生活場景中提取配色，持續更新，打破配色瓶頸。

A to Z CSS — CSS 微課程周刊

每期 4-7 分鐘，碎片化學習 CSS 核心技巧，適合利用通勤時間精進技能。

Tumblr Boilerplate — Tumblr 模板開發基石

基於 HTML5，支援所有日誌類型，效能優化開箱即用。

Get Shit Done — 免費 UI 元件庫

按鈕、導航、通知、JS 組件等開箱即用，付費版解鎖更多高階組件。

Pho Devstack 1.0 — 前端自動化管理器

整合編譯、壓縮、CSS 前綴等任務，讓構建流程標準化、可復用。

Filament — 網站應用「商店」

拖拽安裝免費應用，無需寫代碼即可為網站擴展功能，降低技術門檻。

Cody — HTML/CSS/JS 代碼片段庫

導航、購物車、Hero 區塊等常用模組，複製即用，加速前端開發。

Dimensions Toolkit — 響應式測試 Chrome 插件

離線可用，自定義斷點，一鍵刷新預覽多尺寸，另提供線上版本。

Framer.js — 交互原型神器

將靜態設計稿轉為可交互的動畫原型，驗證交互邏輯、展示動效細節。

Tiny PMS Match — Pantone 色彩生活化

用 iPhone 5 拍攝、Snapseed 處理，將潘通色號與生活小物關聯，色彩靈感隨手可得。

randomColor — 智能配色生成器

預設只生成「誘人色彩」，自動過濾灰、褐、墨綠等低飽和色，JS 一鍵調用。

Famo.us — 3D JavaScript 應用框架

開源 3D 佈局引擎與物理動畫引擎，讓網頁具備原生級流暢體驗。

這份合集不僅是工具清單，更是拓寬技術視野的窗口。建議收藏並定期回顧，將適合自己工作流的工具內化為生產力。祝各位設計師六月滿載而歸！