ZGI 市场
登录注册账号
技能版本 1.0.0

frontend-dev

全栈前端开发，结合了优质的UI设计、电影级动画、AI生成的媒体素材、有说服力的文案以及视觉艺术。构建完整的、视觉冲击力强的网页，使用真实的媒体、高级动态效果和引人入胜的文案。适用场景：创建登录页面、营销网站、产品页面、仪表盘、生成媒体素材（图片/视频/音频/音乐）、撰写转化文案、创作生成艺术或实现电影级滚动动画。

价格

免费

  • 安装：免费

在组织开通时一次性收取；再次读取清单或下载不重复收费。

以上为公开标价。你的组织可能有协议价，以控制台显示的价格为准。

如何使用

  1. 为组织安装

    开通即安装：组织固定使用开通时的版本（当前为 1.0.0）。升级到新版本需要取消后重新开通。

  2. 创建凭证

    客户端使用组织凭证读取；绑定到数字人后，数字人使用绑定凭证按需加载。请求中携带：

    Authorization: Bearer $ZGI_MARKET_KEY

  3. 读取清单与安装包

    清单列出版本、文件和校验值；安装包是一个 zip 文件。

    读取清单
    curl "https://market-api.zgi.im/v1/market/skills/minimax-ai-frontend-dev/manifest" \
  -H "Authorization: Bearer $ZGI_MARKET_KEY"
    下载安装包
    curl "https://market-api.zgi.im/v1/market/skills/minimax-ai-frontend-dev/package" \
  -H "Authorization: Bearer $ZGI_MARKET_KEY" \
  -o minimax-ai-frontend-dev.zip

    读取清单和下载安装包不计入用量。下载后请用响应头中的 SHA-256 校验文件。

技能说明

名称
frontend-dev
说明
Full-stack frontend development combining premium UI design, cinematic animations, AI-generated media assets, persuasive copywriting, and visual art. Builds complete, visually striking web pages with real media, advanced motion, and compelling copy. Use when: building landing pages, marketing sites, product pages, dashboards, generating media assets (image/video/audio/music), writing conversion copy, creating generative art, or implementing cinematic scroll animations.
会运行代码PythonNode.js

技能包内含脚本文件，加载技能的运行时可能会执行它们，安装前请先阅读。

SKILL.md 节选

# Frontend Studio

Build complete, production-ready frontend pages by orchestrating 5 specialized capabilities: design engineering, motion systems, AI-generated assets, persuasive copy, and generative art.

## Invocation

```
/frontend-dev <request>
```

The user provides their request as natural language (e.g. "build a landing page for a music streaming app").

## Skill Structure

```
frontend-dev/
├── SKILL.md                      # Core skill (this file)
├── scripts/                      # Asset generation scripts
│   ├── minimax_tts.py            # Text-to-speech
│   ├── minimax_music.py          # Music generation
│   ├── minimax_video.py          # Video generation (async)
│   └── minimax_image.py          # Image generation
├── references/                   # Detailed guides (read as needed)
│   ├── minimax-cli-reference.md  # CLI flags quick reference
│   ├── asset-prompt-guide.md     # Asset prompt engineering rules
│   ├── minimax-tts-guide.md      # TTS usage & voices
│   ├── minimax-music-guide.md    # Music prompts & lyrics format
│   ├── minimax-video-guide.md    # Camera commands & models
│   ├── minimax-image-guide.md    # Ratios & batch generation
│   ├── minimax-voice-catalog.md  # All voice IDs
│   ├── motion-recipes.md         # Animation code snippets
│   ├── env-setup.md              # Environment setup
│   └── troubleshooting.md        # Common issues
├── templates/                    # Visual art templates
│   ├── viewer.html               # p5.js interactive art base
│   └── generator_template.js     # p5.js code reference
└── canvas-fonts/                 # Static art fonts (TTF + licenses)
```

## Project Structure

### Assets (Universal)

All frameworks use the same asset organization:

```
assets/
├── images/
│   ├── hero-landing-1710xxx.webp
│   ├── icon-feature-01.webp
│   └── bg-pattern.svg
├── videos/
│   ├── hero-bg-1710xxx.mp4
│   └── demo-preview.mp4
└── audio/
    ├── bgm-ambient-1710xxx.mp3
    └── tts-intro-1710xxx.mp3
```

**Asset naming:** `{type}-{descriptor}-{timestamp}.{ext}`

### By Framework

| Framework | Asset Location | Component Location |
|-----------|---------------|-------------------|
| **Pure HTML** | `./assets/` | N/A (inline or `./js/`) |
| **React/Next.js** | `public/assets/` | `src/components/` |
| **Vue/Nuxt** | `public/assets/` | `src/components/` |
| **Svelte/SvelteKit** | `static/assets/` | `src/lib/components/` |
| **Astro** | `public/assets/` | `src/components/` |

### Pure HTML

```
project/
├── index.html
├── assets/
│   ├── images/
│   ├── videos/
│   └── audio/
├── css/
│   └── styles.css
└── js/
    └── main.js           # Animations (GSAP/vanilla)
```

### React / Next.js

```
project/
├── public/assets/        # Static assets
├── src/
│   ├── components/
│   │   ├── ui/           # Button, Card, Input
│   │   ├── sections/     # Hero, Features, CTA
│   │   └── motion/       # RevealSection, StaggerGrid
│   ├── lib/
│   ├── styles/
│   └── app/              # Pages
└── package.json
```

### Vue / Nuxt

```
project/
├── public/assets/
├── src/                  # or root for Nuxt
│   ├── components/
│   │   ├── ui/
│   │   ├── sections/
│   │   └── motion/
│   ├── composables/      # Shared logic
│   ├── pages/
│   └── assets/           # Processed assets (optional)
└── package.json
```

### Astro

```
project/
├── public/assets/
├── src/
│   ├── components/       # .astro, .tsx, .vue, .svelte
│   ├── layouts/
│   ├── pages/
│   └── styles/
└── package.json
```

**Component naming:** PascalCase (`HeroSection.tsx`, `HeroSection.vue`, `HeroSection.astro`)

---

SKILL.md 不止这些内容，安装后可阅读全文。

技能包内容

共 98 个文件，合计 7.2 MiB

  • SKILL.md20.1 KiB
  • canvas-fonts/ArsenalSC-OFL.txt4.3 KiB
  • canvas-fonts/ArsenalSC-Regular.ttf201.1 KiB
  • canvas-fonts/BigShoulders-Bold.ttf124.8 KiB
  • canvas-fonts/BigShoulders-OFL.txt4.3 KiB
  • canvas-fonts/BigShoulders-Regular.ttf123.8 KiB
  • canvas-fonts/Boldonse-OFL.txt4.3 KiB
  • canvas-fonts/Boldonse-Regular.ttf94.2 KiB
  • canvas-fonts/BricolageGrotesque-Bold.ttf127.6 KiB
  • canvas-fonts/BricolageGrotesque-OFL.txt4.3 KiB
  • canvas-fonts/BricolageGrotesque-Regular.ttf127.3 KiB
  • canvas-fonts/CrimsonPro-Bold.ttf135.6 KiB
  • canvas-fonts/CrimsonPro-Italic.ttf137.8 KiB
  • canvas-fonts/CrimsonPro-OFL.txt4.3 KiB
  • canvas-fonts/CrimsonPro-Regular.ttf134.6 KiB
  • canvas-fonts/DMMono-OFL.txt4.3 KiB
  • canvas-fonts/DMMono-Regular.ttf58.8 KiB
  • canvas-fonts/EricaOne-OFL.txt4.3 KiB
  • canvas-fonts/EricaOne-Regular.ttf32.2 KiB
  • canvas-fonts/GeistMono-Bold.ttf96.4 KiB
  • canvas-fonts/GeistMono-OFL.txt4.3 KiB
  • canvas-fonts/GeistMono-Regular.ttf96.3 KiB
  • canvas-fonts/Gloock-OFL.txt4.3 KiB
  • canvas-fonts/Gloock-Regular.ttf118.3 KiB
  • canvas-fonts/IBMPlexMono-Bold.ttf171.1 KiB
  • canvas-fonts/IBMPlexMono-OFL.txt4.3 KiB
  • canvas-fonts/IBMPlexMono-Regular.ttf168.5 KiB
  • canvas-fonts/IBMPlexSerif-Bold.ttf211.8 KiB
  • canvas-fonts/IBMPlexSerif-BoldItalic.ttf224.8 KiB
  • canvas-fonts/IBMPlexSerif-Italic.ttf225.6 KiB
  • canvas-fonts/IBMPlexSerif-Regular.ttf210.9 KiB
  • canvas-fonts/InstrumentSans-Bold.ttf105.4 KiB
  • canvas-fonts/InstrumentSans-BoldItalic.ttf108.6 KiB
  • canvas-fonts/InstrumentSans-Italic.ttf107.9 KiB
  • canvas-fonts/InstrumentSans-OFL.txt4.3 KiB
  • canvas-fonts/InstrumentSans-Regular.ttf105.0 KiB
  • canvas-fonts/InstrumentSerif-Italic.ttf89.1 KiB
  • canvas-fonts/InstrumentSerif-Regular.ttf89.0 KiB
  • canvas-fonts/Italiana-OFL.txt4.3 KiB
  • canvas-fonts/Italiana-Regular.ttf37.4 KiB
  • canvas-fonts/JetBrainsMono-Bold.ttf141.8 KiB
  • canvas-fonts/JetBrainsMono-OFL.txt4.3 KiB
  • canvas-fonts/JetBrainsMono-Regular.ttf141.5 KiB
  • canvas-fonts/Jura-Light.ttf197.8 KiB
  • canvas-fonts/Jura-Medium.ttf197.9 KiB
  • canvas-fonts/Jura-OFL.txt4.3 KiB
  • canvas-fonts/LibreBaskerville-OFL.txt4.3 KiB
  • canvas-fonts/LibreBaskerville-Regular.ttf188.6 KiB
  • canvas-fonts/Lora-Bold.ttf178.8 KiB
  • canvas-fonts/Lora-BoldItalic.ttf183.0 KiB
  • canvas-fonts/Lora-Italic.ttf183.6 KiB
  • canvas-fonts/Lora-OFL.txt4.3 KiB
  • canvas-fonts/Lora-Regular.ttf176.2 KiB
  • canvas-fonts/NationalPark-Bold.ttf96.1 KiB
  • canvas-fonts/NationalPark-OFL.txt4.3 KiB
  • canvas-fonts/NationalPark-Regular.ttf93.3 KiB
  • canvas-fonts/NothingYouCouldDo-OFL.txt4.3 KiB
  • canvas-fonts/NothingYouCouldDo-Regular.ttf35.3 KiB
  • canvas-fonts/Outfit-Bold.ttf81.3 KiB
  • canvas-fonts/Outfit-OFL.txt4.3 KiB
  • canvas-fonts/Outfit-Regular.ttf80.1 KiB
  • canvas-fonts/PixelifySans-Medium.ttf68.2 KiB
  • canvas-fonts/PixelifySans-OFL.txt4.3 KiB
  • canvas-fonts/PoiretOne-OFL.txt4.3 KiB
  • canvas-fonts/PoiretOne-Regular.ttf61.9 KiB
  • canvas-fonts/RedHatMono-Bold.ttf41.6 KiB
  • canvas-fonts/RedHatMono-OFL.txt4.3 KiB
  • canvas-fonts/RedHatMono-Regular.ttf41.5 KiB
  • canvas-fonts/Silkscreen-OFL.txt4.3 KiB
  • canvas-fonts/Silkscreen-Regular.ttf37.1 KiB
  • canvas-fonts/SmoochSans-Medium.ttf72.2 KiB
  • canvas-fonts/SmoochSans-OFL.txt4.3 KiB
  • canvas-fonts/Tektur-Medium.ttf100.0 KiB
  • canvas-fonts/Tektur-OFL.txt4.3 KiB
  • canvas-fonts/Tektur-Regular.ttf98.7 KiB
  • canvas-fonts/WorkSans-Bold.ttf277.7 KiB
  • canvas-fonts/WorkSans-BoldItalic.ttf261.4 KiB
  • canvas-fonts/WorkSans-Italic.ttf254.2 KiB
  • canvas-fonts/WorkSans-OFL.txt4.3 KiB
  • canvas-fonts/WorkSans-Regular.ttf268.4 KiB
  • canvas-fonts/YoungSerif-OFL.txt4.3 KiB
  • canvas-fonts/YoungSerif-Regular.ttf124.7 KiB
  • references/asset-prompt-guide.md2.0 KiB
  • references/env-setup.md649 B
  • references/minimax-cli-reference.md5.0 KiB
  • references/minimax-image-guide.md1.9 KiB
  • references/minimax-music-guide.md6.5 KiB
  • references/minimax-tts-guide.md2.1 KiB
  • references/minimax-video-guide.md2.7 KiB
  • references/minimax-voice-catalog.md46.4 KiB
  • references/motion-recipes.md10.1 KiB
  • references/troubleshooting.md1.7 KiB
  • scripts/minimax_image.py4.2 KiB
  • scripts/minimax_music.py5.2 KiB
  • scripts/minimax_tts.py3.8 KiB
  • scripts/minimax_video.py5.9 KiB
  • templates/generator_template.js7.6 KiB
  • templates/viewer.html20.2 KiB

来源与审核

审核状态
尚未审核，内容来自上游来源
来源文档
https://github.com/MiniMax-AI/skills/tree/main/skills/frontend-dev
源代码仓库
https://github.com/MiniMax-AI/skills
许可证
未说明

审核状态是平台对上架信息的记录，不构成对上游服务质量或可用性的担保。

相关商品