mcpField
M
mobile-first-design

mobile-first-design

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

关于 mobile-first-design

从小屏幕开始设计，并将体验扩展到更大的设备。提供响应式实现、移动端性能和渐进增强方面的指导。

主要功能

  1. 01优先规划小屏布局
  2. 02响应式设计指南
  3. 03移动端性能指南
  4. 04渐进增强指南

适用场景

  1. 01设计 Web 应用
  2. 02创建响应式网站
  3. 03确定移动端功能优先级
  4. 04改善跨设备体验

安装

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

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

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

包含的文件

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

references/
mobile-performance.md
progressive-enhancement.md
responsive-design-implementation.md
scripts/
validate-config.sh
templates/
config-starter.yaml

详细介绍

移动优先设计

目录

概述

移动优先设计以小屏幕为起点，确保核心功能在所有设备上都能正常运行，同时利用更大的屏幕提升体验。

适用场景

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

快速入门

最简可运行示例：

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)

参考指南

references/ 目录中的详细实现：

指南内容
响应式设计实现响应式设计实现
移动端性能移动端性能
渐进增强渐进增强

最佳实践

✅ 应该
  • 优先为最小屏幕进行设计
  • 在真实移动设备上测试
  • 使用响应式图片
  • 优化移动端性能
  • 确保触控目标至少为 44x44px
  • 在移动设备上将内容垂直堆叠
  • 在移动设备上使用汉堡菜单
  • 在移动设备上隐藏非必要内容
  • 在慢速网络环境下测试
  • 采用渐进增强方法
❌ 不应该
  • 假设所有移动用户都使用高速网络
  • 在移动设备上使用仅适用于桌面的模式
  • 忽视触控交互需求
  • 将按钮做得太小
  • 忘记横屏方向
  • 让移动端布局过于复杂
  • 忽视移动端性能
  • 假设用户没有键盘（iPad 用户）
  • 跳过移动端用户测试
  • 忘记刘海屏和安全区域

评论

支持 Markdown