快速版
快速提示词
请使用 Webflow 启发的视觉风格生成页面：视觉更像专业产品而非模板，保持统一间距、清晰层级、克制高亮。适合放在前端 MVP 的主要界面结构。
创作者工具 / SaaS 仪表盘
Webflow 风格
Webflow 风格结合创作工具与模板展示，较高的视觉信息密度。
Hero 区客户案例轻量图标CTA 动作
原始 HTML 预览
直接使用 awesome-design-md 随 `DESIGN.md` 提供的 `preview.html`。
适合项目
- 可视化创作界面
- 画布工具
- 素材管理
- 项目预览页
- 团队协作产品
不适合项目
- 命令行风格界面
- 长表单工具页
复制入口
直接复制给 AI 工具；完整 DESIGN.md 从静态文件读取，不记录你的使用内容。
提示词预览
可复制提示词预览
复制前可以先核对三种提示词的语气和边界；完整规范仍保留在静态 DESIGN.md 中。
Cursor 版
Cursor 提示词
Cursor 提示词（受 Webflow 启发）： 1. 将整体 UI 风格设置为 Webflow 风格。 2. 深色优先或浅色优先请保留原风格氛围，不要使用真实品牌标志。 3. 使用紧凑布局、清楚分区、低视觉噪音和明确的组件状态。 4. 先生成页面骨架，再补齐文案与交互。
Claude Code 版
Claude Code 提示词
Claude Code 提示词（非官方 Webflow 启发版）： 请基于 Webflow 风格创建前端页面。先输出文件结构，再给出关键组件的实现，使用语义化 class 与可复用设计令牌。请避免抄袭品牌专有资源。
同类风格
来源与许可
来源参考 awesome-design-md (MIT)。awesome-design-md (MIT)。非官方体系，仅供启发。
本页提供的完整规范可从 /design-md/webflow/DESIGN.md 复制下载。