什么是 Responsive Maker？

Responsive Maker 是 Openclaw Skills 生态系统中的专业工具，旨在消除手动编写媒体查询和 Tailwind 断点的繁重工作。它分析现有的组件结构（无论是 React、Vue 还是纯 HTML），并智能地注入必要的 CSS 逻辑，以确保布局在移动端、平板端和桌面端视口中完美重排。

通过专注于移动优先原则，它确保您的应用程序无论在何种设备上使用，都能保持易用性和专业性。该技能通过自动化将固定布局转换为灵活的自适应界面，有效地弥合了以桌面为中心的开发与现代移动优先网页之间的差距。

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

安装与下载

1. ClawHub CLI

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

2. 手动安装

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

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

3. 提示词安装

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

Responsive Maker 应用场景

• 将旧有的仅限桌面端的 React 或 Vue 组件转换为移动端友好型。
• 快速原型化响应式布局，无需手动编写 CSS 媒体查询。
• 为整个组件目录批量添加 Tailwind CSS 响应式前缀。
• 修复现有生产代码库中移动端用户反馈的布局中断问题。

1. 该工具读取目标组件文件或目录的源代码。
2. 它识别固定宽度的容器、排版比例以及 flexbox 或 grid 配置。
3. AI 逻辑根据特定的布局结构确定最有效的断点。
4. 生成响应式层（CSS 媒体查询或 Tailwind 前缀）并将其注入到组件中。
5. 生成的代码保留了原有的样式，同时为不同的屏幕尺寸增加了必要的灵活性。

Responsive Maker 配置指南

确保您的系统中安装了 Node.js 18 或更高版本。无需永久安装；只需通过 npx 执行命令即可使用 Openclaw Skills 集合中的此项功能。

npx ai-responsive src/components/Hero.tsx

要处理整个目录或使用 glob 模式：

npx ai-responsive src/components/
npx ai-responsive "src/**/*.tsx"

Responsive Maker 数据架构与分类体系

name: responsive-maker
description: Make components responsive with proper breakpoints. Use when your components look terrible on mobile.

Responsive Maker

Your component looks great on desktop. Then someone opens it on their phone and it's a mess. This tool takes your components and adds proper responsive breakpoints. It handles the media queries, flexbox adjustments, and font scaling so your UI works on every screen size.

One command. Zero config. Just works.

Quick Start

npx ai-responsive src/components/Hero.tsx

What It Does

• Analyzes your component structure and adds responsive breakpoints
• Converts fixed layouts to flexible ones that adapt to screen size
• Adds mobile-first media queries or Tailwind responsive prefixes
• Handles typography scaling, spacing adjustments, and layout reflows
• Preserves your existing styles while adding responsive layers

Usage Examples

npx ai-responsive src/components/Hero.tsx
npx ai-responsive src/components/
npx ai-responsive "src/**/*.tsx"

Best Practices

• Design mobile first - Start with the smallest screen and add complexity for larger ones
• Test on real devices - Emulators miss things. Check on an actual phone.
• Don't hide content on mobile - Restructure it instead. Users on phones deserve the same info.

When to Use This

• Your desktop-only components need to work on mobile
• You're retrofitting responsive design onto an existing project
• A client reported the site looks broken on their phone

Part of the LXGIC Dev Toolkit

This is one of 110+ free developer tools built by LXGIC Studios. No paywalls, no sign-ups, no API keys on free tiers. Just tools that work.

Find more:

• GitHub: https://github.com/LXGIC-Studios
• Twitter: https://x.com/lxgicstudios
• Substack: https://lxgicstudios.substack.com
• Website: https://lxgic.dev

Requirements

No install needed. Just run with npx. Node.js 18+ recommended.

How It Works

Reads your component code, analyzes the layout structure, and generates responsive CSS or Tailwind classes. AI determines the optimal breakpoints and layout adjustments for each screen size.

License

MIT. Free forever. Use it however you want.