移动优先设计指南：响应式网页开发、性能优化与渐进增强最佳实践

mobile-first-design by aj-geddes/useful-ai-prompts

250 周安装量

141 GitHub Stars

GitHub

安装命令

npx skills add https://github.com/aj-geddes/useful-ai-prompts --skill mobile-first-design

设计性能优化用户体验

🇨🇳中文介绍

移动优先设计

概述

移动优先设计将小屏幕作为设计的起点，确保核心功能在所有设备上都能正常工作，同时利用更大的屏幕来提供增强的体验。

使用场景

网页应用设计
响应式网站创建
功能优先级排序
性能优化
渐进增强
跨设备体验设计

快速开始

最小工作示例：

Mobile-First Approach:

Step 1: Design for Mobile (320px - 480px)
  - Constrained space forces priorities
  - Focus on essential content and actions
  - Single column layout
  - Touch-friendly interactive elements

Step 2: Enhance for Tablet (768px - 1024px)
  - Add secondary content
  - Multi-column layouts possible
  - Optimize spacing and readability
  - Take advantage of hover states

Step 3: Optimize for Desktop (1200px+)
  - Full-featured experience
  - Advanced layouts
  - Rich interactions
  - Multiple columns and sidebars

---
## Responsive Breakpoints:

Mobile: 320px - 480px
  - iPhone SE, older phones
// ... (see reference guides for full implementation)

参考指南

目录下的详细实现：

广告位招租

在这里展示您的产品或服务

触达数万 AI 开发者，精准高效

联系我们

指南	内容
响应式设计实现	Responsive Design Implementation
移动端性能	Mobile Performance
渐进增强	Progressive Enhancement

🇺🇸English

Mobile-First Design

Overview
When to Use
Quick Start
Reference Guides
Best Practices

Overview

Mobile-first design prioritizes small screens as the starting point, ensuring core functionality works on all devices while leveraging larger screens for enhanced experience.

When to Use

Web application design
Responsive website creation
Feature prioritization
Performance optimization
Progressive enhancement
Cross-device experience design

Quick Start

Minimal working example:

Mobile-First Approach:

Step 1: Design for Mobile (320px - 480px)
  - Constrained space forces priorities
  - Focus on essential content and actions
  - Single column layout
  - Touch-friendly interactive elements

Step 2: Enhance for Tablet (768px - 1024px)
  - Add secondary content
  - Multi-column layouts possible
  - Optimize spacing and readability
  - Take advantage of hover states

Step 3: Optimize for Desktop (1200px+)
  - Full-featured experience
  - Advanced layouts
  - Rich interactions
  - Multiple columns and sidebars

---
## Responsive Breakpoints:

Mobile: 320px - 480px
  - iPhone SE, older phones
// ... (see reference guides for full implementation)

Reference Guides

Detailed implementations in the references/ directory:

Guide	Contents
Responsive Design Implementation	Responsive Design Implementation
Mobile Performance	Mobile Performance
Progressive Enhancement	Progressive Enhancement

Best Practices

✅ DO

Design for smallest screen first
Test on real mobile devices
Use responsive images
Optimize for mobile performance
Make touch targets 44x44px minimum
Stack content vertically on mobile
Use hamburger menu on mobile
Hide non-essential content on mobile
Test with slow networks
Progressive enhancement approach

❌ DON'T

Assume all mobile users have fast networks
Use desktop-only patterns on mobile
Ignore touch interaction needs
Make buttons too small
Forget about landscape orientation
Over-complicate mobile layout
Ignore mobile performance
Assume no keyboard (iPad users)
Skip mobile user testing
Forget about notches and safe areas

Weekly Installs

211

Repository

aj-geddes/usefu…-prompts

GitHub Stars

121

First Seen

Jan 21, 2026

Security Audits

Gen Agent Trust HubPass SocketPass SnykPass

Installed on

opencode183

gemini-cli177

codex171

github-copilot149

claude-code145

cursor143