企业官网建设流程全解析

在 H5 营销活动中引入 Stable Diffusion 动态生成 AI辅助前端脚手架工具设计 的落地实践

前言

我是大山哥。

上周帮客户做一个 H5 营销活动时，设计师小美愁眉苦脸地说："大山哥，这次活动要做 50 张不同风格的海报，我一个人根本来不及！"

我笑了笑："别急，咱们用 AI 来搞定！"

结果呢？我们用 Stable Diffusion 自动生成了上百张海报素材，前端脚手架自动搭建，整个活动页面一天就搞定了！

兄弟，现在做 H5 营销活动，不会用 AI 生成内容就落伍了！

今天，我就来分享如何在 H5 营销活动中引入 Stable Diffusion，实现 AI 辅助前端脚手架工具设计的落地实践。

一、技术架构设计

1.1 系统架构图

graph TD A[用户请求] --> B[前端脚手架] B --> C[AI 内容生成服务] C --> D[Stable Diffusion API] D --> E[图片生成] E --> F[图片优化] F --> G[CDN 存储] G --> B C --> H[文案生成] H --> B B --> I[页面渲染]

1.2 模块职责

二、Stable Diffusion 集成方案

2.1 API 服务封装

import axios from 'axios'; interface ImageGenerationParams { prompt: string; negativePrompt?: string; width?: number; height?: number; steps?: number; seed?: number; model?: string; } interface GenerationResult { success: boolean; imageUrl?: string; error?: string; seed?: number; } class StableDiffusionService { private baseUrl: string; private apiKey: string; constructor(baseUrl: string, apiKey: string) { this.baseUrl = baseUrl; this.apiKey = apiKey; } async generateImage(params: ImageGenerationParams): Promise<GenerationResult> { try { const response = await axios.post( `${this.baseUrl}/sdapi/v1/txt2img`, { prompt: params.prompt, negative_prompt: params.negativePrompt || 'blurry, low quality, text, watermark', width: params.width || 1024, height: params.height || 1024, steps: params.steps || 20, seed: params.seed || -1, cfg_scale: 7, sampler_name: 'Euler a', model: params.model || 'v1-5-pruned-emaonly.safetensors', }, { headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${this.apiKey}`, }, responseType: 'json', } ); if (response.data.images && response.data.images.length > 0) { const base64Image = response.data.images[0]; const imageBuffer = Buffer.from(base64Image, 'base64'); // 上传到 CDN const cdnUrl = await this.uploadToCDN(imageBuffer); return { success: true, imageUrl: cdnUrl, seed: response.data.seed, }; } return { success: false, error: 'No image generated' }; } catch (error) { return { success: false, error: error instanceof Error ? error.message : 'Unknown error', }; } } private async uploadToCDN(buffer: Buffer): Promise<string> { // 简化的 CDN 上传逻辑 const filename = `generated/${Date.now()}-${Math.random().toString(36).substr(2, 9)}.png`; // 实际项目中调用阿里云 OSS / AWS S3 等 return `https://cdn.example.com/${filename}`; } }

2.2 提示词工程

// 营销海报提示词模板 const posterPromptTemplates = { spring: (productName: string) => `beautiful spring themed promotional poster for ${productName}, vibrant flowers, soft pastel colors, elegant design, professional marketing material, high resolution, commercial photography style`, summer: (productName: string) => `summer sale promotional poster for ${productName}, sunny beach background, bright vibrant colors, tropical elements, refreshing design, professional marketing material, commercial style`, autumn: (productName: string) => `autumn harvest themed promotional poster for ${productName}, warm orange and red tones, falling leaves, cozy atmosphere, professional marketing material, high quality`, winter: (productName: string) => `winter holiday promotional poster for ${productName}, snowflakes, festive decorations, elegant gold and silver accents, professional marketing material, premium design`, tech: (productName: string) => `modern tech product promotional poster for ${productName}, futuristic design, dark background, glowing effects, digital elements, professional marketing material, sleek minimalist style`, }; // 生成个性化提示词 function generatePrompt(theme: string, productName: string, style?: string): string { const basePrompt = posterPromptTemplates[theme as keyof typeof posterPromptTemplates]?.(productName) || ''; const styleModifiers: Record<string, string> = { minimalist: ', minimalist, clean design, white space', luxury: ', luxury premium design, gold accents, high end', playful: ', playful cartoon style, fun colorful design', professional: ', corporate professional style, elegant typography', }; return `${basePrompt}${style ? styleModifiers[style] || '' : ''}`; }

三、前端脚手架实现

3.1 脚手架核心代码

import fs from 'fs'; import path from 'path'; interface ScaffoldOptions { projectName: string; theme: string; template: 'simple' | 'carousel' | 'interactive'; aiImages: string[]; } class H5ScaffoldGenerator { private templatesPath: string; constructor() { this.templatesPath = path.join(__dirname, 'templates'); } async generate(options: ScaffoldOptions): Promise<string> { const projectPath = path.join(process.cwd(), options.projectName); // 创建项目目录 await fs.promises.mkdir(projectPath, { recursive: true }); // 生成 package.json await this.generatePackageJson(projectPath, options); // 生成入口文件 await this.generateEntryFile(projectPath, options); // 生成组件 await this.generateComponents(projectPath, options); // 生成样式 await this.generateStyles(projectPath, options); return projectPath; } private async generatePackageJson(projectPath: string, options: ScaffoldOptions): Promise<void> { const packageJson = { name: options.projectName, version: '1.0.0', type: 'module', scripts: { dev: 'vite', build: 'vite build', preview: 'vite preview', }, dependencies: { react: '^18.2.0', 'react-dom': '^18.2.0', }, devDependencies: { '[用户名]/react': '^18.2.0', '[用户名]/react-dom': '^18.2.0', '@vitejs/plugin-react': '^4.2.0', vite: '^5.0.0', tailwindcss: '^3.4.0', postcss: '^8.4.0', autoprefixer: '^10.4.0', }, }; await fs.promises.writeFile( path.join(projectPath, 'package.json'), JSON.stringify(packageJson, null, 2) ); } private async generateEntryFile(projectPath: string, options: ScaffoldOptions): Promise<void> { const mainContent = `import { StrictMode } from 'react' import { createRoot } from 'react-dom/client' import './index.css' import App from './App.jsx' createRoot(document.getElementById('root')).render( <StrictMode> <App /> </StrictMode>, ) `; await fs.promises.writeFile(path.join(projectPath, 'src/main.tsx'), mainContent); } private async generateComponents(projectPath: string, options: ScaffoldOptions): Promise<void> { const appContent = this.generateAppContent(options); await fs.promises.writeFile(path.join(projectPath, 'src/App.tsx'), appContent); } private generateAppContent(options: ScaffoldOptions): string { const themeColors = { spring: { primary: '#FF6B9D', secondary: '#4ECDC4', bg: '#FFF5F7' }, summer: { primary: '#FF6B35', secondary: '#00D4AA', bg: '#FFF8F0' }, autumn: { primary: '#D4A373', secondary: '#8B4513', bg: '#FFF8F0' }, winter: { primary: '#4A90D9', secondary: '#E8E8E8', bg: '#F8FAFC' }, tech: { primary: '#6366F1', secondary: '#A855F7', bg: '#0F172A' }, }; const colors = themeColors[options.theme as keyof typeof themeColors] || themeColors.spring; return `import { useState } from 'react' const images = ${JSON.stringify(options.aiImages)}; function App() { const [currentIndex, setCurrentIndex] = useState(0); const nextSlide = () => { setCurrentIndex((prev) => (prev + 1) % images.length); }; const prevSlide = () => { setCurrentIndex((prev) => (prev - 1 + images.length) % images.length); }; return ( <div style={{ minHeight: '100vh', backgroundColor: '${colors.bg}' }} className="h-screen overflow-hidden"> <div className="relative w-full h-full"> <div className="absolute inset-0 flex items-center justify-center"> <img src={images[currentIndex]} alt="Promotional banner" className="max-w-full max-h-full object-contain transition-opacity duration-500" /> </div> <button onClick={prevSlide} style={{ backgroundColor: '${colors.primary}' }} className="absolute left-4 top-1/2 -translate-y-1/2 w-12 h-12 rounded-full flex items-center justify-center text-white shadow-lg hover:opacity-80 transition-opacity" > <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" /> </svg> </button> <button onClick={nextSlide} style={{ backgroundColor: '${colors.primary}' }} className="absolute right-4 top-1/2 -translate-y-1/2 w-12 h-12 rounded-full flex items-center justify-center text-white shadow-lg hover:opacity-80 transition-opacity" > <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" /> </svg> </button> <div className="absolute bottom-6 left-1/2 -translate-x-1/2 flex gap-2"> {images.map((_, index) => ( <button key={index} onClick={() => setCurrentIndex(index)} style={{ backgroundColor: index === currentIndex ? '${colors.primary}' : 'rgba(255,255,255,0.5)' }} className="w-3 h-3 rounded-full transition-all hover:scale-110" /> ))} </div> </div> </div> ); } export default App; `; } private async generateStyles(projectPath: string, options: ScaffoldOptions): Promise<void> { const cssContent = `* { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } #root { width: 100%; min-height: 100vh; } `; await fs.promises.writeFile(path.join(projectPath, 'src/index.css'), cssContent); // 生成 Vite 配置 const viteConfig = `import { defineConfig } from 'vite' import react from '@vitejs/plugin-react' export default defineConfig({ plugins: [react()], }) `; await fs.promises.writeFile(path.join(projectPath, 'vite.config.js'), viteConfig); // 生成 Tailwind 配置 const tailwindConfig = `/** [用户名] {import('tailwindcss').Config} */ export default { content: [ "./index.html", "./src/**/*.{js,ts,jsx,tsx}", ], theme: { extend: {}, }, plugins: [], } `; await fs.promises.writeFile(path.join(projectPath, 'tailwind.config.js'), tailwindConfig); // 生成 PostCSS 配置 const postcssConfig = `export default { plugins: { tailwindcss: {}, autoprefixer: {}, }, } `; await fs.promises.writeFile(path.join(projectPath, 'postcss.config.js'), postcssConfig); // 生成 index.html const htmlContent = `<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8" /> <link rel="icon" type="image/svg+xml" href="/vite.svg" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>${options.projectName}</title> </head> <body> <div id="root"></div> <script type="module" src="/src/main.tsx"></script> </body> </html> `; await fs.promises.writeFile(path.join(projectPath, 'index.html'), htmlContent); } }

四、完整工作流

4.1 工作流程

flowchart TD A[开始] --> B[配置活动参数] B --> C{选择主题} C --> D[Spring] C --> E[Summer] C --> F[Autumn] C --> G[Winter] C --> H[Tech] D --> I[生成提示词] E --> I F --> I G --> I H --> I I --> J[调用 Stable Diffusion] J --> K[生成图片] K --> L[上传 CDN] L --> M[生成脚手架] M --> N[安装依赖] N --> O[构建项目] O --> P[部署上线] P --> Q[结束]

4.2 CLI 工具实现

#!/usr/bin/env node import { Command } from 'commander'; import { StableDiffusionService } from './services/stableDiffusion'; import { H5ScaffoldGenerator } from './scaffold'; const program = new Command(); program .name('h5-ai-scaffold') .description('AI-powered H5 marketing campaign generator') .version('1.0.0'); program .command('generate') .description('Generate H5 campaign with AI images') .option('-n, --name <string>', 'Project name', 'h5-campaign') .option('-t, --theme <string>', 'Theme: spring/summer/autumn/winter/tech', 'spring') .option('-c, --count <number>', 'Number of images', 5) .option('--style <string>', 'Design style: minimalist/luxury/playful/professional') .action(async (options) => { console.log('🎨 Starting AI-powered H5 campaign generation...'); // 初始化服务 const sdService = new StableDiffusionService( process.env.SD_API_URL || 'http://localhost:7860', process.env.SD_API_KEY || '' ); const scaffoldGenerator = new H5ScaffoldGenerator(); // 生成图片 console.log('🖼️ Generating AI images...'); const aiImages: string[] = []; for (let i = 0; i < options.count; i++) { const prompt = generatePrompt(options.theme, 'Summer Sale', options.style); const result = await sdService.generateImage({ prompt, width: 1080, height: 1920, seed: Math.floor(Math.random() * 100000), }); if (result.success && result.imageUrl) { aiImages.push(result.imageUrl); console.log(`✅ Image ${i + 1} generated: ${result.imageUrl}`); } } // 生成脚手架 console.log('🏗️ Generating project scaffold...'); const projectPath = await scaffoldGenerator.generate({ projectName: options.name, theme: options.theme, template: 'carousel', aiImages, }); console.log(`🎉 Project generated at: ${projectPath}`); console.log('📝 Next steps:'); console.log(' cd', options.name); console.log(' npm install'); console.log(' npm run dev'); }); program.parse();

五、部署与优化

5.1 Docker 部署

FROM node:20-alpine WORKDIR /app COPY package*.json ./ RUN npm ci --only=production COPY . . EXPOSE 3000 CMD ["node", "server.js"]

5.2 性能优化策略

// 图片懒加载 function LazyImage({ src, alt }: { src: string; alt: string }) { const [isLoaded, setIsLoaded] = useState(false); const [isInView, setIsInView] = useState(false); useEffect(() => { const observer = new IntersectionObserver( ([entry]) => { if (entry.isIntersecting) { setIsInView(true); observer.disconnect(); } }, { threshold: 0.1 } ); const img = document.getElementById(`lazy-img-${src}`); if (img) observer.observe(img); return () => observer.disconnect(); }, [src]); return ( <div id={`lazy-img-${src}`} className="relative overflow-hidden"> {!isLoaded && ( <div className="absolute inset-0 bg-gray-200 animate-pulse" /> )} {isInView && ( <img src={src} alt={alt} onLoad={() => setIsLoaded(true)} className={`w-full h-full object-cover transition-opacity duration-500 ${ isLoaded ? 'opacity-100' : 'opacity-0' }`} /> )} </div> ); }

六、避坑指南

1. 💡API 限流：Stable Diffusion API 调用有限制，需要做好重试和限流
2. ⚠️图片版权：确保生成的图片用于合法用途
3. ❌质量控制：不是所有生成的图片都合格，需要人工筛选
4. ⚡缓存策略：相同提示词的图片可以缓存，避免重复生成
5. 📝提示词优化：多尝试不同的提示词组合，找到最佳效果

七、总结

AI 生成内容正在彻底改变 H5 营销活动的开发方式。通过集成 Stable Diffusion，我们可以快速生成大量高质量的视觉素材，配合自动化的前端脚手架，大大缩短了开发周期。

记住：AI 不是替代设计师，而是让设计师更高效！