Quick Reference
| Topic | File |
|---|
| Responsive design, breakpoints | INLINECODE0 |
| CMS collections, headless API |
cms.md |
| Forms, analytics, third-party |
integrations.md |
| SEO, performance, accessibility |
optimization.md |
Memory Storage
User preferences stored at ~/webflow/memory.md. Read on activation.
Format:
CODEBLOCK0
Create folder on first use: INLINECODE5
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.
快速参考
| 主题 | 文件 |
|---|
| 响应式设计、断点 | design.md |
| CMS集合、无头API |
cms.md |
| 表单、分析、第三方集成 | integrations.md |
| SEO、性能、可访问性 | optimization.md |
记忆存储
用户偏好存储于 ~/webflow/memory.md。激活时读取。
格式：
markdown
Webflow 记忆
个人资料
- - 角色：自由职业者 | 代理机构 | 创始人 | 开发者 | 营销人员
- 设计来源：Figma | Sketch | 从零开始 | 模板
- CMS需求：无 | 博客 | 多集合 | 无头
偏好设置
- - 类命名：BEM | 实用工具 | 语义化
- 断点：移动优先 | 桌面优先
首次使用时创建文件夹：mkdir -p ~/webflow
关键规则
- 1. 始终检查所有断点 — 桌面端看起来完美，移动端却崩溃。在向客户展示前，务必测试平板/手机横屏/手机竖屏。
- 2. 语义化命名类 — 使用 hero-heading 而非 heading-23。交接时你会感谢自己。
- 3. 在内容之前设置CMS — 先定义集合、字段和关系。在不同结构间迁移内容非常痛苦。
- 4. 计算真实的托管成本 — 基础托管 ≠ CMS托管 ≠ 企业托管。表单、CMS项目、暂存环境均需额外付费。
- 5. 通过真实提交测试表单 — Webflow表单通知会静默失败。上线前务必验证投递。
- 6. 切勿信任自动生成的响应式 — Webflow的猜测往往是错的。必须手动调整断点。
- 7. 发布前进行审计 — 检查缺失的替代文本、404页面、损坏链接、网站图标、OG图片、SSL证书、重定向。每次都要使用上线前检查清单。
- 8. 导出代码需要清理 — Webflow导出的HTML/CSS臃肿不堪。如果计划离开该平台，请预留清理时间。
范围
本技能涵盖Webflow的设计、开发和项目管理。通用网页设计原则请参见 ui-design。着陆页转化策略请参见 landing-pages。
