如何用Skills高效完成產(chǎn)品工作？發(fā)布后，收到不少伙伴的關(guān)注，其中最關(guān)注的問題就是“能把對(duì)應(yīng)Skills分享出來嗎？”
我理解大家的想法，只是恐怕要讓這些伙伴失望了。
原因很簡單：我所寫的Skills都是專屬定制，適用于我自己，卻未必適合你。比如我的需求文檔、上線公告的格式，是我自己的格式；我的產(chǎn)品方案設(shè)計(jì)、需求工作量評(píng)估是完針對(duì)HR SaaS產(chǎn)品所定制。
退一步講，我更主張“授人以魚不如授人以漁”，提供給你一個(gè)價(jià)值不大的Skills，不如教會(huì)你創(chuàng)建自己專屬的Skills。
前面的文章可能更偏向“炫技”（重點(diǎn)放在效果呈現(xiàn)），而沒有從0到1手把手教的感覺，可能會(huì)讓你無從下手，今天我就聚焦一個(gè)Skills——畫原型，期望幫你寫出自己的第一個(gè)穩(wěn)定、可用、專屬的Skills。
首先，我還是帶你看看效果，讓你對(duì)這個(gè)產(chǎn)出結(jié)果有所感知。
下面左側(cè)的原型，是我花了2個(gè)小時(shí)（包含思考時(shí)間）用Axure畫的原型，而右圖是我花2分鐘寫，20分鐘左右調(diào)試后的Skills畫的原型。
相信你可以看出來效果的差異（即優(yōu)質(zhì)），也能感受到效率的提升（即高效），不再贅述。
下面我就把這個(gè)過程完整給你“還原一下”——從寫到調(diào)試，再到輸出結(jié)果的過程。
以前一直懶得用AI繪制原型，一方面是因?yàn)楦杏X它不夠聰明，覺得不了解我們系統(tǒng)的設(shè)計(jì)風(fēng)格，很難輸出符合預(yù)期的結(jié)果；另一方面是覺得在現(xiàn)有系統(tǒng)上迭代功能，繪制原型的工作量不大，自己畫就畫吧，覺得與其投時(shí)間“磨刀”，不如直接“砍柴”，本質(zhì)還是是路徑依賴，不愿變化。
昨晚下班時(shí)，忙完了一天的工作，又把工作量評(píng)估的Skills調(diào)整了下，突然就想試下“畫原型”的Skills，看看是否如大佬們所說“Coding就是現(xiàn)階段的通用人工智能”，用HTML輕松繪制出來一個(gè)網(wǎng)頁。
如何從0到1創(chuàng)建一個(gè)畫原型的Skills？
前提條件：
- AI工具：Trae國際版（付費(fèi)模式）。國內(nèi)版的免費(fèi)模式也可行，唯一區(qū)別是模型不同，效果可能會(huì)有差異，但不影響整體使用；
- 背景：基于現(xiàn)有成熟HR SaaS系統(tǒng)，如何快速生成對(duì)應(yīng)原型，而不是面對(duì)一個(gè)全新系統(tǒng)；
第一步：創(chuàng)建Skills。
我在Trae里輸入了下面這句話：
“幫我生成一個(gè)Skills，目標(biāo)是繪制原型，要求是根據(jù)附件中所提供的系統(tǒng)截圖設(shè)計(jì)規(guī)范、樣式、主題顏色，100%還原設(shè)計(jì)的方式設(shè)計(jì)原型。”
小提示：原型不是高保真圖，這里100%還原目的是給它一個(gè)參考，確保原型圖跟系統(tǒng)設(shè)計(jì)規(guī)范基本一致，減少后續(xù)改動(dòng)量，適用于已有成熟系統(tǒng)情況下的設(shè)計(jì)；如果是全新系統(tǒng)，也可以要求它遵循Ant Design風(fēng)格輸出，而不給它系統(tǒng)截圖，效果應(yīng)該也不會(huì)太差。
同時(shí)，跟提示詞一起，附件里附上現(xiàn)有系統(tǒng)的4張截圖（重點(diǎn)說三遍，重點(diǎn)說三遍，一定要有截圖，它們分別代表：列表頁面（如下圖）、新增頁面、報(bào)表頁面、排班頁面，它們比較典型、常用，目的是讓Skills把現(xiàn)有系統(tǒng)的設(shè)計(jì)規(guī)范、樣式等寫到Skills里，相當(dāng)于讓它學(xué)習(xí)我們系統(tǒng)的設(shè)計(jì)規(guī)范。
小提示：原計(jì)劃是把這個(gè)提示詞截圖也貼出來，結(jié)果發(fā)現(xiàn)昨天晚上的聊天記錄，已超過長度被Trae壓縮，無法有效找到了。
大概1分鐘左右，它生成后，你就可以進(jìn)入調(diào)試階段（是的，不要懷疑，前后不到2分鐘就創(chuàng)建了一個(gè)畫原型的Skills）。
第二步：調(diào)試Skills。
這是最關(guān)鍵的環(huán)節(jié)，創(chuàng)建后，需要你進(jìn)行調(diào)試效果。
你可以注意看下Skills文件里（如下圖），它實(shí)際把原系統(tǒng)的視覺規(guī)范、主題顏色、交互形式，都已寫到技能里，相當(dāng)于完成了“預(yù)訓(xùn)練”，確保后續(xù)輸出原型時(shí)，基本符合你們系統(tǒng)規(guī)范。
下面讓它開始真正干活，我給它輸入的提示詞是：
“在現(xiàn)有系統(tǒng)功能的基礎(chǔ)上（即附件截圖），輸出兩張?jiān)蛨D：圖一是在“按周循環(huán)”的基礎(chǔ)上，新增支持添加多周（最多4周），同時(shí)，支持開關(guān)控制“自動(dòng)跳過法定公休日”；圖二是新增一種新的循環(huán)模板（即按天循環(huán)），支持用戶配置最多31天，最少1天的循環(huán)模板，每天都支持添加班次，并支持開關(guān)控制“覆蓋已有排班”，支持“法定節(jié)假日排班規(guī)則”可選“排班”、“跳過”、“順延”，且提示語圖標(biāo)；支持“法定公休日排班規(guī)則”可選“排班”、“跳過”、“順延”，且提示語圖標(biāo)?！?/p>
附件里是現(xiàn)有系統(tǒng)的原圖（如下圖），屬于我需要讓它修改的原圖，它的“按周循環(huán)”模式，是不支持多周循環(huán)（比如大小周）；也不支持“按天循環(huán)”模式。
結(jié)果，它給我輸出了兩個(gè)全是HTML的代碼片段，而不是可預(yù)覽的原型，這顯然不符合預(yù)期。
我就跟又它說：
“更新下原型繪制技能，要求是直接輸出可預(yù)覽的html文件，而不是給我一段代碼片段?！?/p>
完成后，它自動(dòng)在輸出要求里，明確約束了輸出HTML的原型文件（如下圖），確保輸出結(jié)果可輕易被預(yù)覽、使用。
然后把同樣提示詞再發(fā)一遍給它，讓它重新執(zhí)行，完成后，它給了下面兩個(gè)HTML的原型文件。
預(yù)覽時(shí)，發(fā)現(xiàn)結(jié)果還是不理想，我就又跟它說：
“按天循環(huán)的添加模式，建議跟現(xiàn)有系統(tǒng)保持一致（即底部增加添加按鈕，超過31天后才隱藏）。同時(shí)，法定節(jié)假日排班規(guī)則跟公休日排班規(guī)則，不適合平鋪的形式，而是采取下拉單選，讓它們跟覆蓋已有排班成一行，確?；镜拿烙^度?！?/p>
經(jīng)過這么兩輪調(diào)試，最終它給我的結(jié)果，就已經(jīng)符合我的預(yù)期。
原型1是在原有系統(tǒng)支持“按周循環(huán)”的基礎(chǔ)上，新增支持“多周循環(huán)”模式，而不僅僅是單周循環(huán)（如下圖）。
原型2是在原有系統(tǒng)基礎(chǔ)上，新增支持“按天循環(huán)”模式的原型（如下圖）。
這個(gè)技能從創(chuàng)建到調(diào)試完成，最終花了大概不到30分鐘。
第三步：復(fù)用Skills。
緊接著，我又讓它幫我畫另一個(gè)原型設(shè)計(jì)圖，提示詞是：
“在現(xiàn)有“按班組排班”的頁面右上角，新增一個(gè)“操作”下拉框，支持用戶選擇“循環(huán)排班”、“排班記錄”，當(dāng)點(diǎn)擊“排班記錄”后，進(jìn)入一個(gè)二級(jí)列表頁面，列表元素包含：班組名稱、開始循環(huán)日期、截止循環(huán)日期（可不設(shè)置，不設(shè)置代表無限循環(huán)）、循環(huán)模板（即關(guān)聯(lián)了哪個(gè)循環(huán)模板）、操作（編輯、刪除）；點(diǎn)擊“循環(huán)排班”，則彈窗或右側(cè)邊抽屜的方式，讓用戶添加對(duì)應(yīng)循環(huán)排班，最上面是一段提示語，下面的元素包含：班組名稱（下拉單選，支持用戶選擇排班班組名稱）、開始日期（日期控件，默認(rèn)是今天，必填）、截止日期（可不填，不填默認(rèn)就是無截止時(shí)間，需要提示語）、循環(huán)模板（下拉單選，必填），確定、取消”
我附件里的系統(tǒng)原圖，它的排班頁面是沒有“操作”相關(guān)按鈕的（如下圖）。
大概不到1分鐘，它給我輸出了兩個(gè)HTML文件路徑，顯然跟我預(yù)期的三張圖不符。
我就跟它說：
“你好像少了一個(gè)頁面，就是創(chuàng)建循環(huán)排班的頁面?！?/p>
它并沒有直接給我生成三個(gè)原型，而是在理解需求的情況下，給我把第三個(gè)抽屜彈窗直接內(nèi)嵌到“創(chuàng)建循環(huán)排班HTML”文件里。換句話說，它創(chuàng)建的原型是具有交互能力的原型，而不僅僅是靜態(tài)圖。
對(duì)應(yīng)原型結(jié)果如下：
我點(diǎn)擊“循環(huán)排班”，它自動(dòng)彈出下面的抽屜頁：
我點(diǎn)擊“排班記錄”，它自動(dòng)跳轉(zhuǎn)至下面頁面：
點(diǎn)擊“新建循環(huán)排班”，結(jié)果它又重復(fù)創(chuàng)建了一個(gè)對(duì)應(yīng)詳情頁，跟“循環(huán)排班”屬于同樣功能，卻采取不同交互，我就又調(diào)試了一下。
我給它輸入了以下提示詞：
“1、“操作按鈕”期望不跟“保存”、“班組管理”在一行，而是在它們上一行的右上角（即操作按鈕不僅適用于“按組排班”頁面）；2、“排班記錄”頁面屬于詳情頁面，你需要記住我們?cè)斍轫撁媸菦]有左邊菜單欄，而是全屏頁面的設(shè)計(jì)規(guī)劃，麻煩調(diào)整下。同時(shí)，“新建循環(huán)排班”跟“循環(huán)排班”是同一個(gè)功能，不要單獨(dú)再創(chuàng)建一個(gè)詳情頁面，而是復(fù)用“循環(huán)排班”的左側(cè)抽屜即可?！?/p>
完成后，已經(jīng)符合預(yù)期，我就直接使用了。
在“排班記錄”頁面，點(diǎn)擊“新建循環(huán)排班”效果如下：
如何從0到1創(chuàng)建自己的第一個(gè)Skills？
第一，選擇一款適合自己的入門工具。市面上優(yōu)秀的AI產(chǎn)品，基本都已支持Skills模式，第一次嘗試，推薦用扣子的“扣子編程”，或 Trae IDE 國內(nèi)版。它們的產(chǎn)品上手容易，成本幾乎為零，還有豐富的教程。
第二，梳理自己的工作流，選擇一個(gè)環(huán)節(jié)開始。
以產(chǎn)品經(jīng)理為例，核心工作流可能包括：需求管理 → 需求優(yōu)先級(jí)判斷 → 產(chǎn)品規(guī)劃 → 競品調(diào)研 → 客戶需求調(diào)研 → 設(shè)計(jì)產(chǎn)品方案 → 評(píng)估工作量 → 畫原型 → 寫需求文檔 → 評(píng)審 → 項(xiàng)目進(jìn)度管理 → 上線 → 上線培訓(xùn) → 寫上線公告 → 收集反饋等。
每個(gè)環(huán)節(jié)都可以設(shè)計(jì)1-2個(gè)SKills，用它來輔助你高效完成對(duì)應(yīng)工作，“貪多嚼不爛”，最理性、最合理的方式，分階段、分步驟進(jìn)行改造，核心理念就是“先僵化，后固化，再優(yōu)化”。
最開始可以選擇一個(gè)環(huán)節(jié)，最好符合經(jīng)常做、重復(fù)做、事務(wù)性的環(huán)節(jié)（俗稱可標(biāo)準(zhǔn)作業(yè)流程（SOP））。比如寫需求文檔、寫上線公告、評(píng)估工作量等，或制作50家客戶案例等；
第三，必須具備明確的標(biāo)準(zhǔn)。把經(jīng)驗(yàn)、方法論、流程等，固化為一個(gè)個(gè)的Skills。
你所選擇的環(huán)節(jié)，需要把過往的經(jīng)驗(yàn)、流程、方法論等，對(duì)應(yīng)輸出為一個(gè)Skills，需要你具備定義標(biāo)準(zhǔn)的能力（即判斷它的輸出是好，是壞，需要你自己有標(biāo)準(zhǔn)）。
● 一份好的需求文檔的標(biāo)準(zhǔn)
● 一個(gè)好的解決方案的標(biāo)準(zhǔn)
● 一個(gè)需求的優(yōu)先級(jí)標(biāo)準(zhǔn)
● 一份競品調(diào)研報(bào)告的標(biāo)準(zhǔn)
● 一個(gè)需求評(píng)估結(jié)果的標(biāo)準(zhǔn)
● 等等。
第四，合理利用參照物。
比如客戶案例PPT中，我會(huì)提供現(xiàn)有標(biāo)準(zhǔn)的PPT模版，讓它100%進(jìn)行還原；或畫原型時(shí)，我會(huì)提供現(xiàn)有系統(tǒng)的關(guān)鍵頁面的截圖，讓它進(jìn)行1000%還原等。
當(dāng)你給它提供一個(gè)明確的參照模板時(shí)，相當(dāng)于給對(duì)它進(jìn)行了一次“預(yù)訓(xùn)練“，提前學(xué)會(huì)了對(duì)應(yīng)內(nèi)容，確保輸出結(jié)果更符合預(yù)期。
小作業(yè)
臨淵羨魚，不如退而結(jié)網(wǎng)。紙上得來終覺淺，絕知此事要躬行。
無論我如何苦口婆心地說，分享再詳細(xì)的教程，不如你動(dòng)手一次。
你準(zhǔn)備好寫自己的第一個(gè)Skills了嗎？我很好奇你會(huì)選擇哪個(gè)環(huán)節(jié)，也期待你分享使用后的感受。
