什么是 Webflow？

Openclaw Skills 的 Webflow 扩展旨在简化从初始设计源集成到最终站点优化的整个 Web 开发生命周期。它为开发者、机构和创始人提供了一个结构化框架，以构建符合语义化类名命名和严格断点测试等行业最佳实践的可扩展站点。通过在 Openclaw Skills 中使用此技能，用户可以确保其项目在 SEO、无障碍访问和性能方面保持高技术标准。

此技能超越了基础设计，专注于复杂 CMS 结构和无头 API 集成所需的技术逻辑。它强制执行严谨的项目管理方法，确保在站点上线前准确计算托管成本并彻底测试表单。

下载入口:https://github.com/openclaw/skills/tree/main/skills/ivangdavila/webflow

安装与下载

1. ClawHub CLI

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

2. 手动安装

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

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

3. 提示词安装

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

Webflow 应用场景

• 为内容密集型站点构建复杂的 CMS 集合和数据关系。
• 在从桌面到移动设备的所有设备断点上实施响应式设计策略。
• 通过强制执行语义化类名和 BEM 方法论来管理专业交付。
• 执行全面的上线前审核，以确保 SEO、SSL 和无障碍合规性。
• 将第三方分析、表单和无头 API 连接集成到 Webflow 生态系统中。

1. 通过为 Webflow 项目配置和首选项创建专用目录来初始化本地环境。
2. 配置内存存储文件以定义您的特定开发者个人资料、设计源和命名规范。
3. 在内容迁移之前构建 CMS 集合和字段，以防止结构化数据债务。
4. 设计并开发界面，同时手动调整断点以确保所有设备上的响应式完整性。
5. 使用优化清单运行技术审核，以验证替代文本、OG 图像和表单传送。
6. 准备站点发布或代码导出，包括在移出平台时清理冗余的 HTML/CSS。

Webflow 配置指南

要为 Openclaw Skills 激活此技能，您必须首先设置本地内存目录以存储首选项：

mkdir -p ~/webflow
touch ~/webflow/memory.md

确保您的 memory.md 文件包含您的角色（例如：自由职业者、机构）和首选的类命名规范（例如：BEM、语义化），以便根据您的工作流定制技能输出。

Webflow 数据架构与分类体系

Openclaw Skills 的 Webflow 技能通过结构化文件系统组织技术知识和项目数据：

name: Webflow
slug: webflow
version: 1.0.0
description: Build, launch, and optimize Webflow sites with responsive design, CMS architecture, and clean handoffs.
metadata: {"clawdbot":{"emoji":"??","requires":{"bins":[]},"os":["linux","darwin","win32"]}}

Quick Reference

Memory Storage

User preferences stored at ~/webflow/memory.md. Read on activation.

Format:

# Webflow Memory

## Profile
- role: freelancer | agency | founder | developer | marketer
- design-source: figma | sketch | from-scratch | template
- cms-needs: none | blog | multi-collection | headless

## Preferences
- class-naming: bem | utility | semantic
- breakpoints: mobile-first | desktop-first

Create folder on first use: mkdir -p ~/webflow

Critical Rules

1. Always check all breakpoints — Desktop looks great, mobile is broken. Test tablet/mobile-landscape/mobile-portrait BEFORE showing to client.

2. Name classes semantically — hero-heading not heading-23. You'll thank yourself during handoff.

3. Set up CMS before content — Define collections, fields, and relationships first. Migrating content between structures is painful.

4. Calculate TRUE hosting cost — Basic Hosting ≠ CMS Hosting ≠ Business Hosting. Forms, CMS items, staging all cost extra.

5. Test forms with real submissions — Webflow form notifications fail silently. Verify delivery before launch.

6. Never trust auto-generated responsive — Webflow guesses wrong. Manual breakpoint adjustment is mandatory.

7. Audit before publish — Missing alt text, 404s, broken links, favicon, OG image, SSL, redirects. Use pre-launch checklist every time.

8. Export code = cleanup required — Webflow's exported HTML/CSS is bloated. Budget time for cleanup if moving off platform.

Scope

This skill covers Webflow design, development, and project management. For general web design principles, see ui-design. For landing page conversion strategy, see landing-pages.