話說上禮拜，老板突然跟我說，要搞個(gè)新項(xiàng)目，讓我趕緊出個(gè)頁(yè)面給他看看。時(shí)間緊任務(wù)重，我這心里真是又急又愁。

不過還平時(shí)我喜歡搗鼓各種工具，這回可派上用場(chǎng)。我立馬想到幾個(gè)平時(shí)收藏的寶貝，打算拿出來試試手。

尋尋覓覓，找到趁手的“家伙”

我想到WordPress，畢竟這玩意兒名氣大，做個(gè)網(wǎng)站啥的應(yīng)該不在話下?？墒亲屑?xì)一琢磨，我這回要的只是一個(gè)頁(yè)面，用WordPress 好像有點(diǎn)“殺雞用牛刀”的感覺，而且還得考慮服務(wù)器啥的，太麻煩，先放一邊。

然后，我又想到“即時(shí)設(shè)計(jì)”，這個(gè)名字聽起來就很快，而且說是支持團(tuán)隊(duì)協(xié)作，感覺挺適合我們團(tuán)隊(duì)的。我打開看一下，發(fā)現(xiàn)這工具主要是做設(shè)計(jì)的，雖然也能做網(wǎng)站，但總覺得不太對(duì)味，好像更適合設(shè)計(jì)師用。

試試“新武器”，快速上手

后來我又發(fā)現(xiàn)“摹客”和“CodePen”，這兩個(gè)工具聽起來更像是做原型設(shè)計(jì)的。我先試試“摹客”，發(fā)現(xiàn)它還真挺好用的，可以快速拖拽組件，搭建頁(yè)面框架，還能添加一些簡(jiǎn)單的交互效果。我覺得這正是我想要的！

然后我又試“CodePen”，這個(gè)工具更適合寫代碼，可以在線編輯HTML、CSS、JavaScript，還能實(shí)時(shí)預(yù)覽效果。對(duì)于我這種喜歡“玩”代碼的人來說，簡(jiǎn)直是太爽！

“雙劍合璧”，效率翻倍

我決定把“摹客”和“CodePen”結(jié)合起來用。先用“摹客”快速搭建頁(yè)面原型，把頁(yè)面的基本結(jié)構(gòu)和布局搞定。然后，再用“CodePen”來細(xì)化頁(yè)面的樣式和交互，把一些細(xì)節(jié)效果給做出來。

• 第一步：用“摹客”快速拖拽，搞定頁(yè)面框架。
• 第二步：用“CodePen”寫代碼，美化頁(yè)面，增加互動(dòng)。
• 第三步：反復(fù)調(diào)整，直到滿意為止。

你猜怎么著？這么一搞，效率還真提高不少！原本以為要搞一天的頁(yè)面，結(jié)果半天就搞定，而且效果還不錯(cuò)。老板看之后，也表示很滿意。

這回的經(jīng)歷，讓我更加深刻地體會(huì)到“工欲善其事，必先利其器”的道理。有這些好用的工具，做起事情來真是事半功倍！