webflow-dev

Webflow 开发

将现有 Webflow 网站作为实现系统，并以提供的设计作为视觉事实来源。使用现有类、组件、素材、响应式模式和交互来匹配设计。

范围和访问权限

编辑前，确认具体的网站、页面、分支和源设计画板。保持在当前分支上工作，并且不发布，除非用户授权使用其他目标或进行发布。除非请求的更改涉及更广泛的影响，否则请保护共享组件和全局样式。

使用适用于 Figma 或 Paper 的原生集成。如果无法访问设计，请使用可用且获授权的导出文件，或说明缺少的依赖项。如果其他原生集成能提供必要的设计信息，则无需使用 Desktop MCP。

实现约束

添加新结构前，先检查目标区域和网站上可比较的部分。复用网站现有的排版、颜色、容器、间距、按钮和布局工具类。查看源设计的实际内容，了解文案、顺序、尺寸、素材、裁切和响应式意图。

只有在现有模式无法实现所需结构、交互或响应式调整时，才创建新类。使用语义化名称，并在重复元素间共享类。排版和颜色应使用现有工具类。每个新类都必须关联到有效元素，且用途合理。

复用匹配的网站素材。若缺少图稿，请以适当分辨率从设计中导出并导入一次。若有源 SVG 图稿，请予以保留，并匹配设计中的特定图标。提供实用的替代文本。

轮播、标签页、手风琴、表单和筛选器都必须可正常使用。优先使用现有原生组件，并将自定义代码限定在相关区域内。对于推荐语轮播，请参阅 interaction-checks.md。

工具和清理检查

检查部分成功消息和样式丢失警告。若工具结果存在不确定性，请核实已应用的全局类、存在歧义的组合类计算样式、自定义代码内容和受管理的图像引用。解决会影响请求结果的警告。

仅移除本任务创建且已被取代的元素、代码和样式。删除样式前，先确认没有有效元素在使用它。不要遗留废弃的重复区域、占位内容或本任务创建但未使用的类。

验收和交接

在网站配置的各个断点，将所有范围内的区域与源设计进行比较。验证文案、层级、间距、颜色、素材及其裁切、堆叠方式和交互，包括键盘访问。对于局部更改，请重点检查已更改区域及受影响的共享行为。

报告已完成的更改、新增类及其用途、执行过的验证、重大限制和发布状态。除非用户要求，否则无需提供逐区域进度记录或完整的复用工具类清单。