Create a Promotional Website

Build professional promotional websites in 30-60 minutes. No coding required, no expensive agencies, no weeks of development.

Quick Navigation

• Overview - Problem, solution, and what you'll achieve
• Step-by-Step Setup — How to set up
• Instruction Examples — Copy-paste prompts for 3 website types
• Review & Refine — Verify and correct output
• How to Improve Results — Tips and best practices
• Troubleshooting — Common issues and solutions

Overview

Problem It Solves

Creating promotional websites is challenging:

• Expensive development — Often requires hiring external agencies
• Slow turnaround — Can take weeks or even months to launch
• Technical barriers — Requires coding skills or developer support
• Multiple revisions — Changes add time and coordination overhead
• Hard to iterate — Difficult to quickly test and update content

Why This Is Different with FabriXWork

Traditional Web Development:

Brief → Design → Revisions → Development → Testing → Launch
                    ↑                                    │
                    └──────── Need changes? $$$$ ────────┘

With FabriXWork:

Your content → Agent → "Build website" → Done
   ↑              │
   └── Update copy, regenerate ──┘

What You Will Achieve

✅ Create a professional promotional landing page in 30-60 minutes
✅ No coding required — describe your vision in natural language
✅ Fully responsive design (desktop, tablet, mobile)
✅ Modern styling using Bootstrap 5 (or your preferred framework) ✅ Easy to update or customize later

Time to complete: 30-60 minutes (vs. 2-8 weeks with agency)

Output: Professional HTML website with Bootstrap CSS (single file, works in any browser)

Complexity Level: 🟡 Intermediate

Website Types Demonstrated in This Guide

Step-by-Step Setup

Step 1: Prepare Your Content

Before starting, gather:

• Brand assets: Logo, brand colors (if available)
• Marketing copy: Headlines, value propositions, key benefits
• Product/service info: Features, pricing, differentiators
• Call-to-action: What should visitors do? (sign up, register, buy)
• Images: Product screenshots, team photos (optional)
• Social proof: Testimonials, customer logos (optional)

Step 2: Choose Your Agent

You can use any AI agent in FabriXWork to build websites.

• If you already have an agent: Use the agent you're currently working with
• If you need a new agent: For website building, Dilbert - Software Developer is recommended
• If you haven't added any agent yet: Follow the Add Your First Agent guide first

Step 3: Connect Your Folder

If you are adding a new agent:

Follow Connect to Local Folder to connect your agent to a local folder.

If you want to connect a different folder:

1. Select your agent from the sidebar
2. In the right panel, click "Change" to connect a folder
3. Add your files into that folder

Step 4: Give Your Instruction

To build your promotional website, use one of the instruction examples in the next section as your starting point. Choose the example that best matches your website type, then replace the sample details with your own.

Instruction Examples

Example 1: Product Launch Landing Page

Background: You're launching a new product and need a landing page to collect early signups and build anticipation.

Your Prompt:

💡 Pro Tip: Use Plan Mode first to review the proposed structure before building.

Based on the files in my connected folder, Build a product launch landing page for [PRODUCT NAME].

Required Sections:
1. Hero — Headline, subheadline, email signup, hero image
2. Problem/Solution — Pain points and how we solve them
3. Features — 3-6 key features with icons
4. Social Proof — Testimonials or beta quotes
5. Pricing — Early bird pricing or tiers
6. FAQ — 5-7 common questions
7. Final CTA — Urgency + signup

Technical:
- Single HTML file with Bootstrap 5 CSS
- Responsive design (mobile-first)
- Modern, clean aesthetic
- Form ready for integration

Style:
- Colors: [Your brand colors or "professional blue/purple"]
- Include smooth animations

Save to: [your-folder]/index.html

Expected Output:

Professional landing page with hero, features, social proof, pricing, FAQ, and email signup. Fully responsive with Bootstrap.

Example 2: Event Promotion Page

Background: You're organizing an event and need a registration page that showcases speakers, agenda, and drives ticket sales.

Your Prompt:

💡 Pro Tip: Use Plan Mode first to review the proposed structure before building.

Based on the files in my connected folder, build an event registration page for [EVENT NAME].

Required Sections:
1. Hero — Event name, date, location, register CTA, countdown
2. About — What attendees will learn
3. Speakers — Speaker cards with photos
4. Agenda — Day-by-day schedule
5. Pricing — Ticket tiers (Early Bird, Regular, VIP)
6. Sponsors — Sponsor logos by tier
7. Venue — Location, map, hotels
8. FAQ — Common questions
9. Registration — Attendee form

Technical:
- Single HTML file with Bootstrap 5 CSS
- Countdown timer to event
- Registration form ready
- Mobile responsive

Style:
- Colors: [Your brand colors or "energetic and professional"]
- Clear schedule layout

Save to: [your-folder]/index.html

Expected Output:

Event page with speaker lineup, agenda, pricing, venue info, registration form, and countdown timer.

Example 3: SaaS Homepage

Background: You're launching a B2B SaaS platform and need a homepage that converts visitors to free trial signups.

Your Prompt:

💡 Pro Tip: Use Plan Mode first to review the proposed structure before building.

Based on the files in my connected folder, build a SaaS homepage for [PRODUCT NAME].

Required Sections:
1. Nav — Logo, menu, Login + Trial buttons
2. Hero — Value prop, subhead, primary + secondary CTA, hero image
3. Social Proof — "Trusted by" with customer logos
4. Problem/Solution — Pain points and solution
5. Features — 6-9 features in grid
6. How It Works — 3-4 step process
7. Testimonials — Customer quotes with photos
8. Pricing — 3 tiers with features
9. FAQ — Common questions
10. Final CTA — Risk reversal (no credit card)
11. Footer — Links, legal, social

Technical:
- Single HTML file with Bootstrap 5 CSS
- Smooth scroll navigation
- Pricing toggle (monthly/annual)
- Mobile responsive

Style:
- Colors: [Professional SaaS blue/purple]
- Clean, modern aesthetic
- Clear visual hierarchy

Save to: [your-folder]/index.html

Expected Output:

Professional SaaS homepage with nav, hero, features, social proof, pricing, testimonials, FAQ, and footer. Optimized for trial signups.

Review & Refine

What to Check

After your agent generates the website, review for:

• Design accuracy — Colors, fonts, spacing match your brand
• Content accuracy — All text, pricing, and details are correct
• Functionality — All buttons, links, and forms work
• Responsive design — Looks good on desktop, tablet, and mobile
• Performance — Images optimized, loads quickly

How to Request Corrections

If you notice any issues, continue the conversation with your agent and include a screenshot of the current output.

For design issues:

"The [color/font/spacing] doesn't match our brand. Please use [specific details] instead."

For content errors:

"The [pricing/feature/testimonial] text is incorrect. Please update to: [correct text]."

For functionality issues:

"The [button/form/link] doesn't work on [mobile/desktop]. Please fix."

For layout refinements:

"The [section name] feels too [crowded/spacious]. Please adjust spacing."

Best Practices

✅ Do: Test on multiple devices, verify all links, check loading speed

❌ Don't: Publish without testing, assume everything is correct, skip mobile testing

How to Improve Results

Tip 1: Provide Brand Guidelines

✅ Good: Logo files, color hex codes (#41b4a5), font names

❌ Vague: "Make it look professional"

Tip 2: Be Specific About Goals

✅ Good: "Primary goal: collect email signups. Target conversion: 5%+"

❌ Vague: "Make it convert well"

Tip 3: Provide Quality Content

✅ Good: Well-written copy, high-res images, real testimonials

❌ Vague: Placeholder text, low-res images

Tip 4: Reference Websites You Like

✅ Good: "We like the clean design of [website.com]"

❌ Vague: "Make it look modern"

Tip 5: Specify Technical Requirements

✅ Good: "Integrate with Mailchimp, add Google Analytics"

❌ Vague: "Make it work with our tools"

Tip 6: Iterate in Stages

✅ Good: "First finalize hero, then features, then pricing..."

❌ Vague: "Build everything at once"

Tip 7: Test Before Launch

After generating the HTML file:

1. Open in Chrome, Safari, Firefox, Edge
2. Test on desktop, tablet, and mobile
3. Click all buttons and links
4. Test form submissions
5. Check loading speed (target: < 3 seconds)

If you notice issues, describe them and ask the agent to refine.

Troubleshooting

General Issues

Website-Specific Issues

Related Use Cases

• Create Presentation Slides — Create pitch decks to complement your website
• Auto-Fill Forms — Populate lead capture forms with CRM data
• Customer Insight & Strategy — Analyze website analytics and user behavior