一個HTML文件構(gòu)建可交互原型Effective HTML從加載到錯誤恢復(fù)的狀態(tài)機(jī)詳解【免費下載鏈接】effective-htmlAgent skills for useful HTML artifacts, wireframes, interactive prototypes, plans, and diagrams.項目地址: https://gitcode.com/gh_mirrors/ef/effective-htmlEffective HTML 是一個面向 AI 智能體的技能集合幫你用單個 HTML 文件構(gòu)建可交互原型、線框圖、方案文檔和示意圖。本篇以倉庫中的發(fā)布就緒Release Readiness示例為藍(lán)本拆解一個完整狀態(tài)機(jī)是如何在零構(gòu)建工具、零外部依賴的前提下從加載、失敗到錯誤恢復(fù)逐步實現(xiàn)的。為什么一個 HTML 文件就能做交互原型Effective HTML 的核心構(gòu)建約定只有一句話交付一個自包含的.html文件CSS 和 JavaScript 全部內(nèi)聯(lián)。不依賴構(gòu)建工具、認(rèn)證、實時 API 或任何外部服務(wù)雙擊即可在瀏覽器打開復(fù)制就能改鍵盤、焦點管理、響應(yīng)式布局都要真實可用。這套約定寫在 skills/html-prototype/SKILL.md 的 Build contract 一節(jié)。正因為沒有運行時和后端原型里的數(shù)據(jù)和服務(wù)都是用 JavaScript 模擬的——這讓加載態(tài)、錯誤態(tài)這些真實產(chǎn)品中最難展示的狀態(tài)反而變得容易演示。動手前先用表格定義狀態(tài)原型質(zhì)量的差異往往不在代碼而在動手前是否列出了狀態(tài)清單。Effective HTML 要求先列狀態(tài)再寫代碼并明確列出常見狀態(tài)loading加載、empty空態(tài)、error錯誤、success成功、disabled禁用、mobile移動端以及業(yè)務(wù)特有狀態(tài)。本例的狀態(tài)清單完整記錄在 examples/release-readiness/states.md 中狀態(tài)觸發(fā)條件用戶看到什么可用操作Blocked受阻iOS 冒煙測試失敗失敗項和決策原因高亮記錄重跑Saving保存中提交重跑表單表單禁用進(jìn)度被播報等待Save error保存失敗模擬服務(wù)拒絕更新彈窗保留已填內(nèi)容并解釋失敗重試或取消Ready就緒4 項檢查全部通過摘要變?yōu)?4 of 4發(fā)布按鈕解鎖申請生產(chǎn)發(fā)布注意一個關(guān)鍵設(shè)計取舍不要為了湊齊清單而把無關(guān)狀態(tài)硬塞進(jìn)主流程?？展P記態(tài)之所以存在是因為清空備注這個操作真實可達(dá)而登錄、持久化則被明確劃出原型邊界在 examples/release-readiness/brief.md 的 Non-goals 中寫明。狀態(tài)機(jī)全景Blocked → Saving → 錯誤 → Ready整個狀態(tài)機(jī)由一個數(shù)據(jù)屬性驅(qū)動body.dataset.releaseState在blocked和ready之間切換其余 UI決策印章、檢查計數(shù)、風(fēng)險提示、按鈕可用性全部跟隨它聯(lián)動。狀態(tài)流轉(zhuǎn)如下Blocked ──打開彈窗──? 填寫表單 ──提交──? Saving ▲ │ │ 模擬失敗 ?──┤──? 成功 │ ▼ │ └──重跑失敗── Ready ?──重試成功──────────────────┘ │ └──申請發(fā)布──? 生產(chǎn)邊界彈窗明確原型止步于此三個值得新手記住的設(shè)計決策失敗不丟數(shù)據(jù)模擬服務(wù)拒絕更新時彈窗不關(guān)閉、已填值保留只把焦點移到錯誤提示上用戶可以直接重試。邊界誠實點擊生產(chǎn)發(fā)布后原型彈出一個解釋框說明真實的發(fā)布系統(tǒng)從這里接管而不是假裝部署成功。無效操作寧可不放也不造假。每個狀態(tài)都有可見結(jié)果狀態(tài)表里的 Visible result 一列就是驗收標(biāo)準(zhǔn)。加載態(tài)實現(xiàn)禁用、Spinner 與 aria-busy加載態(tài)的完整實現(xiàn)不到 10 行核心在 prototype.html 的 setSaving 函數(shù)function setSaving(saving) { isSaving saving; // 禁用除提交按鈕外的所有控件 saveRerun.innerHTML saving ? span classloading-labelspan classspinner/spanSaving evidence/span : Save rerun; rerunForm.setAttribute(aria-busy, String(saving)); }新手容易漏掉的三個細(xì)節(jié)禁用一切可操作控件保存期間表單不能動連關(guān)閉彈窗都被攔截cancel事件在isSaving時調(diào)用preventDefault防止用戶在請求中途離開導(dǎo)致狀態(tài)錯亂按鈕文案換成動詞 進(jìn)行中spinner 旁邊顯示 Saving evidence視覺反饋和文案反饋一致aria-busy通知屏幕閱讀器加載態(tài)不只是看起來在轉(zhuǎn)圈讀屏軟件也能感知。提交后的分流邏輯在 表單 submit 處理器用setTimeout模擬 750ms 網(wǎng)絡(luò)延遲再根據(jù)復(fù)選框決定走向錯誤分支還是成功分支。錯誤恢復(fù)路徑保留輸入 顯式重試錯誤態(tài)最容易做成彈個紅色 Toast 然后消失Effective HTML 的做法是把錯誤恢復(fù)當(dāng)成一條完整路徑觸發(fā)表單里有一個讓下一次保存失敗一次的復(fù)選框?qū)ｉT供評審演示錯誤路徑呈現(xiàn)錯誤提示formAlert顯示說明失敗原因保護(hù)已填的重跑結(jié)果和證據(jù) ID 原樣保留用戶不必重填引導(dǎo)formAlert.focus()把焦點直接落到錯誤信息上同時用announce()向輔助技術(shù)播報你的輸入已保留可以重試。重試成功后的跳轉(zhuǎn)由updateRelease()處理它不只改一個按鈕而是同步更新決策印章Blocked → Ready、檢查計數(shù)3 of 4 → 4 of 4、風(fēng)險卡片紅色感嘆號 → 綠色對勾、活動日志和 Toast讓狀態(tài)變化在全頁范圍內(nèi)可被看見。反過來如果重跑結(jié)果還是失敗狀態(tài)機(jī)會從 Ready 回落到 Blocked發(fā)布按鈕重新禁用——狀態(tài)機(jī)是雙向的這比一條道走到成功的原型可信得多?？蓮?fù)制的動手指南想在自己的項目里復(fù)用這套做法按下面三步走克隆倉庫把示例文件復(fù)制為起點git clone https://gitcode.com/gh_mirrors/ef/effective-html cd effective-html cp examples/release-readiness/prototype.html my-prototype.html替換業(yè)務(wù)保留狀態(tài)模型先改 brief用戶、任務(wù)、非目標(biāo)、標(biāo)簽和數(shù)據(jù)再碰視覺。參考 examples/release-readiness/README.md 中的 Clone and adapt 說明。按驗收清單自測寬屏 窄屏兩種寬度、每個建模過的狀態(tài)都走一遍、Tab/ShiftTab/Enter/Space/Escape全鍵盤操作、控制臺無報錯、減少動態(tài)效果reduced motion模式下的表現(xiàn)。完整檢查記錄見 examples/release-readiness/validation.md。相關(guān)文檔索引原型技能規(guī)范skills/html-prototype/SKILL.md線框圖技能原型的前置階段skills/html-wireframe/SKILL.md線框圖示例examples/release-readiness/wireframe.html總技能路由與更多場景參考skills/html/references/interfaces.md小結(jié)Effective HTML 用發(fā)布就緒示例演示了一個可交互原型的標(biāo)準(zhǔn)狀態(tài)機(jī)先定義狀態(tài)表再讓加載、錯誤、恢復(fù)、禁用、空態(tài)逐一可觸達(dá)最后用鍵盤、焦點和屏幕閱讀器檢查收尾。單個 HTML 文件不是限制而是它的優(yōu)勢——沒有構(gòu)建鏈狀態(tài)機(jī)的每一步都能被評審者親手點出來。【免費下載鏈接】effective-htmlAgent skills for useful HTML artifacts, wireframes, interactive prototypes, plans, and diagrams.項目地址: https://gitcode.com/gh_mirrors/ef/effective-html創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考