這好像有點顛倒....

如果是自學,或練習.可能會像樓上大大說的,程式碼上來,再用瀏覽器直接看結果.(那位置都是大概的,反正是練習,位置差一點,差不到哪裡去).
但是真的做產品,應該都是先規劃好那些位置在哪裡.可能先用簡單的圖檔來替代,放在那裡.
然後,程式員就可以寫code 了,最後美工再換圖.

簡單的說,通常做UI介面,都是你先畫好佈置圖,圖上,你很清楚,也許你有兩個按鍵,一個放文字的區塊,他們多大,放在哪裡(座標),你也最清楚不過了,然後才開始寫code,可能先用兩個長方形假圖代替未來真的要放在那裡的按鍵,寫好code,直接用目標平台測試,看結果和你想的一不一樣,code 驗證沒問題,最後就是美工的工作了.等美工做好圖,把圖檔放上來取代原本的長方形假圖.

長方形假圖,是我亂說的,用"暫替圖檔",不知道會不會好點.
理論上,分享心得應該要寫正確的東西,但請原諒我懶得找這個名詞到底應該叫什麼.
希望大大們可以理解我的意思.

弟才疏學淺,只是心得分享,也許不是業界正規作法,如果有錯誤,或有正好的做法,也請大大們指教.