Webflow New Project Setup Prompt
Context
Use this prompt when starting a new Webflow project for Pacing Agency clients. Ensures proper CMS structure, style system, SEO setup, and launch preparation following our established patterns.
Prerequisites
- Webflow account access
- Client requirements documented
- Brand assets (logo, colours, fonts)
- Content outline or sitemap
- Domain ready for setup
See Webflow Tool Documentation for existing projects and CMS patterns.
Prompt Template
I need to set up a new Webflow project for a client with the following requirements:
**Project Information:**
- Client name: [CLIENT_NAME]
- Project type: [PROJECT_TYPE] (Marketing site/Blog/E-commerce/Portfolio)
- Domain: [DOMAIN]
- Hosting: [HOSTING] (Webflow/External)
- Timeline: [TIMELINE]
**CMS Requirements:**
- Collections needed: [COLLECTIONS] (Blog posts/Case studies/Team/Services)
- Collection relationships: [RELATIONSHIPS]
- Content volume: [VOLUME]
**Design Requirements:**
- Brand colours: [COLOURS]
- Typography: [FONTS]
- Style guide: [STYLE_GUIDE_URL]
- Responsive breakpoints: [BREAKPOINTS]
**Technical Requirements:**
- SEO optimization: [SEO_REQUIREMENTS]
- Forms: [FORM_REQUIREMENTS]
- Integrations: [INTEGRATIONS] (GTM/Zapier/Webhooks)
- Accessibility: [A11Y_REQUIREMENTS]
Please provide:
1. **CMS structure** with collections and fields
2. **Style system** setup with naming conventions
3. **Page templates** for key page types
4. **SEO configuration** checklist
5. **Launch checklist** with testing steps
6. **Documentation** for client handoff
Follow Pacing Agency patterns from existing Webflow projects.
Variables to Customize
| Variable | Description | Example |
|---|---|---|
[CLIENT_NAME] | Client or project name | "SaaS Company", "Agency Portfolio" |
[PROJECT_TYPE] | Type of website | "Marketing site", "Blog with CMS", "E-commerce" |
[DOMAIN] | Primary domain | "client-site.com" |
[HOSTING] | Where site is hosted | "Webflow hosting", "Cloudflare Pages" |
[TIMELINE] | Project timeline | "4 weeks", "2 months" |
[COLLECTIONS] | CMS collections needed | "Blog Posts, Case Studies, Team Members, Services" |
[RELATIONSHIPS] | Collection relationships | "Blog posts → Authors, Case studies → Services" |
[VOLUME] | Expected content volume | "50 blog posts", "10 case studies", "20 team members" |
[COLOURS] | Brand colours | "Primary: #3b82f6, Secondary: #10b981" |
[FONTS] | Typography | "Inter for headings, Source Sans Pro for body" |
[STYLE_GUIDE_URL] | Design reference | "Figma link", "Brand guidelines PDF" |
[BREAKPOINTS] | Responsive breakpoints | "Desktop: 1280px, Tablet: 768px, Mobile: 320px" |
[SEO_REQUIREMENTS] | SEO needs | "Meta descriptions, Open Graph, structured data" |
[FORM_REQUIREMENTS] | Forms needed | "Contact form, Newsletter signup, Demo request" |
[INTEGRATIONS] | Third-party integrations | "GTM, Zapier, Mailchimp, HubSpot" |
[A11Y_REQUIREMENTS] | Accessibility needs | "WCAG 2.1 AA compliance" |
Expected Output
CMS Structure (Example)
Collections:
1. Blog Posts
- Title (Text, required)
- Slug (Text, auto-generate, required)
- Author (Reference → Team Members)
- Published Date (Date, required)
- Featured Image (Image, required)
- Excerpt (Plain text, 160 chars)
- Content (Rich text, required)
- Categories (Multi-reference → Categories)
- SEO Title (Text)
- SEO Description (Text, 160 chars)
- Open Graph Image (Image)
2. Case Studies
- Title (Text, required)
- Slug (Text, auto-generate, required)
- Client Name (Text, required)
- Industry (Option: SaaS/E-commerce/Agency)
- Project Date (Date)
- Featured Image (Image, required)
- Challenge (Rich text)
- Solution (Rich text)
- Results (Rich text)
- Services Used (Multi-reference → Services)
- Testimonial (Rich text)
- Testimonial Author (Text)
3. Team Members
- Name (Text, required)
- Slug (Text, auto-generate, required)
- Role (Text, required)
- Bio (Rich text)
- Photo (Image, required)
- Email (Email)
- LinkedIn (Link)
- Order (Number)
4. Services
- Service Name (Text, required)
- Slug (Text, auto-generate, required)
- Description (Rich text)
- Icon (Image)
- Featured (Switch)
Relationships:
- Blog Posts → Team Members (Author)
- Blog Posts → Categories (Multi-reference)
- Case Studies → Services (Multi-reference)
Style System Setup
Global Styles:
Typography:
- h-1: 3rem (48px), bold, line-height 1.2
- h-2: 2.25rem (36px), bold, line-height 1.3
- h-3: 1.875rem (30px), semibold, line-height 1.4
- body: 1rem (16px), regular, line-height 1.6
- small: 0.875rem (14px), regular, line-height 1.5
Colours:
- primary: #3b82f6
- primary-dark: #2563eb
- primary-light: #93c5fd
- secondary: #10b981
- text: #1f2937
- text-light: #6b7280
- background: #ffffff
- border: #e5e7eb
Spacing:
- xs: 0.5rem (8px)
- sm: 1rem (16px)
- md: 1.5rem (24px)
- lg: 2rem (32px)
- xl: 3rem (48px)
- 2xl: 4rem (64px)
Naming Conventions:
- Components: .component-name
- Utilities: .u-utility-name
- States: .is-state, .has-state
- Responsive: .breakpoint-property
Page Templates
1. Homepage
- Hero section
- Services overview
- Featured case studies
- Testimonials
- CTA section
2. About Page
- Company story
- Team members (CMS collection)
- Values/Culture
- CTA
3. Services Page
- Services list (CMS collection)
- Service detail pages
- CTA
4. Blog
- Blog list (CMS collection list)
- Blog post (CMS template)
- Categories filter
- Related posts
5. Case Studies
- Case study list (CMS collection list)
- Case study detail (CMS template)
- Filter by service/industry
6. Contact
- Contact form
- Company info
- Map (optional)
Launch Checklist
## Pre-Launch Checklist
### Design & Content
- [ ] All pages designed and responsive
- [ ] All images optimized (WebP format)
- [ ] All content proofread
- [ ] Alt text added to all images
- [ ] Favicon and app icons set
- [ ] 404 page designed
### SEO
- [ ] Page titles set (under 60 chars)
- [ ] Meta descriptions set (under 160 chars)
- [ ] Open Graph images set
- [ ] Structured data added
- [ ] XML sitemap generated
- [ ] robots.txt configured
### Technical
- [ ] Forms tested and working
- [ ] GTM container integrated
- [ ] Domain connected and SSL active
- [ ] 301 redirects set up (if migrating)
- [ ] Analytics/tracking verified
- [ ] Performance tested (Lighthouse)
### Testing
- [ ] Cross-browser tested (Chrome, Firefox, Safari)
- [ ] Mobile responsive tested
- [ ] Forms submit correctly
- [ ] Links all working (internal & external)
- [ ] CMS content displays correctly
- [ ] Load time under 3 seconds
### Client Handoff
- [ ] CMS training provided
- [ ] Editor access granted
- [ ] Documentation delivered
- [ ] Support process explained
- [ ] Backup plan documented
Related Documentation
Success Criteria
✅ CMS structure matches requirements
✅ Style system is consistent
✅ All pages responsive
✅ SEO configured correctly
✅ Forms working
✅ Performance optimized
✅ Client trained
✅ Documentation complete
Last updated: 2026-01-07
Estimated time: 2-3 hours (setup) + content time