Deepseek火了，老師們玩的很溜。

網(wǎng)上爆出很多自己編寫的網(wǎng)頁程序，自動(dòng)點(diǎn)名，背誦古詩，還有的記英語單詞等等。

編程真的是零門檻了嗎？只需要簡單交流就可以做出你想要的效果。

全民程序員的時(shí)代，做老師是不是也會(huì)點(diǎn)“狠活”。

小白是否真的能編程

其實(shí)，編程并沒有想象的那么容易，網(wǎng)上演示的大多是需求非常簡單直白，如點(diǎn)名程序，單詞記憶小動(dòng)畫等，復(fù)雜點(diǎn)的程序多半不給教程遮遮掩掩不說明制作方法和來源真假已難辨。效果往往很驚艷，但做出此類效果，也絕非自媒體說的那樣一句話兩句話就可以輕松搞定。

那么網(wǎng)頁編程或者說這種網(wǎng)頁編程動(dòng)畫小白是否可以做，應(yīng)該如何做，其背后的邏輯是怎樣的，是否給出一套模板方式就可以解決問題呢。

張老師觀點(diǎn)：要做出網(wǎng)頁動(dòng)畫，首先是讓Deepseek了解了你的需求，然而大部分小白最為困難的點(diǎn)在于如何把需求描述清楚。

如何才能描述清楚需求呢？張老師提供一個(gè)萬能模板和一套拆解復(fù)雜需求的邏輯，當(dāng)然這并非什么“萬金油”，哪里都管用，需求的產(chǎn)生是基于對(duì)問題的思考，然后將問題轉(zhuǎn)化成開發(fā)思維，去用開發(fā)者的視角描述問題。

這就實(shí)際上就是現(xiàn)實(shí)中產(chǎn)品經(jīng)理與程序員兩個(gè)角色的組合體，客戶把模糊的需求提出來，產(chǎn)品經(jīng)理根據(jù)經(jīng)驗(yàn)對(duì)需求進(jìn)行產(chǎn)品化，經(jīng)過客戶的確認(rèn)后，再跟程序員溝通，確認(rèn)是否可行。

AI做的就是程序員和產(chǎn)品經(jīng)理的活，當(dāng)他能明白你的描述時(shí)，自然就能寫出對(duì)應(yīng)的代碼，當(dāng)描述不清，它理解跑偏或者寫出錯(cuò)誤代碼也很正常。

怎樣才能清晰的描述問題呢？現(xiàn)實(shí)中如果客戶懂一些知識(shí)，那么產(chǎn)品經(jīng)理在跟客戶溝通的時(shí)候往往很容易，反之則需要反復(fù)確認(rèn)。

原因很簡單，相通的知識(shí)結(jié)構(gòu)，自然就更容易聽懂對(duì)方所要做的是什么。

除此之外，大模型的編程能力也各不相同，目前編程能力民間有這樣的評(píng)測(cè)表單：

這個(gè)表單中Claude3.7未被統(tǒng)計(jì)在內(nèi)，實(shí)測(cè)來看Claude3.7能力不輸Qwen2.5是一個(gè)非常強(qiáng)大的對(duì)手。

同時(shí)注意，這樣的評(píng)測(cè)有時(shí)候毫無意義，需要根據(jù)自己測(cè)試的實(shí)際效果為準(zhǔn)。

把需求描述清楚的萬能公式

一、提示詞萬能模板（適配編程需求）

功能定位公式?
身份說明 + 核心功能 + 技術(shù)約束 + 交互示例
例：
「我是一名小學(xué)教師，需要制作一個(gè)課堂成語接龍互動(dòng)網(wǎng)頁，學(xué)生通過點(diǎn)擊按鈕隨機(jī)生成成語接龍題目，要求純HTML/CSS/JS實(shí)現(xiàn)，無需后端。請(qǐng)生成代碼并提供按鈕點(diǎn)擊觸發(fā)動(dòng)畫的示例。」?

這個(gè)提示詞交給不同的模型編寫出的案例是不一樣的。

deepseek如下：

從效果來看大差不差，Deepseek界面更人性化，更舒適。

增加難度：

「我是一名小學(xué)教師，需要制作一個(gè)立方體旋轉(zhuǎn)的互動(dòng)網(wǎng)頁，學(xué)生通過點(diǎn)擊數(shù)字按鈕生成邊長為1的立方體，立方體處于一個(gè)三維坐標(biāo)系內(nèi)，可以通過鼠標(biāo)拖動(dòng)旋轉(zhuǎn)看到不同的側(cè)面，側(cè)面用不同顏色區(qū)分，要求純HTML/CSS/JS實(shí)現(xiàn)，無需后端。請(qǐng)生成代碼?！?

顯然這個(gè)描述已經(jīng)很繁瑣，這種需求較多較為復(fù)雜的問題我們可以適用下面的拆解公式：

?復(fù)雜需求拆分公式?
主功能描述 + 子規(guī)則說明 + （容錯(cuò)機(jī)制） + 輸出格式

例：「開發(fā)一個(gè)三維空間旋轉(zhuǎn)的立方體互動(dòng)游戲，需要滿足：1.學(xué)生通過點(diǎn)擊數(shù)字控制區(qū)域按鈕，生成邊長為1的立方體2.立方體處于一個(gè)三維坐標(biāo)系內(nèi)，可以通過鼠標(biāo)拖動(dòng)旋轉(zhuǎn)看到不同的側(cè)面，側(cè)面用不同顏色區(qū)分3.單擊控制區(qū)可以增加一個(gè)立方體，同時(shí)該按鍵由0變?yōu)?，0代表未對(duì)應(yīng)生成立方體，1代表已經(jīng)生成立方體4.數(shù)字控制器要與生成的立方體俯視圖的排列方式完全一致。5.要求純HTML/CSS/JS實(shí)現(xiàn)，無需后端。請(qǐng)生成代碼?！?

Deepseek：

Qwen:

由此可以看出需求描述核心原則

核心任務(wù)

開發(fā)一個(gè)三維空間旋轉(zhuǎn)的立方體互動(dòng)游戲，這就是主要任務(wù)。

1. ?功能排序?
   先描述核心交互（如「學(xué)生通過點(diǎn)擊數(shù)字控制區(qū)域按鈕，生成邊長為1的立方體」），再補(bǔ)充附加需求（如「立方體處于一個(gè)三維坐標(biāo)系內(nèi)，可以通過鼠標(biāo)拖動(dòng)旋轉(zhuǎn)看到不同的側(cè)面，側(cè)面用不同顏色區(qū)分」），避免需求混雜導(dǎo)致生成代碼冗余。?

2. ?技術(shù)棧限定?
   明確聲明技術(shù)限制（如「僅用原生JS」「禁止使用第三方庫」），可減少調(diào)試成本。若對(duì)技術(shù)方案不熟悉，可要求Deepseek提供多版本代碼備選。?

3. ?交互細(xì)節(jié)具象化?
   如果有些效果無法描述時(shí)可以使用類比法描述效果，例如：
   「進(jìn)度條樣式參考Windows開機(jī)加載動(dòng)畫，數(shù)值每增長10%觸發(fā)一次顏色漸變。

1. 案例參考（實(shí)際教學(xué)場(chǎng)景）

3. ?隨機(jī)點(diǎn)名系統(tǒng)

這個(gè)系統(tǒng)已經(jīng)做的很多，這里讓大家來練手。先別看下面的提示詞，自己去實(shí)打?qū)嵉膶懸粚?。?dāng)然也可以直接讓Deepseek按照上面的格式要求，給你寫一個(gè)提示詞。

?提示詞：
「生成一個(gè)帶音效的隨機(jī)點(diǎn)名網(wǎng)頁，要求：①姓名列表可后臺(tái)直接修改；②點(diǎn)擊開始后姓名高速滾動(dòng)，3秒后逐漸減速停止；③界面包含班級(jí)logo占位區(qū)。輸出完整HTML文件。」?

生成結(jié)果：教師僅需替換姓名列表文件。

1. ?單詞拼寫游戲

?
提示詞：
「用JavaScript實(shí)現(xiàn)動(dòng)態(tài)字母拖拽拼寫功能：①從右側(cè)字母池拖拽到左側(cè)空白區(qū)；②拼寫正確時(shí)顯示綠色邊框，錯(cuò)誤則抖動(dòng)提示。需兼容平板觸屏操作?！?

?分階段生成?
先要求輸出最小可行版本（如僅核心交互邏輯），再通過追加提示詞逐步完善功能（如「增加本地存儲(chǔ)保存最高分」）。?

本文來源：