困擾
設計師給出靜態的高保真圖片， 需要前端工程師按照高保真圖，進行html編碼。
前端工程師， 一般工作方法為： 打開圖片，一邊看下圖片， 一邊編寫相應的html代碼。
這樣有兩個問題：
1、 前端工程師比較累， 不停切換 圖片和 編輯器， 操作頻繁。手累！
2、 編寫出來的html頁面，不一定跟設計師的圖片完全吻合。
alloydesigner工具介紹
http://alloyteam.github.io/AlloyDesigner/
AlloyDesigner介紹
AlloyDesigner 重新定義了Web頁面構建的模式，頁面構建過程中，AlloyDesigner直接嵌入你的Web頁面中運行，幫助你精准、高效的構建Web頁面的 UI！AlloyDesigner 是用 HTML5 開發的、直接嵌入在Web頁面中運行的可視化Web構建工具
AlloyDesigner預計節省您40%的UI開發時間，每天多40%的時間一起喝杯咖啡如何？
好處：
1、 讓你寫網頁如同臨摹一樣。 每一步都可以有針對的檢查調整的結果對不對。
2、 在編輯器中定義好html結構后， 在chrome瀏覽器上， 調整樣式，與設計圖片保持一致， 樣式調整的結果直接同步到css文件。
不像現在的瀏覽器開發者工具如firebug， 調整樣式后， 需要將css代碼再考回到 css文件中。
3、 還有傑出使用測量、放大、隱藏設計圖片等工具。（不用再使用額外的軟件來做這些事情。 簡直是美極了。）
alloydesigner工具安裝
http://alloyteam.github.io/AlloyDesigner/worddoc.html
1、 XAMP工具。 或者其他的 本地web運行環境。
2、 chrome 設置workspace的位置為 XAMP的 htcdoc文件夾。設置方法見： https://c7sky.com/chrome-devtools-workspace.html
3、 將 alloydesigner.js文件嵌入到 待調試的html網頁中。
---- 然后就可以嘗鮮了。
alloyteam確實好樣的， 為web前端開發人員造福啊！http://alloyteam.github.io/