Mobile First Design

secondsky/claude-skills/plugins/mobile-first-design/skills/mobile-first-design

作者 secondsky88378361314fMIT227 个星标收录于 2026年10月8日更新于 2026年10月8日仓库10天前更新

Designs responsive interfaces starting from mobile screens with progressive enhancement for larger devices. Use when building responsive websites, optimizing for mobile users, or implementing adaptive layouts.

仅含说明Design & Creative

AI 生成的概览

提供移动优先的响应式界面设计指导，并针对更大屏幕逐步增强。

功能: 该技能提供从移动屏幕出发设计响应式网页界面、再为更大设备增强的说明与参考资料。它给出断点宽度、移动优先 CSS 模式、适合触控的尺寸、性能目标以及渐进增强分层。其产出是设计指导，而非文件或代码成品。
适用场景: 适用于构建响应式网站、为移动用户优化布局，或实现从小屏幕到桌面端的自适应布局。
运行要求: 无需脚本或工具，仅为说明性内容。应用其中的 CSS 与 HTML 示例需要网页项目及浏览器测试环境。

Mobile-First Design

Design interfaces starting with mobile as the foundation, then enhance for larger screens.

Breakpoints

Mobile-First CSS

css

/* Base styles (mobile) */.container {  padding: 1rem;}
.nav {  display: none; /* Hidden on mobile */}
.nav-toggle {  display: block; /* Hamburger visible */}
/* Tablet and up */@media (min-width: 768px) {  .container {    padding: 2rem;    max-width: 720px;    margin: 0 auto;  }
  .nav {    display: flex;  }
  .nav-toggle {    display: none;  }}
/* Desktop */@media (min-width: 1024px) {  .container {    max-width: 960px;  }}

/* Base styles (mobile) */.container {  padding: 1rem;}
.nav {  display: none; /* Hidden on mobile */}
.nav-toggle {  display: block; /* Hamburger visible */}
/* Tablet and up */@media (min-width: 768px) {  .container {    padding: 2rem;    max-width: 720px;    margin: 0 auto;  }
  .nav {    display: flex;  }
  .nav-toggle {    display: none;  }}
/* Desktop */@media (min-width: 1024px) {  .container {    max-width: 960px;  }}

Touch-Friendly Design

css

/* Minimum touch target: 48x48px */.button {  min-height: 48px;  min-width: 48px;  padding: 12px 24px;}
/* Adequate spacing */.list-item {  padding: 16px;  margin-bottom: 8px;}

/* Minimum touch target: 48x48px */.button {  min-height: 48px;  min-width: 48px;  padding: 12px 24px;}
/* Adequate spacing */.list-item {  padding: 16px;  margin-bottom: 8px;}

Performance Requirements

Progressive Enhancement

html

<!-- Layer 1: Semantic HTML (works without CSS/JS) --><nav>  <a href="/home">Home</a>  <a href="/about">About</a></nav>
<!-- Layer 2: CSS enhances appearance --><!-- Layer 3: JS adds interactivity -->

<!-- Layer 1: Semantic HTML (works without CSS/JS) --><nav>  <a href="/home">Home</a>  <a href="/about">About</a></nav>
<!-- Layer 2: CSS enhances appearance --><!-- Layer 3: JS adds interactivity -->

Best Practices

Start design at 320px width
Use relative units (rem, %, vw)
Test on real devices
Optimize images for mobile
Minimize JavaScript for initial load
Ensure readable text without zooming

来源与署名

来源：secondsky/claude-skills位于plugins/mobile-first-design/skills/mobile-first-design提交8837836

许可证： MIT

内容归原作者所有。SourceWeft 从公开仓库中收录这些内容。

举报或申请下架

Name	Width	Devices
Mobile	320-480px	iPhone SE, small Android
Tablet	481-768px	iPad mini
Desktop	769-1024px	iPad Pro, laptops
Large	1025px+	Desktop monitors

Metric	Target
First Contentful Paint	<3s on 3G
JS bundle	<100KB gzipped
Total page weight	<500KB

Mobile First Design

Mobile-First Design

Breakpoints

Mobile-First CSS

Touch-Friendly Design

Performance Requirements

Progressive Enhancement

Best Practices

来源与署名

更多来自 secondsky/claude-skills 的技能

Vulnerability Scanning

Web Performance Optimization

Web Performance Audit

Threejs

Tailwind V4 Shadcn

Technical Specification

更多Design & Creative技能

Theme Factory

Slack Gif Creator

Frontend Design

Canvas Design

Brand Guidelines

Frontend Design