技能 frontend-dev

📦

frontend-dev

Name: frontend-dev
Author: MiniMax-AI

低風險 🌐 網路存取⚙️ 外部命令🔑 環境變數📁 檔案系統存取⚡ 包含腳本

使用 AI 媒體建立前端頁面

建立專業網頁需要設計、媒體、動畫和文案撰寫技能。此技能將五種能力整合到一個工作流程中，產生完整的頁面，包含 AI 建立的圖片、影片、音樂、配音和捲動動畫。

支援: Claude Codex Code(CC)

🥉 75 青銅

下載技能 ZIP

在 Claude 中上傳

前往設定 → 功能 → 技能 → 上傳技能

開啟並開始使用

測試它

正在使用「frontend-dev」。 Build a landing page for a fitness app with hero image and feature sections

預期結果:

Generated: index.html with React components
Generated: hero image via MiniMax image API
Generated: Framer Motion scroll animations for feature cards
Generated: Tailwind CSS styling with responsive layout

正在使用「frontend-dev」。 Create a product page with AI video demo and background music

預期結果:

Generated: Next.js page with video hero section
Generated: AI video clip via MiniMax video API with push-in camera movement
Generated: Ambient background music via MiniMax music API
Generated: GSAP timeline for scroll-triggered content reveals

安全審計

低風險

v1 • 4/16/2026

Static analysis flagged 1176 patterns with a risk score of 100/100, but evaluation confirms these are overwhelmingly false positives. High-severity 'weak cryptographic algorithm' findings in canvas-fonts/*.txt files are font Open Font License texts, not crypto code. 'Ruby/shell backtick execution' findings in markdown reference files are backtick-enclosed code examples in documentation. 'Windows SAM database' finding at templates/viewer.html:508 is the word 'CUSTOMIZE' containing the substring 'SAM'. regex.exec() in generator_template.js:133 is a standard JavaScript hex color parser. The skill is a legitimate frontend development tool with MiniMax API client scripts that properly use environment variables for API key management. Low risk after review.

已掃描檔案

6,379

分析行數

發現項

審計總數

中風險問題 (2)

scripts/minimax_image.py:20 scripts/minimax_music.py:21 scripts/minimax_tts.py:21 scripts/minimax_video.py:21

API key stored in module-level variable

MINIMAX_API_KEY is read from environment at module import time and stored in a module-level variable. While this is standard practice for API clients, the key persists in memory for the process lifetime.

scripts/minimax_image.py:80-119 scripts/minimax_music.py:141-148 scripts/minimax_tts.py:120 scripts/minimax_video.py:130-131

File write operations for generated media

Scripts write generated media (images, video, audio) to local filesystem. This is expected behavior for a media generation tool. File paths are user-controlled via command line arguments.

低風險問題 (6)

canvas-fonts/ArsenalSC-OFL.txt:1-94 canvas-fonts/BigShoulders-OFL.txt:1-94 canvas-fonts/Boldonse-OFL.txt:1-94

False positive: Weak cryptographic algorithm in font license files

Static scanner flagged 'weak cryptographic algorithm' in canvas-fonts/*-OFL.txt files. These are Open Font License text files for bundled fonts, containing no code. Pattern matching triggered on license boilerplate text.

references/minimax-cli-reference.md:1-128 SKILL.md:30-446

False positive: Shell backtick execution in markdown documentation

Static scanner flagged 'Ruby/shell backtick execution' in markdown reference files. These are backtick-enclosed code examples and CLI command documentation, not actual shell execution. The files are reference guides for users.

templates/viewer.html:508

False positive: Windows SAM database reference

Scanner flagged 'Windows SAM database' at templates/viewer.html:508. The actual text is '// PARTICLE SYSTEM - CUSTOMIZE FOR YOUR ALGORITHM'. The substring 'SAM' within 'CUSTOMIZE' triggered a false regex match.

templates/generator_template.js:133

False positive: Python exec() function

Scanner flagged 'Python exec() function' at templates/generator_template.js:133. The actual code is '/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)', which is a standard JavaScript regex method for parsing hex color strings.

canvas-fonts/JetBrainsMono-OFL.txt:81 canvas-fonts/WorkSans-OFL.txt:81

False positive: System reconnaissance in font license files

Scanner flagged 'system reconnaissance' patterns in OFL license files. These contain URLs to font directories and repository links as part of standard Open Font License attribution requirements.

canvas-fonts/JetBrainsMono-OFL.txt:1-5 canvas-fonts/WorkSans-OFL.txt:1-5

False positive: Hardcoded URLs in font license files

Scanner flagged 'hardcoded URL' in canvas-fonts/*.txt license files. These are standard Open Font License repository and directory URLs, not actual network requests or data exfiltration.

風險因素

🌐 網路存取 (70)

⚙️ 外部命令 (841)

🔑 環境變數 (51)

📁 檔案系統存取 (16)

references/minimax-cli-reference.md:82 references/minimax-cli-reference.md:114 references/minimax-cli-reference.md:131 references/minimax-music-guide.md:29 references/minimax-tts-guide.md:37 scripts/minimax_image.py:88 scripts/minimax_image.py:80 scripts/minimax_image.py:119 scripts/minimax_image.py:97 scripts/minimax_music.py:141 scripts/minimax_music.py:148 scripts/minimax_music.py:127 scripts/minimax_tts.py:120 scripts/minimax_tts.py:105 scripts/minimax_video.py:131 scripts/minimax_video.py:130

⚡ 包含腳本 (1)

templates/generator_template.js:133

審計者: claude

品質評分

架構

100

可維護性

內容

社群

安全

規範符合性

你能建構什麼

行銷登陸頁面建立

新創公司創辦人需要一個帶有主圖、背景影片和說服性文案的登陸頁面。此技能會生成完整頁面及 AI 建立的媒體素材。

帶有生成式藝術的作品集網站

設計師想要一個展示互動式 p5.js 生成式藝術、流暢頁面過渡和自訂排版的作品集。此技能會建立藝術系統和完整網站版面配置。

帶有配音和影片的產品演示

產品經理需要一個帶有 AI 旁白教程、背景音樂和產品展示圖片的演示頁面。此技能會建立所有媒體並組裝頁面。

試試這些提示

基本登陸頁面

為咖啡訂閱服務建立一個登陸頁面。包含主圖區塊、功能網格和定價卡片。使用 React 搭配 Tailwind CSS。

帶有 AI 圖片的頁面

建立一個旅遊部落格首頁，使用 AI 生成的旅遊目的地主圖：'熱帶沙灘日落'、'山村清晨'、'夜景天際線'。使用 Next.js 搭配 Framer Motion 淡入動畫。

多媒體行銷網站

建立一個產品發布頁面，包含 AI 生成的主圖影片、背景音樂和帶配音的產品演示區塊。使用 AI 圖片作為功能卡片。包含使用 GSAP 的捲動觸發動畫。部署為純 HTML。

互動式藝術裝置頁面

建立一個互動式藝術畫廊頁面，以 p5.js 生成式藝術作為主圖。包含參數控制面板讓使用者調整藝術作品。加入 AI 生成的環境背景音樂。使用 Vue 搭配電影級捲動動畫。

最佳實務

在使用媒體生成功能之前，先設定 MINIMAX_API_KEY 和 MINIMAX_API_BASE 環境變數
使用具體、詳細的提示詞來生成 AI 媒體，以獲得更高品質的結果
在部署到正式環境之前測試生成的媒體素材，因為 AI 輸出品質可能有所不同

避免

不要將 API 金鑰提交到版本控制，一定要使用環境變數
不要在未審核品質和適當性的情況下使用 AI 生成的媒體
避免並行生成過多媒體素材，可能會超過 API 速率限制

常見問題

此技能支援哪些 AI 工具？

此技能適用於 Claude、Codex 和 Claude Code。這三種 AI 工具都可以協調前端生成和 MiniMax API 呼叫。

我需要 MiniMax API 金鑰嗎？

是的，媒體生成功能（圖片、影片、音樂、文字轉語音）需要 MINIMAX_API_KEY。在使用前將其設為環境變數。前端設計功能不需要此金鑰。

此技能支援哪些框架？

此技能支援 Pure HTML、搭配 Next.js 的 React、搭配 Nuxt 的 Vue、搭配 SvelteKit 的 Svelte，以及 Astro。每個框架都使用適當的素材和元件目錄結構。

媒體生成需要多長時間？

圖片生成通常是同步的，通常在幾秒內完成。音樂和文字轉語音也是同步的，但可能需要更長時間。影片生成是非同步的，需要輪詢，可能需要幾分鐘。

我可以在沒有 AI 媒體生成功能的情況下使用此技能嗎？

可以。前端設計、動畫和文案功能可以獨立運作。只有媒體生成腳本需要 MiniMax API。您可以使用佔位圖片和現有媒體代替。

文字轉語音有哪些語音選項？

此技能支援多種 MiniMax 語音，包括各種風格的男聲和女聲選項。語音 ID 和特性記錄在 minimax-voice-catalog 參考文件中。

開發者詳情

作者

MiniMax-AI

授權

MIT

儲存庫

https://github.com/MiniMax-AI/skills/tree/main/skills/frontend-dev

引用

main

檔案結構

📁 canvas-fonts/

📄 ArsenalSC-OFL.txt

📄 ArsenalSC-Regular.ttf

📄 BigShoulders-Bold.ttf

📄 BigShoulders-OFL.txt

📄 BigShoulders-Regular.ttf

📄 Boldonse-OFL.txt

📄 Boldonse-Regular.ttf

📄 BricolageGrotesque-Bold.ttf

📄 BricolageGrotesque-OFL.txt

📄 BricolageGrotesque-Regular.ttf

📄 CrimsonPro-Bold.ttf

📄 CrimsonPro-Italic.ttf

📄 CrimsonPro-OFL.txt

📄 CrimsonPro-Regular.ttf

📄 DMMono-OFL.txt

📄 DMMono-Regular.ttf

📄 EricaOne-OFL.txt

📄 EricaOne-Regular.ttf

📄 GeistMono-Bold.ttf

📄 GeistMono-OFL.txt

📄 GeistMono-Regular.ttf

📄 Gloock-OFL.txt

📄 Gloock-Regular.ttf

📄 IBMPlexMono-Bold.ttf

📄 IBMPlexMono-OFL.txt

📄 IBMPlexMono-Regular.ttf

📄 IBMPlexSerif-Bold.ttf

📄 IBMPlexSerif-BoldItalic.ttf

📄 IBMPlexSerif-Italic.ttf

📄 IBMPlexSerif-Regular.ttf

📄 InstrumentSans-Bold.ttf

📄 InstrumentSans-BoldItalic.ttf

📄 InstrumentSans-Italic.ttf

📄 InstrumentSans-OFL.txt

📄 InstrumentSans-Regular.ttf

📄 InstrumentSerif-Italic.ttf

📄 InstrumentSerif-Regular.ttf

📄 Italiana-OFL.txt

📄 Italiana-Regular.ttf

📄 JetBrainsMono-Bold.ttf

📄 JetBrainsMono-OFL.txt

📄 JetBrainsMono-Regular.ttf

📄 Jura-Light.ttf

📄 Jura-Medium.ttf

📄 Jura-OFL.txt

📄 LibreBaskerville-OFL.txt

📄 LibreBaskerville-Regular.ttf

📄 Lora-Bold.ttf

📄 Lora-BoldItalic.ttf

📄 Lora-Italic.ttf

📄 Lora-OFL.txt

📄 Lora-Regular.ttf

📄 NationalPark-Bold.ttf

📄 NationalPark-OFL.txt

📄 NationalPark-Regular.ttf

📄 NothingYouCouldDo-OFL.txt

📄 NothingYouCouldDo-Regular.ttf

📄 Outfit-Bold.ttf

📄 Outfit-OFL.txt

📄 Outfit-Regular.ttf

📄 PixelifySans-Medium.ttf

📄 PixelifySans-OFL.txt

📄 PoiretOne-OFL.txt

📄 PoiretOne-Regular.ttf

📄 RedHatMono-Bold.ttf

📄 RedHatMono-OFL.txt

📄 RedHatMono-Regular.ttf

📄 Silkscreen-OFL.txt

📄 Silkscreen-Regular.ttf

📄 SmoochSans-Medium.ttf

📄 SmoochSans-OFL.txt

📄 Tektur-Medium.ttf

📄 Tektur-OFL.txt

📄 Tektur-Regular.ttf

📄 WorkSans-Bold.ttf

📄 WorkSans-BoldItalic.ttf

📄 WorkSans-Italic.ttf

📄 WorkSans-OFL.txt

📄 WorkSans-Regular.ttf

📄 YoungSerif-OFL.txt

📄 YoungSerif-Regular.ttf

📁 references/

📄 asset-prompt-guide.md

📄 env-setup.md

📄 minimax-cli-reference.md

📄 minimax-image-guide.md

📄 minimax-music-guide.md

📄 minimax-tts-guide.md

📄 minimax-video-guide.md

📄 minimax-voice-catalog.md

📄 motion-recipes.md

📄 troubleshooting.md

📁 scripts/

📄 minimax_image.py

📄 minimax_music.py

📄 minimax_tts.py

📄 minimax_video.py

📁 templates/

📄 generator_template.js

📄 viewer.html

📄 SKILL.md