mcpField
R
responsive-web-design

responsive-web-design

github.com/aj-geddes设计与 UI3731.1k 次安装34 周前更新
代码仓库

关于 responsive-web-design

responsive-web-design 是一项响应式网页设计技能，面向构建适配不同设备的界面。它采用移动优先思路，并提供 Flexbox、Grid、媒体查询和响应式排版等参考指南。

主要功能

  1. 01采用移动优先的设计方式
  2. 02使用 Flexbox 构建布局
  3. 03使用 CSS Grid 排列内容
  4. 04通过媒体查询适配屏幕
  5. 05参考响应式导航与排版

适用场景

  1. 01构建适配多种设备的应用
  2. 02开发移动优先的网站
  3. 03设计灵活的 UI 系统
  4. 04制作响应式卡片布局

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/aj-geddes/useful-ai-prompts --skill responsive-web-design

安装后在 Claude Code 中输入/responsive-web-design确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

references/
css-grid-responsive-layout.md
flexbox-responsive-navigation.md
mobile-first-media-query-strategy.md
responsive-cards-component.md
responsive-typography.md
templates/
component-template.tsx

详细介绍

响应式网页设计

目录

概述

使用 Flexbox、Grid 和媒体查询等现代 CSS 技术构建移动优先的响应式界面，打造适应性强的用户体验。

适用场景

  • 多设备应用
  • 移动优先开发
  • 无障碍布局
  • 灵活的 UI 系统
  • 跨浏览器兼容性

快速入门

最小可运行示例：

/* Mobile styles (default) */
.container {
  display: flex;
  flex-direction: column;
  padding: 16px;
  gap: 16px;
}

.card {
  padding: 16px;
  border-radius: 8px;
  background: white;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

/* Tablet (640px and up) */
@media (min-width: 640px) {
  .container {
    flex-direction: row;
// ... (see reference guides for full implementation)

参考指南

references/ 目录中的详细实现：

指南内容
移动优先的媒体查询策略移动优先的媒体查询策略
Flexbox 响应式导航Flexbox 响应式导航
CSS Grid 响应式布局CSS Grid 响应式布局
响应式排版响应式排版
响应式卡片组件响应式卡片组件

最佳实践

✅ 应该做
  • 遵循既定模式和约定
  • 编写简洁、易维护的代码
  • 添加适当的文档
  • 部署前进行全面测试
❌ 不应该做
  • 跳过测试或验证
  • 忽略错误处理
  • 将配置值硬编码

评论

支持 Markdown