Skill 練功室 · 工程與開發

frontend-design

現代前端 UI；先設計思考，避開 AI slop。

適合情境
改本站頁面、練習 Griffin 的 first prompt
安裝／啟用
Cursor / Claude 啟用 frontend-design
練完長這樣
先有設計思考，再有版面；看起來不像預設 landing page。

練習 Prompt

複製後貼到 Cursor 或 Claude。可依你當天真實情況改名字、科別或草稿內容。

請啟用 frontend-design Skill。為「李醫師值班室」設計一個新區塊「本週一句值班獨白」：專業但親近、暖編輯風、石板藍綠＋琥珀。先寫 Purpose／Tone／Constraints／Differentiation，再給 HTML/CSS 結構草圖。禁止紫色漸層與 Inter。
回練功室

同分類其他關卡

  • claude-api — 正確使用 Anthropic API（串流、工具呼叫、批次等）。
  • mcp-builder — 協助生成 MCP Server，打通 AI 與外部工具。
  • web-artifacts-builder — 產生較完整的單頁應用（狀態、routing、元件）。
  • webapp-testing — 用 Playwright 測試前端。