---
id: sm-adapt
name: "adapt"
url: https://skills.yangsir.net/skill/sm-adapt
author: pbakaus
domain: product
tags: ["product-adaptation", "market-responsiveness", "feature-prioritization", "agile-development", "user-needs"]
install_count: 82100
rating: 4.70 (1724 reviews)
github: https://github.com/pbakaus/impeccable
---

# adapt

> 一种设计语言，旨在提升AI工具在产品设计中的适应和调整能力，帮助用户快速响应变化并优化设计方案。

**Stats**: 82,100 installs · 4.7/5 (1724 reviews)

## Before / After 对比

### 产品设计智能适应性增强

## Readme

# adapt

Adapt existing designs to work effectively across different contexts - different screen sizes, devices, platforms, or use cases.

## MANDATORY PREPARATION

Use the frontend-design skill — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run teach-impeccable first. Additionally gather: target platforms/devices and usage contexts.

## Assess Adaptation Challenge

Understand what needs adaptation and why:

- 

**Identify the source context**:

What was it designed for originally? (Desktop web? Mobile app?)

- What assumptions were made? (Large screen? Mouse input? Fast connection?)

- What works well in current context?

- 

**Understand target context**:

**Device**: Mobile, tablet, desktop, TV, watch, print?

- **Input method**: Touch, mouse, keyboard, voice, gamepad?

- **Screen constraints**: Size, resolution, orientation?

- **Connection**: Fast wifi, slow 3G, offline?

- **Usage context**: On-the-go vs desk, quick glance vs focused reading?

- **User expectations**: What do users expect on this platform?

- 

**Identify adaptation challenges**:

What won't fit? (Content, navigation, features)

- What won't work? (Hover states on touch, tiny touch targets)

- What's inappropriate? (Desktop patterns on mobile, mobile patterns on desktop)

**CRITICAL**: Adaptation is not just scaling - it's rethinking the experience for the new context.

## Plan Adaptation Strategy

Create context-appropriate strategy:

### Mobile Adaptation (Desktop → Mobile)

**Layout Strategy**:

- Single column instead of multi-column

- Vertical stacking instead of side-by-side

- Full-width components instead of fixed widths

- Bottom navigation instead of top/side navigation

**Interaction Strategy**:

- Touch targets 44x44px minimum (not hover-dependent)

- Swipe gestures where appropriate (lists, carousels)

- Bottom sheets instead of dropdowns

- Thumbs-first design (controls within thumb reach)

- Larger tap areas with more spacing

**Content Strategy**:

- Progressive disclosure (don't show everything at once)

- Prioritize primary content (secondary content in tabs/accordions)

- Shorter text (more concise)

- Larger text (16px minimum)

**Navigation Strategy**:

- Hamburger menu or bottom navigation

- Reduce navigation complexity

- Sticky headers for context

- Back button in navigation flow

### Tablet Adaptation (Hybrid Approach)

**Layout Strategy**:

- Two-column layouts (not single or three-column)

- Side panels for secondary content

- Master-detail views (list + detail)

- Adaptive based on orientation (portrait vs landscape)

**Interaction Strategy**:

- Support both touch and pointer

- Touch targets 44x44px but allow denser layouts than phone

- Side navigation drawers

- Multi-column forms where appropriate

### Desktop Adaptation (Mobile → Desktop)

**Layout Strategy**:

- Multi-column layouts (use horizontal space)

- Side navigation always visible

- Multiple information panels simultaneously

- Fixed widths with max-width constraints (don't stretch to 4K)

**Interaction Strategy**:

- Hover states for additional information

- Keyboard shortcuts

- Right-click context menus

- Drag and drop where helpful

- Multi-select with Shift/Cmd

**Content Strategy**:

- Show more information upfront (less progressive disclosure)

- Data tables with many columns

- Richer visualizations

- More detailed descriptions

### Print Adaptation (Screen → Print)

**Layout Strategy**:

- Page breaks at logical points

- Remove navigation, footer, interactive elements

- Black and white (or limited color)

- Proper margins for binding

**Content Strategy**:

- Expand shortened content (show full URLs, hidden sections)

- Add page numbers, headers, footers

- Include metadata (print date, page title)

- Convert charts to print-friendly versions

### Email Adaptation (Web → Email)

**Layout Strategy**:

- Narrow width (600px max)

- Single column only

- Inline CSS (no external stylesheets)

- Table-based layouts (for email client compatibility)

**Interaction Strategy**:

- Large, obvious CTAs (buttons not text links)

- No hover states (not reliable)

- Deep links to web app for complex interactions

## Implement Adaptations

Apply changes systematically:

### Responsive Breakpoints

Choose appropriate breakpoints:

- Mobile: 320px-767px

- Tablet: 768px-1023px

- Desktop: 1024px+

- Or content-driven breakpoints (where design breaks)

### Layout Adaptation Techniques

- **CSS Grid/Flexbox**: Reflow layouts automatically

- **Container Queries**: Adapt based on container, not viewport

- **`clamp()`**: Fluid sizing between min and max

- **Media queries**: Different styles for different contexts

- **Display properties**: Show/hide elements per context

### Touch Adaptation

- Increase touch target sizes (44x44px minimum)

- Add more spacing between interactive elements

- Remove hover-dependent interactions

- Add touch feedback (ripples, highlights)

- Consider thumb zones (easier to reach bottom than top)

### Content Adaptation

- Use `display: none` sparingly (still downloads)

- Progressive enhancement (core content first, enhancements on larger screens)

- Lazy loading for off-screen content

- Responsive images (`srcset`, `picture` element)

### Navigation Adaptation

- Transform complex nav to hamburger/drawer on mobile

- Bottom nav bar for mobile apps

- Persistent side navigation on desktop

- Breadcrumbs on smaller screens for context

**IMPORTANT**: Test on real devices, not just browser DevTools. Device emulation is helpful but not perfect.

**NEVER**:

- Hide core functionality on mobile (if it matters, make it work)

- Assume desktop = powerful device (consider accessibility, older machines)

- Use different information architecture across contexts (confusing)

- Break user expectations for platform (mobile users expect mobile patterns)

- Forget landscape orientation on mobile/tablet

- Use generic breakpoints blindly (use content-driven breakpoints)

- Ignore touch on desktop (many desktop devices have touch)

## Verify Adaptations

Test thoroughly across contexts:

- **Real devices**: Test on actual phones, tablets, desktops

- **Different orientations**: Portrait and landscape

- **Different browsers**: Safari, Chrome, Firefox, Edge

- **Different OS**: iOS, Android, Windows, macOS

- **Different input methods**: Touch, mouse, keyboard

- **Edge cases**: Very small screens (320px), very large screens (4K)

- **Slow connections**: Test on throttled network

Remember: You're a cross-platform design expert. Make experiences that feel native to each context while maintaining brand and functionality consistency. Adapt intentionally, test thoroughly.
Weekly Installs18.2KRepository[pbakaus/impeccable](https://github.com/pbakaus/impeccable)GitHub Stars10.2KFirst Seen14 days agoSecurity Audits[Gen Agent Trust HubPass](/pbakaus/impeccable/adapt/security/agent-trust-hub)[SocketPass](/pbakaus/impeccable/adapt/security/socket)[SnykPass](/pbakaus/impeccable/adapt/security/snyk)Installed oncodex17.9Kopencode17.8Kgithub-copilot17.8Kgemini-cli17.7Kcursor17.7Kamp17.7K

---
*Source: https://skills.yangsir.net/skill/sm-adapt*
*Markdown mirror: https://skills.yangsir.net/api/skill/sm-adapt/markdown*