多源设计H5生成器 Skill v1.0

版本更新

• v1.0: 首发版本，支持多源输入、响应式布局、动画效果

功能概述

本Skill支持多种输入源生成带动画效果的响应式H5网页：

使用方法

基本语法

@skill://design-to-h5 @[截图路径] @[文案文档路径] @[标注图片路径] [动效选项]

示例

输入源处理

1. 截图/设计稿处理

对于页面布局截图，系统会进行以下处理：

┌─────────────────────────────────────────────────────────────┐
│                    截图解析流程                              │
├─────────────────────────────────────────────────────────────┤
│                                                             │
│  ┌──────────┐    ┌──────────┐    ┌──────────┐    ┌────────┐ │
│  │ 1.截图   │───▶│ 2.布局   │───▶│ 3.元素   │───▶│ 4.位置 │ │
│  │ 上传    │    │ 识别    │    │ 提取    │    │ 映射   │ │
│  └──────────┘    └──────────┘    └──────────┘    └────────┘ │
│                                                             │
│  识别内容：背景色、文本区域、图片位置、按钮、图标、层级结构  │
│                                                             │
└─────────────────────────────────────────────────────────────┘

布局识别策略：

• 背景色提取：分析截图主色调作为页面背景
• 内容区域检测：识别主体内容边界和留白区域
• 元素分类：区分背景图、装饰图、文字区块、按钮等
• 网格系统：建立响应式网格辅助定位

2. 文案文档解析

支持的文档格式及解析方式：

文档内容映射规则：

// 文案映射配置
const copyMapping = {
    mainTitle: ['h1', '标题', '主标题', '#'],
    subTitle: ['h2', '副标题', 'subtitle'],
    bodyText: ['p', '正文', '段落', 'content'],
    button: ['按钮', 'button', 'cta'],
    caption: ['caption', '注释', '说明']
};

// 典型文案结构
const documentStructure = {
    hero: {           // 首屏大图区域
        title: '主标题文案',
        subtitle: '副标题文案',
        description: '描述文字'
    },
    features: [      // 特色/功能区块
        { title: '标题1', desc: '描述1' },
        { title: '标题2', desc: '描述2' }
    ],
    cta: {            // 行动号召
        text: '按钮文字',
        link: '#contact'
    },
    footer: {         // 页脚
        copyright: '版权信息'
    }
};

3. 标注图片素材处理

对于标注有文案信息的图片素材：

识别规则：
1. 图片文件名 → 区域标识（如 banner.jpg、feature-1.png）
2. 标注层级 → 内容优先级
3. 组合素材 → 多图轮播/画廊

核心算法

1. 布局网格系统

// 响应式网格配置
const gridConfig = {
    mobile: {
        columns: 4,
        gutter: 16,      // px
        margin: 16,
        maxWidth: 375    // 移动端基准宽度
    },
    tablet: {
        columns: 8,
        gutter: 24,
        margin: 24,
        maxWidth: 768
    },
    desktop: {
        columns: 12,
        gutter: 24,
        margin: 32,
        maxWidth: 1440
    }
};

// 容器宽度断点
const breakpoints = {
    sm: '576px',    // 大手机
    md: '768px',    // 平板
    lg: '1024px',   // 小桌面
    xl: '1280px',   // 大桌面
    xxl: '1536px'   // 超大屏
};

2. 响应式布局算法

// 布局类型识别
const layoutTypes = {
    SINGLE_COLUMN: '单列布局',      // 移动端优先
    TWO_COLUMN: '双列布局',         // 左右分栏
    GRID: '网格布局',               // 多项目排列
    HERO: 'Hero大图布局',           // 首屏突出
    CARDS: '卡片布局'               // 均等卡片
};

// 元素响应式策略
function getResponsiveStrategy(element) {
    // 优先级：移动端优先
    const mobile = element.mobile || element;
    const tablet = element.tablet || element;
    const desktop = element.desktop || element;

    return {
        width: {
            mobile: mobile.width || '100%',
            tablet: tablet.width || 'calc(50% - 12px)',
            desktop: desktop.width || element.width || 'auto'
        },
        flexGrow: mobile.flex || 0,
        flexShrink: mobile.shrink || 1
    };
}

3. 动画效果配置

// ==================== 淡入淡出效果配置 ====================
const fadeConfig = {
    duration: 600,                    // 动画时长(ms)
    easing: 'cubic-bezier(0.4, 0, 0.2, 1)',
    staggerDelay: 150,               // 交错延迟(ms)
    threshold: 0.1,                   // 触发阈值（进入可视区域）
    once: true                        // 是否只触发一次
};

// 淡入动画关键帧
const fadeKeyframes = {
    opacity: [0, 1],
    transform: ['translateY(20px)', 'translateY(0)']
};

// 触发时机
const triggerEvents = ['scroll', 'touchmove', 'resize'];

// ==================== 呼吸效果配置 ====================
const breathConfig = {
    duration: 2500,                   // 单次呼吸周期(ms)
    scaleRange: [1, 1.03],            // 缩放范围
    filterRange: ['brightness(1)', 'brightness(1.1)'],
    easing: 'ease-in-out',
    hoverOnly: true                   // 仅悬停触发
};

// 呼吸动画关键帧
const breathKeyframes = {
    '0%, 100%': {
        transform: 'scale(1)',
        filter: 'brightness(1)',
        textShadow: 'none'
    },
    '50%': {
        transform: 'scale(1.03)',
        filter: 'brightness(1.1)',
        textShadow: '0 0 20px rgba(255,255,255,0.3)'
    }
};

动画效果模板

1. 图片淡入淡出 (FadeIn)

/* ==================== 淡入淡出动画 ==================== */

/* 入场淡入淡出 */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 交错入场动画类 */
.animate-fade-in {
    opacity: 0;
    animation: fadeInUp 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* 交错延迟 */
.animate-delay-1 { animation-delay: 0.1s; }
.animate-delay-2 { animation-delay: 0.2s; }
.animate-delay-3 { animation-delay: 0.3s; }
.animate-delay-4 { animation-delay: 0.4s; }
.animate-delay-5 { animation-delay: 0.5s; }

/* 滚动触发的淡入 */
.fade-in-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in-on-scroll.visible {
    opacity: 1;
    transform: translateY(0);
}

/* 移动端触摸触发 */
@media (hover: none) {
    .fade-in-on-scroll.visible {
        opacity: 1;
        transform: translateY(0);
    }
}

2. 文字呼吸效果 (Breath on Hover)

/* ==================== 文字呼吸动效 ==================== */

/* 基础呼吸效果 */
@keyframes textBreath {
    0%, 100% {
        transform: scale(1);
        text-shadow: none;
    }
    50% {
        transform: scale(1.02);
        text-shadow: 0 0 10px currentColor;
    }
}

/* 悬停呼吸类 */
.text-breath:hover {
    animation: textBreath 2.5s ease-in-out infinite;
}

/* 呼吸+发光效果 */
@keyframes textGlow {
    0%, 100% {
        text-shadow: 0 0 5px rgba(255, 255, 255, 0.3);
        transform: scale(1);
    }
    50% {
        text-shadow: 0 0 20px rgba(255, 255, 255, 0.6),
                     0 0 30px rgba(255, 255, 255, 0.4);
        transform: scale(1.03);
    }
}

.text-glow:hover {
    animation: textGlow 2s ease-in-out infinite;
}

/* 标题专用呼吸 */
.title-breath:hover {
    animation: textBreath 2.5s ease-in-out infinite;
    color: #3B82F6;
    transition: color 0.3s ease;
}

/* 按钮文字呼吸 */
.btn-text-breath:hover {
    animation: textBreath 2s ease-in-out infinite;
    letter-spacing: 0.05em;
}

3. 图片悬停效果

/* ==================== 图片悬停效果 ==================== */

/* 图片淡入淡出+缩放 */
.image-hover-fade {
    position: relative;
    overflow: hidden;
}

.image-hover-fade::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.5), transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.image-hover-fade:hover::after {
    opacity: 1;
}

.image-hover-fade img {
    transition: transform 0.5s ease, opacity 0.5s ease;
}

.image-hover-fade:hover img {
    transform: scale(1.05);
    opacity: 0.9;
}

/* 图片切换淡入淡出 */
.image-switch {
    position: relative;
}

.image-switch img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.image-switch img:first-child {
    opacity: 1;
}

.image-switch:hover img:first-child {
    opacity: 0;
}

.image-switch:hover img:last-child {
    opacity: 1;
}

4. 综合动效组合

/* ==================== 综合动效 ==================== */

/* 卡片悬停综合效果 */
.card-hover {
    transition: transform 0.3s ease, 
                box-shadow 0.3s ease,
                opacity 0.3s ease;
}

.card-hover:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.card-hover:hover .card-image {
    animation: fadeInScale 0.5s ease forwards;
}

.card-hover:hover .card-title {
    animation: textBreath 2s ease-in-out infinite;
}

/* 按钮综合效果 */
.btn-hover {
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.btn-hover::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(45deg, transparent, rgba(255,255,255,0.2), transparent);
    transform: translateX(-100%);
    transition: transform 0.5s ease;
}

.btn-hover:hover::before {
    transform: translateX(100%);
}

.btn-hover:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(59, 130, 246, 0.3);
}

.btn-hover:hover .btn-text {
    animation: textBreath 2s ease-in-out infinite;
}

响应式模板

1. 移动端优先断点系统

/* ==================== 响应式断点 ==================== */

/* 基础（移动端） */
.container {
    width: 100%;
    max-width: 100%;
    padding: 0 16px;
}

/* 平板 (≥768px) */
@media (min-width: 768px) {
    .container {
        max-width: 720px;
        padding: 0 24px;
    }
}

/* 桌面 (≥1024px) */
@media (min-width: 1024px) {
    .container {
        max-width: 960px;
        padding: 0 32px;
    }
}

/* 大桌面 (≥1280px) */
@media (min-width: 1280px) {
    .container {
        max-width: 1200px;
    }
}

2. 移动端布局

/* ==================== 移动端布局 ==================== */

.h5-mobile-layout {
    /* 单列流式布局 */
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* 全宽图片 */
.mobile-full-image {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
}

/* 全宽区块 */
.mobile-full-section {
    width: 100%;
    padding: 24px 16px;
    margin: 0;
}

/* 移动端间距 */
.mobile-spacing {
    padding: 20px 16px;
    gap: 12px;
}

/* 移动端字号 */
.mobile-text {
    font-size: 14px;
    line-height: 1.6;
}

.mobile-title {
    font-size: 20px;
    font-weight: 600;
}

3. PC端布局

/* ==================== PC端布局 ==================== */

.h5-desktop-layout {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 24px;
    max-width: 1440px;
    margin: 0 auto;
}

/* 常见布局 */
.desktop-hero {
    grid-column: 1 / -1;  /* 全宽 */
}

.desktop-sidebar {
    grid-column: 1 / 4;    /* 左侧边栏 */
}

.desktop-content {
    grid-column: 4 / 13;   /* 主内容区 */
}

/* 双列布局 */
.desktop-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}

/* 三列布局 */
.desktop-three-col {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}

/* PC端间距 */
.desktop-spacing {
    padding: 48px 32px;
    gap: 24px;
}

/* PC端字号 */
.desktop-text {
    font-size: 16px;
    line-height: 1.8;
}

.desktop-title {
    font-size: 32px;
    font-weight: 700;
}

4. 响应式隐藏/显示

/* ==================== 响应式显示控制 ==================== */

/* 默认隐藏移动端内容 */
.hide-mobile { display: none; }

/* 移动端隐藏 */
@media (max-width: 767px) {
    .hide-mobile { display: block; }
    .show-mobile-only { display: none; }
}

/* 桌面隐藏 */
@media (min-width: 768px) {
    .show-mobile-only { display: block; }
    .hide-desktop { display: none; }
}

完整HTML模板

    
    
    
    


    
    

        

            
多源设计H5生成器
            
支持截图、文档、图片素材，一键生成响应式动效页面
            

                
                    开始使用
                
            
        
    

    
    

        

            
核心功能
            

                

                    

                        
                    
                    
多源输入
                    
支持截图、PPT、文档、图片等多种素材格式
                
                

                    

                        
                    
                    
响应式设计
                    
自动适配移动端和PC端，提供最佳浏览体验
                
                

                    

                        
                    
                    
动效丰富
                    
淡入淡出、呼吸效果、悬停交互应有尽有
                
            
        
    

    
    

    

工作流程

┌────────────────────────────────────────────────────────────────┐
│                    多源设计H5生成流程                           │
├────────────────────────────────────────────────────────────────┤
│                                                                │
│  ┌──────────┐    ┌──────────┐    ┌──────────┐    ┌──────────┐ │
│  │ 1.素材   │───▶│ 2.布局   │───▶│ 3.内容   │───▶│ 4.动效   │ │
│  │ 收集    │    │ 分析    │    │ 提取    │    │ 设计    │ │
│  └──────────┘    └──────────┘    └──────────┘    └──────────┘ │
│       │               │               │               │        │
│       ▼               ▼               ▼               ▼        │
│  截图/文档/图片   区域划分      文案/图片/样式    淡入/呼吸      │
│                                                                │
│  ┌──────────┐    ┌──────────┐    ┌──────────┐                 │
│  │ 5.响应式 │───▶│ 6.生成   │───▶│ 7.预览   │                 │
│  │ 设计    │    │ 代码    │    │ 测试    │                 │
│  └──────────┘    └──────────┘    └──────────┘                 │
│       │               │               │                        │
│       ▼               ▼               ▼                        │
│  移动端/PC端     HTML/CSS/JS    浏览器验证                      │
│                                                                │
└────────────────────────────────────────────────────────────────┘

常见问题

扩展功能

1. 分享功能（可选）

// 分享组件配置
const shareConfig = {
    title: '多源设计H5',
    desc: '使用多源设计H5生成器创建的精美页面',
    imgUrl: 'assets/share.jpg',
    platforms: ['weixin', 'weibo', 'qq', 'copy']
};

2. 统计埋点（可选）

// 页面统计配置
const analyticsConfig = {
    pageView: true,           // 页面浏览
    clickHeatmap: true,        // 点击热力图
    scrollDepth: true,         // 滚动深度
    animationTrigger: true     // 动画触发统计
};

依赖环境

Python环境（用于文档解析）

pip install python-pptx python-docx PyPDF2 Pillow

Node.js（可选，用于本地预览）

npx serve .

示例输出

基于截图+文案生成的H5页面包含：

• 响应式布局（移动端+PC端自适应）
• 图片淡入淡出效果
• 文字鼠标滑过呼吸感
• 悬停交互动画
• 平滑滚动过渡
• 懒加载优化