responsive-craft
为Claude Code实现响应式设计，含审计、构建、预览三种模式
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：responsive-craft。 它的用途是：为Claude Code实现响应式设计，含审计、构建、预览三种模式 完整的 Skill 内容见：https://321skill.com/skills/responsive-craft/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
'帮我审计这个项目的响应式实现'，它会启动audit模式，扫描代码并列出问题，遇到侧边栏有多种适配方案时弹出设计分支让你选择，然后按优先级修复。
对AI说：'用build模式为一个三栏仪表盘设计响应式布局'，它会先引导你描述每个组件在不同断点的行为，再生成基于容器查询的CSS代码。
介绍
在无视觉画布（如Figma）的代码优先环境中，响应式设计容易变成“写代码→预览→调整尺寸→修复”的被动循环。responsive-craft 通过前置设计决策来解决这一问题：在写CSS之前先描述响应式行为，采用从原生CSS到容器查询再到媒体查询的逐级升级模型，并在遇到多种合理方案时主动呈现设计分支供你选择。
使用方式分为三种模式：audit（审计现有代码的响应式问题并按优先级修复）、build（从零开始构建响应式布局，先定义行为规范再写代码）、preview（在浏览器中同时打开375px、768px、1024px、1440px四个视口的交互式预览，每个视口可独立滚动点击）。两种交互级别（Adaptive快速发现 vs Guided正式规范）适应不同工作节奏。
适合前端开发者、UI设计师和全栈工程师，特别是那些需要在不依赖设计工具的情况下快速产出高质量响应式代码的团队。也适合在Claude Code中编写复杂布局（如数据表格、多面板仪表盘、粘性元素协调等）时缺乏视觉反馈的场景。
建议在开始新页面或重构现有响应式代码时优先使用build模式先定义行为规范，再结合preview实时验证。对于已有项目，audit模式会按优先级梳理问题，但需注意其依赖Claude Code环境，且无法处理像素级视觉设计稿对比。
核心特点
通过“设计分支（Design Forks）”机制，在响应式翻译出现多种合理方案（如侧边栏可变为抽屉/标签/手风琴）时主动呈现选项并让用户决策，而非静默选择一种，从而避免后期返工。
注意事项
不适用于需要像素级视觉设计稿对比的场景，且依赖Claude Code运行环境，无法独立于该工具使用。
常见问题
这个skill能自动生成完整的响应式CSS代码吗？
可以。在build模式下，你描述行为规范后，它会生成对应的CSS代码，并优先使用原生CSS（如auto-fit、flex-wrap、clamp()），其次容器查询，最后媒体查询。
preview模式支持本地开发服务器吗？
支持。preview模式会启动一个HTTP服务器，打开内置四个断点（375/768/1024/1440px）的交互式iframe页面，指向你的本地dev server，并可独立滚动和点击。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/responsive-craft/raw/index.md 读取 responsive-craft 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/responsive-craft/raw/index.md（查看排版版本）