responsive-design作者 Seth Hobson

Responsive Design Skill.

Claude Code 和 Codex 的 UI 设计 skill：响应式布局，包含容器查询、流式排版、CSS Grid 和移动优先断点。

Web & UI
UI 代码

wshobson/agents · plugins/ui-design/skills/responsive-design/SKILL.mdSKILL.md

--- name: responsive-design description: Implement modern responsive layouts using container queries, fluid typography, CSS Grid, and mobile-first breakpoint strategies. Use when building adaptive interfaces, implementing fluid layouts, or creating component-level responsive behavior. --- ## When to Use This Skill ## Detailed patterns and worked examples ## Best Practices

前言和章节标题读取自上游文件，时间为 2026-09-14 · 完整内容 1,989 字符

01 功能说明

responsive-design skill 在 Claude Code 和 Codex 中的作用

摘要、工作流与产物，均读自该 skill 的 SKILL.md。

来自 SKILL.md读取于 2026-09-14 · 非实际运行记录

以 skill 自身的术语

该 skill 使用容器查询、流式排版、CSS Grid 以及移动优先的断点策略来实现现代响应式布局。它涵盖组件级响应式设计、流式排版与间距比例、基于 CSS Grid 和 Flexbox 的复杂布局，以及设计系统的断点策略。该 skill 还涉及响应式图片与媒体、自适应导航模式，以及响应式表格与数据展示。

它强调移动优先开发、基于内容而非基于设备的断点，以及用于组件级适配的容器查询。该 skill 还包含关于触控目标、用于国际化的逻辑属性，以及通过图片处理和延迟加载实现性能优化的指导。

UI 代码

查看示例提示词 ↗

工作方式

01
从移动优先开始
先以移动端样式作为基础，然后逐步增强以适配更大屏幕，而不是从桌面端往下做适配。
02
设置基于内容的断点
根据内容需要重排的位置来定义断点，而不是根据特定设备尺寸。

02 找到适合场景

何时使用 responsive-design Skill

在 Claude Code 或 Codex 中使用 responsive-design skill 处理此类 UI 设计工作。适用范围和限制来自该 skill 的文件。

适合场景

实现移动优先的响应式布局
使用容器查询实现基于组件的响应式
创建流式排版和间距比例
为设计系统设计断点策略
构建响应式表格与数据展示

03 Skill 内部

responsive-design skill 为 Claude Code 和 Codex 制定的规则

1 SKILL.md 为 Agent 设定的具体指令、默认值和限制 —— 文件中真正影响结果的部分。

优化并延迟加载
为性能优化图片，并对初始处于屏外的内容进行延迟加载。

04 投入使用

在 Claude Code 或 Codex 中安装 responsive-design

一条 npx skills add 命令，然后在你的 Agent 中执行第一个任务和对结果的清单检查。

将 responsive-design 添加到 Claude Code、Codex 或你的 Agent

在你的项目中运行；安装程序会询问要把它添加到哪个 Agent。

Terminal

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

针对 plugins/ui-design/skills/responsive-design/SKILL.md 的通用 skills CLI 形式；具体仓库可能记录了自己的路径。

给 Skill 一个首次 UI 设计任务

按 skill 自身的术语撰写；把括号中的部分换成你的内容。

Starter prompt

Build a responsive product card grid that uses container queries to adapt the card layout based on available space. Implement fluid typography for the product titles and descriptions, maintain 44x44px touch targets for all buttons, and use CSS Grid with mobile-first breakpoints. Include responsive product images with proper aspect ratios and lazy loading for cards below the fold.

来源：依据 SKILL.md，按 skill 自身的术语撰写。

检查首次结果

在接受输出之前，在记录和文件中查找以下内容：

结果以 UI 代码形式交付，如此 skill 的目录中所列。
Agent 在生成结果之前会在其计划或记录中命名 responsive-design skill。
您自己的内容、名称和数字在输出中保持不变。

在 OpenDesign 中通过其 SKILL.md 链接导入 responsive-design：Plugins → Add → Skill → Import from link，然后在顶部栏中选择它。

下载 OpenDesign 阅读快速入门

05 开源、可追溯

来源、许可与验证

本页面事实的来源，以及最后检查时间。

Author: Seth Hobson
Repository: github.com/wshobson/agents 分支 main
Skill 文件: plugins/ui-design/skills/responsive-design/SKILL.md 验证时记录的内容校验和；commit 4236bb9
License: MIT 来自 LICENSE。
仓库星标数: 39,635 GitHub 快照拍摄于 2026-09-14，针对整个 wshobson/agents 仓库，该仓库在此目录中包含 18 个 skills。不是 responsive-design 的评分或使用量。
已由 OpenDesign 验证: 2026-09-14 已检查源文件、路径、许可文本和 star 数量。未内置在 OpenDesign 主程序（检查日期 2026-08-28）；本页面未记录实际运行。

SKILL.md 内部

何时使用此 Skill列出八种场景，包括移动优先布局、容器查询、流式排版和响应式数据展示
详细模式与示例需要时指向 references/details.md 以获取更深入的模式文档
最佳实践八项核心原则，包括移动优先方法、内容断点、流式取值、容器查询与性能
常见问题七个常见问题，如水平溢出、固定宽度、视口高度和触控目标尺寸

Skill 自身的描述

"使用容器查询、流式排版、CSS Grid 和移动优先断点策略实现现代响应式布局。用于构建自适应界面、实现流式布局或创建组件级响应式行为。"

来自 SKILL.md 的 front-matter 描述。完整文件约 1,989 字符。在 GitHub 上阅读完整文件。

响应式设计

在真实 UI 设计任务中运行 responsive-design。

下载 OpenDesign，从 SKILL.md 链接导入 responsive-design，粘贴上述提示，在查看结果前先阅读计划。

下载 OpenDesign 浏览所有 skills

终端

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