什么是 响应式修复器？

响应式修复器是一款专门设计的实用工具，旨在弥合桌面优先开发与现代移动端响应式需求之间的差距。通过将此工具集成到您的 Openclaw Skills 集合中，您可以立即将静态组件重构为流体、具备断点感知的代码库。它能自动完成计算媒体查询、调整网格列以及确保各种屏幕尺寸下的触控友好交互等繁琐过程。

该工具对于使用 Tailwind CSS 等实用优先框架或 CSS-in-JS 库的开发者特别有效。它分析现有的布局结构以识别固定像素宽度、静态网格和死板的字体大小，并使用从智能手机到大型显示器都能优雅缩放的移动优先逻辑来替换它们。

下载入口:https://github.com/openclaw/skills/tree/main/skills/lxgicstudios/ai-responsive

安装与下载

1. ClawHub CLI

从源直接安装技能的最快方式。

2. 手动安装

将技能文件夹复制到以下位置之一

优先级：工作区 > 本地 > 内置

3. 提示词安装

将此提示词复制到 OpenClaw 即可自动安装。

响应式修复器 应用场景

• 将旧有的仅限桌面 React 或 Vue 组件转换为移动优先设计。
• 根据静态像素级原型快速构建响应式布局原型。
• 审计并修复辅助功能问题，如移动设备上的小触控目标。
• 使用 Openclaw Skills 逻辑在不同设备视口中动态缩放字体大小和间距。

1. 用户通过 CLI 提供特定组件文件的路径。
2. 该技能分析现有的布局结构，寻找固定宽度和以桌面为中心的网格/弹性配置。
3. 它应用移动优先的样式原则，将固定单位转换为响应式缩放单位。
4. 它根据内容复杂性或用户指定的标志注入适当的断点。
5. 生成重构后的代码，确保网格列、字体大小和可见性类在所有屏幕上都经过优化。

响应式修复器 配置指南

要开始使用此技能，请确保您拥有 Node.js 18 或更高版本以及有效的 API 密钥。此工具可与其他 Openclaw Skills 无缝集成，实现全自动化工作流。

# 设置环境变量
export OPENAI_API_KEY='your_api_key_here'

# 在组件上运行工具
npx ai-responsive ./src/components/Dashboard.tsx

响应式修复器 数据架构与分类体系

该技能处理组件文件，并可以通过各种标志进行自定义以匹配项目的代码架构：

name: responsive-fix
description: Make components responsive with proper breakpoints

Responsive Fixer

Paste your desktop-only component, get mobile-responsive code back.

Quick Start

npx ai-responsive ./src/components/Dashboard.tsx

What It Does

• Analyzes layout structure
• Adds proper breakpoints
• Converts fixed widths to responsive
• Handles grid/flex adjustments
• Adds mobile-first styles

Usage Examples

# Fix a component
npx ai-responsive ./src/components/Sidebar.tsx

# Specify breakpoints
npx ai-responsive ./components/Nav.tsx --breakpoints sm,md,lg

# CSS-in-JS output
npx ai-responsive ./components/Card.tsx --format styled

What It Fixes

• Fixed pixel widths → responsive units
• Desktop grids → mobile stacks
• Hidden mobile elements → proper show/hide
• Touch targets → 48px minimum
• Font sizes → responsive scaling

Output Example

// Before: grid-cols-4
// After: grid-cols-1 sm:grid-cols-2 lg:grid-cols-4

Requirements

Node.js 18+. OPENAI_API_KEY required.

License

MIT. Free forever.

Built by LXGIC Studios

• GitHub: github.com/lxgicstudios/ai-responsive
• Twitter: @lxgicstudios