adapt
為任何螢幕或平台調整設計
苦惱於讓您的設計在手機、平板電腦、桌面、列印或電子郵件上都能正常運作嗎？此技能提供專業指導，幫助您在不同的環境中調整設計，同時保持一致性和可用性。
下載技能 ZIP
在 Claude 中上傳
前往 設定 → 功能 → 技能 → 上傳技能
開啟並開始使用
測試它
正在使用「adapt」。 Help me adapt a complex data dashboard for mobile
預期結果:
對於行動儀表板，優先考慮：單欄布局、 secondary 資料的可折疊區塊、較大的觸控目標（至少 44px）、含關鍵指標的固定標題、底部導航以快速存取、複雜圖表的漸進式顯示。考慮在行動裝置上完全隱藏低優先順序的小工具，而不是將所有內容堆疊。
正在使用「adapt」。 What are best practices for tablet landscape orientation?
預期結果:
平板橫向擅長呈現主從模式、並排內容面板、多欄表單和行內編輯。使用雙欄布局而非單欄或三欄。同時支援觸控和指標輸入。允許方向特定的布局，同時保持資訊架構的一致性。
安全審計
安全Static scanner flagged 31 potential issues, all evaluated as false positives. The 'external_commands' detections are CSS/HTML code examples (clamp(), display:none, srcset) incorrectly flagged. 'Weak cryptographic algorithm' and 'system reconnaissance' are common English words (desktop, mobile, context) wrongly matched. This is a pure design guidance skill with no executable code, network calls, or file operations.
品質評分
你能建構什麼
行動網站重新設計
為行動用戶調整現有的桌面網站，提供觸控友好的互動和優化的布局
跨平台應用程式 UI
確保網頁應用程式在桌面瀏覽器和行動平板電腦上無縫運作，並保持一致的使用者體驗
電子報設計
將網頁公告轉換為與所有主要電子郵件用戶端相容的行動友善電子郵件
試試這些提示
幫我將這個[元件/頁面/設計]調整為行動裝置。它原本是為[桌面/平板電腦]設計的。我應該對布局、導航和互動做哪些改變？
我有一個優先考慮行動裝置的設計，需要將其調整為平板電腦和桌面。建立一個有效利用水平空間同時保持一致性的調整策略。
如何將網頁設計調整為[列印/電子郵件]？我需要考慮哪些布局、內容和技術限制的關鍵差異？
提供實作響應式設計的具體 CSS 技術，包括斷點、容器查詢、流動排版 with clamp()，以及觸控目標尺寸。
最佳實務
- 盡可能採用行動優先的方法，然後為更大的螢幕進行漸進式增強
- 使用內容驅動的斷點而非任意的裝置寬度
- 在真實裝置上測試，而非僅依賴瀏覽器 DevTools 模擬
- 在所有斷點和平台上保持一致的資訊架構
避免
- 在行動裝置上隱藏核心功能而非使其運作
- 在行動裝置和桌面版本上使用不同的資訊架構
- 破壞每個平台的使用者預期（例如：在桌面版上使用漢堡選單）
- 盲目使用通用斷點而不考慮設計實際上在哪裡斷裂
常見問題
響應式設計和適應性設計有什麼區別？
標準的響應式斷點有哪些？
我如何處理不同螢幕尺寸的圖片？
我應該使用多大的觸控目標？
我如何為行動裝置調整導航？
我應該使用行動專用的網域或子網域嗎？
開發者詳情
檔案結構
📄 SKILL.md