plannotator/effective-html

解決的問題

提供一組專為 AI 代理設計的技能，使其能夠建立高品質、自包含的 HTML 資產。這讓代理能超越文字回應，轉而生成視覺工具，如線框圖、原型和圖表，為開發人員與設計師提供更好的上下文與清晰度。

工作原理

此專案將功能組織為六種不同技能，將創意方向與技術可靠性分離。通用的 html 技能負責路由與廣泛請求，而專門技能則管理特定保真度層級：html-wireframe 用於低保真佈局，html-prototype 用於互動行為，html-diagram 用於系統可視化，html-plan 用於路線圖。獨立的 design-artifact 技能提供設計流程，但不強制特定視覺風格。

適用對象

專為使用 AI 編碼代理（如 Claude Code 或 Codex）的使用者設計，希望其代理不僅能產生程式碼或文字，還能生成視覺文件、互動原型與架構圖。

主要亮點

• 專業化資產：支援從低保真線框圖到完全互動式原型的多種輸出。
• 自包含：每個生成的資產都是響應式的、可存取的，並在瀏覽器中經過驗證。
• 模組化安裝：可透過 CLI 工具以集合或單獨方式安裝技能。
• 代理整合：原生支援 Claude Code 與 Codex 的外掛程式。