responsive-design

responsive-design 技能總覽

responsive-design 技能可協助代理針對自適應介面提供現代、可直接落地的實作建議，涵蓋 container queries、流動式尺寸、CSS Grid、Flexbox，以及 mobile-first 斷點策略。它特別適合正在打造真實 UI 版面、design system 元件、dashboard、cards、navigation，或資料密集畫面的使用者；這些介面必須能跨螢幕尺寸穩定運作，同時避免維護脆弱且依賴特定裝置的 CSS。

這個 responsive-design 技能適合哪些人

如果你的需求不只是「讓它支援手機版」，就很適合使用 responsive-design 技能。它特別適合 frontend engineers、需要處理實作細節的 UI designers，以及希望取得元件層級響應式模式的代理使用者，而不只是停留在泛泛的 media query 建議。

它實際能幫你完成什麼工作

responsive-design 技能真正解決的，是把一個模糊的版面目標轉成可執行的響應式實作策略：哪些地方應該做成 fluid、哪些地方該用 breakpoints、什麼時候該用 container queries 而不是 viewport queries，以及如何讓元件能在不同情境下持續重複使用。

這個技能和一般 prompt 有什麼不同

一般 prompt 很容易產出過時建議，例如以裝置類型為基礎的斷點，或堆太多 media queries。responsive-design 技能則聚焦於 repository 中較新的 CSS 實務，特別包括：

• 以內容驅動、mobile-first 的 breakpoint 策略
• 用於可重用元件的 container queries
• 以 clamp() 為核心的流動式字級與間距
• 將 viewport 問題與 component 問題拆開處理的版面選擇

安裝前最重要的判斷點

如果你的產出目標是 CSS、component spec，或 UI implementation guidance，這個技能會很適合。若你只想要視覺 mockup、no-code 工具操作說明，或只想看 framework-specific abstraction 而不在意底層 CSS 決策，它的幫助就比較有限。這個 repository 偏向 reference-driven，因此真正的價值來自 references/ 裡的模式與範例，而不是自動化腳本。

如何使用 responsive-design 技能

responsive-design 的安裝情境

請從 repository root skill collection 安裝這個技能：

npx skills add https://github.com/wshobson/agents --skill responsive-design

由於上游 skill 本身不附帶 scripts 或 framework bindings，安裝的重點主要是讓你的 agent 可以呼叫這份指引。你應該把它視為一個以文件與模式為主的技能，而不是有嚴格輸入格式的 code generator。

先讀這些檔案

建議依照以下順序閱讀：

1. plugins/ui-design/skills/responsive-design/SKILL.md
2. plugins/ui-design/skills/responsive-design/references/container-queries.md
3. plugins/ui-design/skills/responsive-design/references/fluid-layouts.md
4. plugins/ui-design/skills/responsive-design/references/breakpoint-strategies.md

這個閱讀順序很重要：核心 skill 先界定範圍，接著 references 再補上真正能提升輸出品質的實作細節。

這個技能需要你提供哪些輸入

當你提供以下資訊時，responsive-design 技能效果最好：

• component 或 page 類型
• layout 限制條件
• 目標螢幕情境
• 響應行為應以 viewport、container，或混合方式為主
• 任何 design system tokens 或 breakpoint 慣例
• browser support 要求

較弱的輸入：
「Make this responsive.」

較強的輸入：
「Create a responsive card grid for a dashboard. Cards must work in a full-width page and in a narrow sidebar. Use container queries where component context changes, fluid spacing and type, and keep breakpoints aligned to our sm/md/lg token scale unless content forces a different threshold.」

如何把模糊需求變成高品質 prompt

一個好的 responsive-design usage prompt，通常會包含五個部分：

1. UI object：card list、nav bar、pricing table、form、data table
2. Behavioral changes：stack、wrap、collapse、resize、reorder、reveal
3. Constraint source：viewport、parent container、content width
4. System rules：token scale、grid rules、minimum tap size、accessibility needs
5. Output shape：CSS example、implementation plan、breakpoint rationale、refactor advice

範例 prompt：

「Use the responsive-design skill to propose a responsive strategy for a product comparison table. Prioritize small screens first, avoid horizontal overflow where possible, use content-based breakpoints, and explain whether container queries or viewport media queries should control each part. Include sample CSS for typography, spacing, and layout transitions.」

什麼時候該要求使用 container queries

當一個 component 需要依據「它被放在哪裡」來改變，而不只是依據瀏覽器寬度時，就應該使用 container queries。這對可重用的 cards、side panels、widgets、embedded modules，以及 design system components 特別重要。

如果你的 component 會出現在多種 parent layout 中，repository 裡的 references/container-queries.md 是最值得先看的檔案。裡面包含實用語法、named containers，以及 browser support 注意事項。

什麼時候該優先考慮 fluid layouts，而不是加更多 breakpoints

如果你的 UI 問題主要在於文字、間距或寬度需要平順縮放，應該先引導 agent 採用 fluid 技術。當你希望減少硬切的 breakpoint 跳變，改用 clamp()、relative units 與 intrinsic sizing 做出更自然的縮放時，references/fluid-layouts.md 會很有幫助。

這通常會改善：

• headings 與 body text
• section 間距
• card 尺寸
• 在真正切換前應先保有伸縮空間的 grids

如何正確使用 breakpoint 指引

這個 repository 明確偏好以內容為中心、mobile-first 的 breakpoints，而不是裝置型錄式的分類。實務上，你應該要求這個技能針對每個 breakpoint 給出理由，例如：行長過長、card 太擠、table 溢出、nav 換行，或 touch target 太難操作。

如果你的團隊已經使用 Tailwind 或 Bootstrap 的 breakpoint tokens，也請明說。references 裡有常見的 scale，可幫助這個技能把現代策略對應到既有系統，而不是憑空發明任意數值。

真實專案建議工作流程

一個實用的 responsive-design guide 工作流程如下：

1. 先描述 component，以及它在小尺寸與大尺寸下的失敗模式。
2. 先要求 layout strategy，再要求 code。
3. 先決定哪些應該 fluid、哪些應該 snap、哪些應該 reflow。
4. 確認策略合理後，再要求 example CSS。
5. 以實際 container widths 測試輸出，而不是只看瀏覽器預設尺寸。
6. 如果第一版太泛，請搭配 screenshots、DOM structure 或現有 CSS 反覆迭代。

比起一開始就直接要求最終 CSS，這個順序通常能得到更好的結果。

最適合的輸出格式

你可以要求這個技能輸出以下其中一種形式：

• responsive implementation plan
• breakpoint rationale table
• CSS starter pattern
• component refactor strategy
• audit of an existing layout
• “container query vs media query” decision

這些格式比起「給我 responsive code」更能迫使模型做出清楚判斷。

能提升輸出品質的實用技巧

若想得到更好的 responsive-design for UI Design 結果，建議：

• 當版面關係很重要時，一併提供目前的 HTML structure
• 指出內容長度是否變動很大
• 說明最小可讀字級與最小互動目標尺寸
• 告訴 agent 是否允許重新排序內容
• 若有 legacy browser 限制，請在它提出大量 container-query 解法前先講清楚

若缺少這些輸入，技能可能會選擇技術上很新、但不符合你支援矩陣或 component architecture 的方案。

responsive-design 技能 FAQ

responsive-design 技能對初學者友善嗎？

算是友善，但前提是你已經懂基本 CSS。這個技能的內容偏向現代觀念，而不是從零開始的教學，因此最適合能閱讀 CSS、但想做出更好響應式決策的人。初學者仍然可以使用，只是要預期會遇到像 container queries、intrinsic sizing、fluid scales 這類術語。

這個技能會產出 framework-specific code 嗎？

不以這個為主。repository 的內容核心仍是 CSS pattern。你當然可以要求它改寫成 React、Vue、Tailwind 或 plain CSS，但它最主要的價值在於響應式策略本身，而不是 framework integration 細節。

responsive-design 會比一般 UI prompt 更好嗎？

通常會，特別是在「響應式」本身就是任務核心時。一般 prompt 常會退回舊式 breakpoint 習慣，或只給出很表面的「手機上改成堆疊」建議。responsive-design skill 則能讓 agent 在版面決策上使用更明確、更新的語彙與判斷方式。

什麼情況下不該使用 responsive-design？

如果你的任務主要是以下內容，建議跳過：

• visual branding
• static mockup generation
• animation-heavy interaction design
• framework setup unrelated to layout
• 沒有自適應行為判斷、只求 pixel-perfect 重現

如果你的團隊無法使用現代 CSS 功能，且必須維持 IE 時代的相容模式，這個技能也不是理想選擇。

它有涵蓋 browser support 的考量嗎？

有一部分。references 會提到現代支援情況，特別是 container queries，也隱含了 graceful fallbacks 的思路。但它不是一個 compatibility matrix skill。若 browser support 很關鍵，請在 prompt 中明確寫出最低支援瀏覽器。

這個技能能幫助 design systems 嗎？

可以。它很適合處理 breakpoint philosophy、與 token 對齊的 spacing 和 typography，以及元件在不同 containers 中的可重用行為。特別是當 design system 想減少 page-specific hacks、改用更可攜的 components 時，這個技能會很有價值。

如何改進 responsive-design 技能的使用效果

給 responsive-design 技能真實限制條件

輸出品質最大的提升，通常來自限制條件。請提供實際寬度、token 名稱、內容樣本與 UI state。「Responsive dashboard card」太模糊；「card used in 320px sidebar and 1200px main grid with long titles and two actions」就很可執行。

要它做決策，不只是寫 code

更好的 prompt：
「Use the responsive-design skill to decide which parts should use fluid sizing, which need breakpoints, and where container queries are justified.」

這會比下面這種要求產生更強的推理：
「Write responsive CSS.」

在重構時提供現有 CSS

如果你已經有 layout code，請把目前的 CSS 貼上，並要求技能協助簡化。這樣它比較能移除不必要的 media queries、找出脆弱的寬度假設，並在適合的地方用 component-aware 規則取代只看 viewport 的邏輯。

常見失敗模式要注意

在以下情況下，第一版輸出仍可能偏弱：

• agent 在沒有內容證據的情況下猜測 breakpoints
• 本來用 viewport 規則更簡單，卻硬套 container queries
• 加了 fluid typography，卻沒有 min/max 邊界
• 版面變化忽略 accessibility 或閱讀舒適度
• 範例看起來漂亮，但和你的 DOM structure 不相符

這些問題都能修正，前提是你要求它提供 rationale，並把每條規則對應到具體 UI 問題。

第一稿之後要用迭代 prompt

不錯的 follow-up prompts 包括：

• 「Reduce unnecessary breakpoints and explain what can be fluid instead.」
• 「Refactor this so the component works in both narrow sidebar and wide content areas.」
• 「Add fallbacks for teams that cannot rely fully on container queries.」
• 「Audit this layout for overflow, cramped text, and awkward wrap points.」

相較於一開始就要求從零整份重寫，這類追問更能提升實際採用性。

驗證時看 component 情境，不只看螢幕尺寸

responsive-design 技能的一個核心觀念是：很多失敗不是因為 viewport 寬度本身，而是因為只測 viewport。要改善結果，請檢查同一個 component 放在以下情境中的表現：

• full page content
• sidebar
• modal
• dense dashboard grid
• embedded marketing section

如果行為會因 container 不同而改變，請一開始就告訴技能，讓它能選對響應機制。

把 reference files 當成 prompt 錨點

如果你想要更深入的輸出，可以直接點名 repository references：

• references/container-queries.md：適合元件層級的響應行為
• references/fluid-layouts.md：適合平順縮放
• references/breakpoint-strategies.md：適合 mobile-first 的 breakpoint 決策

這是最容易讓 agent 產出更扎實 responsive-design usage 的方法之一，也能避免它退回泛泛的 frontend 建議。

用更好的驗收標準提升結果

你可以要求這個技能針對明確結果最佳化：

• 更少的 media queries
• 在指定寬度以下不出現 horizontal overflow
• 可讀的 line lengths
• 能跨不同 container sizes 重複使用的 components
• 與 token 對齊的 spacing 與 type
• breakpoints 之間最小化的 layout shift

清楚的 acceptance criteria，會讓 responsive-design 技能在正式 UI 製作上實用得多。