作為一個合格的頁面重構者，「網頁還原設計稿」的能力是非常重要的。頁面是否能與設計稿絲毫不差，是需要重點關注的。有的時候，細節就能決定成敗，可謂失之毫米差之千里。尤其是在打造一個精品專案的時候。
一、視覺規範
有時候我們從設計師那裡拿到的設計稿不一定是精確無誤的，例如：同一類的模組標題文字，一個地方是13PX，另一個地方是14PX;一個頁面有多種字體顏色肉眼看起來一樣卻實際取到的色值不一樣;每個段落的行高不一樣;同一類型的彈出框多種尺寸等等…… 這樣的情況，我們不能為了還原設計稿而還原設計稿。
為了減少與設計師溝通上的成本，重構師不得不督促設計師做前期整站的視覺規範，把一些公共能約定的內容以文檔的形式寫明，後期嚴格執行起來。
設計師最好是在頁面開始製作前就定好視覺規範，這樣可以大幅減少頁面製作後製聯調的成本。另外頁面製作可以對模板化的東西前期做統一的規範，如字體、ICON、邊框、背景色、間距等做統一的class接口，等後製設計規範固定下來後有變動的地方調起來就很容易了。
二、設計稿標註
務必要求設計師在設計稿上對各種間距、寬度、特殊字體、特殊字色、特殊行高等等進行標註，這樣在頁面製作的時候不用去重新量取也大大加強了還原設計稿的準確度，更減少了與設計師的溝通成本和後製聯調成本。如下範例：
三、網頁標尺工具(FastStone Capture)
航海用的指南針、醫生用的體溫計、木匠用的捲尺…很多職業都有它專用的測量儀器，那麼我們在製作頁面的時候勢必也要測量間距、寬度、高度、顏色…等等數據，那麼頁面製作是不是也應該有一個專業的頁面精確測量的工具呢?
這裡介紹一款可以精確測量網頁的軟體FastStone Capture，其可謂是軟體雖小，卻五臟俱全。
四、FastStone Capture 簡單教學
1、開啟測量工具
點選控制台最右邊的圖標
，打開選擇“螢幕尺”，會在螢幕上顯示如下圖的尺子、為了方便透視測量，可將尺子設定成透明或半透明：
2.橫向測量
預設尺是橫放的，可以按鍵盤上、下、左、右鍵單像素移動尺子，滑鼠點在尺子的刻度上，螢幕右上角會有一個放大鏡顯示測量的區域，拖曳滑鼠可以精確測量水平的長度。拖曳尺橫向兩邊緣可將尺子任意拉長或縮短。
3.垂直測量
點擊尺上的如圖的按鈕圖標
尺子可垂直：或雙擊尺子可將尺子垂直。
垂直測量和橫向測量的方法類似，這裡就不重複說了。
4.點對點測量
點擊尺上的圖示:
，螢幕右上角放大鏡會顯示線條長度。
用滑鼠拖曳從A點到B點的直線，測量兩點間的距離。
5.矩形測量
可惜該軟體沒有三角板也沒有圓規，難以測量矩形。別急，可以用其他方法代替，這裡用到截圖功能。
點擊尺上的圖標
關閉尺子，返回軟體控制面板，點第三個圖標
(撲捉矩形區域)：
拖曳滑鼠測量想要測量的網頁矩形模組吧，螢幕左(或右)上角的放大鏡會顯示w*h=值*值，w是寬度，h是高度。
6.網頁取色
點選軟體控制台右邊的圖示：
，出現下拉框，選擇“螢幕取色器”，出現吸管圖標，移動吸管指示的座標點擊取得螢幕任一地方的顏色值。