前端工作室v0.1.1

免责声明：本站部分 Skill 来源于公开渠道，使用前请注意识别相关风险，内容版权归原作者所有，如 Skill 涉及版权问题，请在线反馈，核实后予以下架处理。

概述

本 Skill 面向需要快速交付高完成度前端页面的开发者与设计师。通过一条自然语言指令（如「为音乐流媒体应用构建落地页」），即可自动完成从设计架构、动效编排、AI 素材生成到文案撰写的完整工作流。内置 Minimax 多模态生成脚本（图像、视频、音乐、语音），配合 50+ 款开源字体与 p5.js 生成艺术模板，输出覆盖 React/Next.js、Vue/Nuxt、Svelte、Astro 及原生 HTML 的完整项目结构，所有素材本地落盘，禁止占位图与外链。

技能包含

• SKILL.md：技能主说明，含 6 阶段工作流、设计工程规范、动效引擎规则与质量门禁（本文件）
• scripts/：4 个可执行脚本——minimax_image.py（图像生成）、minimax_video.py（异步视频）、minimax_music.py（音乐生成）、minimax_tts.py（文本转语音）
• references/：10 份参考指南——CLI 速查、素材提示工程、各模态 API 细则、语音 ID 目录、动效代码片段、环境搭建与故障排查
• templates/：p5.js 交互艺术基底模板（viewer.html）与代码参考（generator_template.js）
• canvas-fonts/：50 款 TTF 开源字体及 OFL 许可证文件，涵盖 Geist、JetBrains Mono、Lora、Instrument Sans 等显示与正文字体

核心能力

• 设计工程：动态调节视觉方差、动效强度、信息密度三旋钮，强制非对称布局与液态玻璃质感，内置反「AI 味」配色与排版禁忌
• 动效编排：按场景自动选型——Framer Motion 负责 UI 进出场与布局动画，GSAP ScrollTrigger 接管滚动叙事，CSS 处理微交互，禁止同组件混用冲突库
• AI 素材工厂：调用 Minimax 接口批量生成图片、视频、背景音乐与语音解说，支持镜头指令、歌词格式、批量比例输出，素材按 {类型}-{描述}-{时间戳} 规范命名归档
• 文案生成：遵循 AIDA、PAS、FAB 框架撰写真实营销文案，禁止 Lorem ipsum 占位
• 多框架适配：一键输出 React/Next.js、Vue/Nuxt、Svelte/SvelteKit、Astro 或纯 HTML 项目结构，组件按框架约定目录存放，静态资源统一入 public/assets 或等价路径
• 生成艺术：基于 p5.js 模板快速产出可交互视觉作品，配合 50 款可商用字体实现品牌级排版

应用场景