【新春创造营】春节祝福语生成器

iFlow CLI 实践探索
,
1

嘿嘿，比较简单

1
11919×909 66.4 KB

2
21915×907 77.3 KB

3
31916×905 74.3 KB

4
41919×908 87.9 KB

5
51919×909 89.4 KB

1 个赞
2

先生成的规范文件

提问
提问1154×684 27.6 KB

处理
处理966×642 24.8 KB

3

Project Specification: Spring Festival Blessing Generator

Type: Single Page Web Application

Framework: Vanilla HTML/CSS/JS + Tailwind CSS CDN

Deployment: Cloudflare Pages (Static)

1. Overview

开发一个春节祝福语生成器，采用4步流程式交互（Landing → 选对象 → 选主题 → 选风格 → 结果），生成后可复制分享。单HTML文件实现，零构建步骤，直接部署。

2. Design System

Color Palette

  • Primary: #DC2626 (中国红，用于背景渐变起始)
  • Secondary: #991B1B (深红，用于背景渐变结束)
  • Accent: #F59E0B (富贵金，用于按钮、边框、高亮)
  • Accent Light: #FCD34D (亮金，用于渐变文字)
  • Surface: rgba(255, 255, 255, 0.95) (卡片背景，半透明白)
  • Background Cream: #FFFBEB (米黄，选中状态背景)
  • Text Primary: #1F2937 (深灰，正文)
  • Text Secondary: #6B7280 (中灰，副标题)
  • Wood: #92400E (棕色，卷轴装饰条)

Typography

  • Font Family: ‘Noto Serif SC’, serif (Google Fonts)
  • Font Weights: 400 (Regular), 700 (Bold), 900 (Black)
  • Heading Sizes:
    • H1: text-5xl (3rem, 封面标题)
    • H2: text-3xl (1.875rem, 步骤标题)
    • Body: text-lg (1.125rem) / text-xl (1.25rem, 祝福文案)
    • Small: text-sm (0.875rem) / text-xs (0.75rem)

Layout Tokens

  • Max Width: max-w-2xl (42rem, 主容器)
  • Border Radius:
    • Cards: rounded-2xl (1rem)
    • Buttons: rounded-full (9999px)
  • Spacing:
    • Grid Gap: gap-4 (1rem)
    • Section Margin: mb-6 (1.5rem) / mb-8 (2rem)
    • Card Padding: p-6 (1.5rem) / p-8 (2rem, 卷轴内部)

Visual Effects

  1. Gold Gradient Text

    • CSS: background: linear-gradient(45deg, #F59E0B, #FCD34D, #F59E0B)
    • Background-size: 200% 200%
    • Animation: shine 3s ease-in-out infinite
    • Webkit-background-clip: text

  2. Scroll Component (卷轴)

    • Background: linear-gradient(to bottom, #FFFBEB, #FEF3C7)
    • Border: 4px solid #F59E0B
    • Pseudo-elements (before/after):
      • Position: absolute, width: 100%, height: 20px
      • Background: #92400E
      • Border-radius: 10px 10px 0 0 (top), 0 0 10px 10px (bottom)

  3. Background Animation

    • Canvas-based floating particles
    • 50 items (mix of coins and petals)
    • Color: rgba(255, 215, 0, 0.6)
    • Z-index: 1, pointer-events: none

3. Interaction Flow (State Machine)

Step 0: Landing Page

  • Layout: Flex column, items-center, text-center, justify-center
  • Elements:
    • Icon: text-6xl, emoji :red_envelope:
    • Title: text-5xl, gold-text class, line break after “祝福语”
    • Subtitle: text-yellow-200, text-lg
    • CTA Button: btn-primary class (gold gradient), text-xl, px-12 py-4
    • Stats: Live counter (span#count), text-red-200, text-sm, default 8,888
  • Transition: Click CTA → Step 1 (fadeIn animation)

Step 1: Select Target (祝福对象)

  • Layout: Grid 2x2 (grid-cols-2 gap-4)
  • Options (4 cards):
    • 长辈父母: Icon :old_man:, Label “长辈父母”, Sub “尊敬温馨”
    • 朋友闺蜜: Icon :woman_and_man_holding_hands:, Label “朋友闺蜜”, Sub “轻松活泼”
    • 恋人伴侣: Icon :couple_with_heart:, Label “恋人伴侣”, Sub “甜蜜浪漫”
    • 同事领导: Icon :briefcase:, Label “同事领导”, Sub “得体大方”
  • Card Structure: option-card class, rounded-2xl, p-6, cursor-pointer, text-center
  • Interaction:
    • Hover: translateY(-5px) scale(1.02), border-color → gold, shadow expand
    • Click: Add selected class (border-gold, bg-cream, gold shadow), save to state.target
    • Auto-advance: setTimeout 300ms → Step 2

Step 2: Select Theme (祝福主题)

  • Layout: Grid 2x2
  • Options:
    • 健康长寿: Icon :hospital:, Label “健康长寿”
    • 财源滚滚: Icon :money_bag:, Label “财源滚滚”
    • 事业腾飞: Icon :rocket:, Label “事业腾飞”
    • 万事如意: Icon :sparkles:, Label “万事如意”
  • Navigation: Back button (text-white underline) → Step 1
  • State: Save to state.theme

Step 3: Select Style (语言风格)

  • Layout: Vertical stack (space-y-4), single column
  • Options (4 horizontal cards):
    • 传统典雅: Icon :scroll:, Title “传统典雅”, Desc “辞旧迎新，承前启后”
    • 幽默搞笑: Icon :grinning_face_with_smiling_eyes:, Title “幽默搞笑”, Desc “轻松诙谐，笑点满满”
    • 文艺清新: Icon :artist_palette:, Title “文艺清新”, Desc “诗意盎然，温暖人心”
    • 简短有力: Icon :high_voltage:, Title “简短有力”, Desc “言简意赅，直击重点”
  • Card Layout: flex, justify-between, items-center
  • Action: Click → Save state.style → Trigger generateBlessing() → Step 4

Step 4: Result Display

  • Layout: Flex column, items-center
  • Components:
    • Title: “您的新春祝福”, text-3xl, text-white, text-center, mb-6
    • Scroll Container: blessing-scroll class, w-full, p-8, min-h-[120px]
      • Header: “:red_envelope: 新春快乐 :red_envelope:”, text-center, text-yellow-700, font-bold, mb-4
      • Content: div#blessing-text, text-xl, leading-relaxed, text-gray-800, text-center
      • Footer: “—— span#signature 敬上 ——”, text-center, text-yellow-700, text-sm
    • Action Buttons (flex gap-4):
      • 换一条: flex-1, bg-white, text-red-600, rounded-full, onclick regenerate()
      • 复制祝福: flex-1, btn-primary, text-white, rounded-full, onclick copyText()
    • Reset: text-white underline, onclick reset() → Step 0
  • Effects:
    • On enter: fireConfetti()
    • Copy success: Toast notification (fixed top, green bg, rounded-full)

4. Data Structure

State Object

javascript
const state = {
target: String, // Enum values: ‘长辈’, ‘朋友’, ‘恋人’, ‘同事’
theme: String, // Enum values: ‘健康’, ‘财运’, ‘事业’, ‘综合’
style: String // Enum values: ‘传统’, ‘幽默’, ‘文艺’, ‘简短’
}

Blessings Database Schema

javascript
const blessings = {
[target]: {
[theme]: {
[style]: Array<String> // 2-4 templates per combination
}
}
}

Content Requirements by Style

  • Traditional (传统):

    • Use classical Chinese phrases (福如东海, 寿比南山, 辞旧迎新)
    • Formal respectful tone
    • Structure: Greeting + Wish + Closing

  • Humorous (幽默):

    • Modern internet slang (脱贫脱单不脱发, 暴富暴瘦不暴躁)
    • Self-deprecating or exaggerated tone
    • Emoji usage appropriate

  • Literary (文艺):

    • Poetic metaphors (岁月, 山河, 星辰, 烟火)
    • Warm and healing tone
    • Parallelism and rhythm

  • Short (简短):

    • 10-20 Chinese characters max
    • Catchy and memorable
    • Suitable for WeChat status

Signature Mapping

  • 长辈 → 晚辈
  • 朋友 → 好友
  • 恋人 → 爱你的TA
  • 同事 → 同事

5. Technical Specifications

File Architecture

CSS Strategy

  • Tailwind utility classes for layout and spacing
  • Custom CSS in style tag for:
    • Animations (fadeIn, shine, confetti)
    • Special components (scroll, gold-text)
    • Complex gradients and effects
  • Mobile-first responsive design

JavaScript Architecture

  • State management: Global const state object
  • Navigation functions: nextStep(n), prevStep(n)
  • Selection handler: selectOption(type, value, nextStep)
  • Generation logic: generateBlessing() - random selection from array
  • Effects: fireConfetti(), initBackground(), showToast()
  • Utilities: copyText() using navigator.clipboard API

Canvas Specifications

  1. Confetti Canvas (id=“canvas-confetti”)

    • Fixed position, full screen
    • Z-index: 50, pointer-events: none
    • Particle count: 100
    • Colors: #FCD34D, #F59E0B, #EF4444, #DC2626, #FFFFFF
    • Physics: vx/vy random (-10 to 10), gravity 0.5, friction 0.98

  2. Background Canvas (dynamically created)

    • 50 particles (coins and petals)
    • Coins: arc circles
    • Petals: rotated rectangles
    • Speed: 1-3 px/frame downward
    • Reset when y > canvas.height

Performance Targets

  • First Contentful Paint: < 1.5s on 4G
  • Time to Interactive: < 3s
  • Animation frame rate: 60fps
  • Total file size: < 200KB (including embedded data)

Browser Compatibility

  • Chrome 90+, Firefox 88+, Safari 14+
  • iOS Safari 14+ (WebKit)
  • WeChat X5 Kernel (Android/iOS)
  • ES6+ features (const, arrow functions, template literals)

6. Animation Details

Transition Specifications

  • Step switch: fadeIn 0.5s ease-in

    • Start: opacity 0, translateY(20px)
    • End: opacity 1, translateY(0)

  • Card hover: 0.3s ease all

    • Transform: translateY(-5px) scale(1.02)
    • Border: 3px solid #F59E0B
    • Shadow: 0 20px 25px -5px rgba(0,0,0,0.2)

  • Button hover: 0.3s

    • Transform: scale(1.05)
    • Box-shadow intensify

  • Toast: 0.3s opacity transition

    • Show: opacity 1
    • Hide: opacity 0 after 2s

Particle System Logic

javascript
// Confetti structure
{
x: canvas.width / 2,
y: canvas.height / 2,
vx: (Math.random() - 0.5) * 20,
vy: (Math.random() - 0.5) * 20,
life: 100,
color: random from palette,
size: Math.random() * 5 + 2
}

// Update per frame
x += vx
y += vy
vy += 0.5 // gravity
life -= 2
size *= 0.98
opacity = life / 100

7. Copy Writing

UI Text Content

  • Step 0 Title: “春节祝福语生成器”

  • Step 0 Subtitle: “三步生成专属新春祝福”

  • Step 0 CTA: “开始生成 :confetti_ball:”

  • Step 0 Stats: “已生成 8,888 条祝福”

  • Step 1 Title: “第一步：选择祝福对象”

  • Step 2 Title: “第二步：选择祝福主题”

  • Step 3 Title: “第三步：选择语言风格”

  • Step 4 Title: “您的新春祝福”

  • Step 4 Buttons: “换一条 :counterclockwise_arrows_button:”, “复制祝福 :clipboard:”

  • Step 4 Reset: “重新选择条件”

  • Toast Message: “已复制到剪贴板！”

  • Back Button: “← 返回上一步”

Sample Blessings (Minimum Viable Content)

Target: 长辈, Theme: 健康, Style: 传统
“新春佳节，敬祝长辈福如东海长流水，寿比南山不老松。愿您身体康健，笑口常开，阖家欢乐，万事顺遂！”
“岁月不居，时节如流。值此新春，愿长辈身体硬朗如松柏，精神矍铄似朝阳，福乐绵绵，寿比南山！”

Target: 朋友, Theme: 财运, Style: 幽默
“祝你新的一年：脱贫脱单不脱发，暴富暴瘦不暴躁！搞钱要紧，其他随缘！”
“恭喜发财！愿你：数钱数到手抽筋，睡觉睡到自然醒，银行存款多几个零！”

Target: 恋人, Theme: 综合, Style: 文艺
“浮世三千，吾爱有三：日、月与卿。日为朝，月为暮，卿为朝朝暮暮。新年快乐。”
“愿岁月可回首，且以深情共白头。愿你身体健康，陪我走过每一个春夏秋冬。”

Target: 同事, Theme: 事业, Style: 简短
“事业进步，步步高升！”
“工作顺利，前程似锦！”

8. Deployment Checklist

Pre-deployment

  • All 64 combinations have at least 1 blessing text
  • Canvas animations work on mobile
  • Clipboard API handles fallback (if unavailable, show alternative)
  • No console errors
  • Responsive test: iPhone SE (375px) to Desktop (1920px)

Cloudflare Pages Config

  • Build command: (none)
  • Build output directory: /
  • Root file: index.html
  • (Optional) _headers file for security headers

SEO Meta Tags

  • title: AI 春节祝福语生成器
  • meta description: 三步生成专属新春祝福，支持长辈、朋友、恋人、同事多种场景
  • meta theme-color: #DC2626
  • og:title: AI 春节祝福语生成器
  • og:description: 三步生成专属新春祝福
  • viewport: width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no
活动已结束，感谢大家的热情参与！🧨iFlow新春双活动上线，点亮年味，年货好礼🎁有手就能拿！
5

牛的 牛的 :clap:

6

有点不稳定，毕竟是白嫖的

7

体验地址： https://spring-festival-blessing.pages.dev/

8

点击炸礼花的位置可以随机一下，一直在中间也不太好 :grinning_face_with_smiling_eyes:

2 个赞
9

是有点…
还有朋友，我把你ID当iflow提示了，还想着冬天都过了一半了咋才出穿秋裤提示 :rofl:

1 个赞
10

:rofl: