sprite-animation
A pixel / sprite-style animated explainer slide — full-bleed cream stage, bold display year, animated pixel-art mascot (e.g. Hanafuda card, mushroom, or 8-bit console), kinetic Japanese display type, ticking timeline ribbon. Reads like a single frame of an educational motion video — looping CSS keyframes, no JS, ready to be screen-recorded into a vertical video. Use when the brief asks for a "sprite animation", "pixel-art video", "8-bit explainer", "history of X explainer", "kinetic typography history", "Nintendo-style", "精灵图动画", "像素动画", or "复古动画".
DeepseekModel
Curated skill
Quality Excellent · 90
v1.0.0
Get
https://deepseekmodel.com/api/download.php?id=nexu-io-open-design-design-templates-sprite-animation-skill-md&format=skill
Download .skill
Standard format with system_prompt and model_config, ready for any agent framework
The actual content of the system_prompt field in the .skill file.
name sprite-animation description A pixel / sprite-style animated explainer slide — full-bleed cream stage, bold display year, animated pixel-art mascot (e.g. Hanafuda card, mushroom, or 8-bit console), kinetic Japanese display type, ticking timeline ribbon. Reads like a single frame of an educational motion video — looping CSS keyframes, no JS, ready to be screen-recorded into a vertical video. Use when the brief asks for a "sprite animation", "pixel-art video", "8-bit explainer", "history of X explainer", "kinetic typography history", "Nintendo-style", "精灵图动画", "像素动画", or "复古动画". triggers ["sprite animation","pixel art animation","8-bit explainer","retro animation","kinetic typography","history explainer","nintendo style","精灵图","像素动画","复古动画"] od {"mode":"prototype","platform":"desktop","scenario":"marketing","preview":{"type":"html","entry":"index.html"},"design_system":{"requires":true,"sections":["color","typography","layout","components"]},"example_prompt":"Create a sprite-based animation introducing trivia about Nintendo's history. Combine pixel mascots, animated text, and a Hanafuda accent. Use color and type that feel like the Nintendo brand."} Sprite Animation Skill Produce a single animated frame of an educational explainer — the kind you might screen-record into a vertical video. Pixel-art mascots, big year display, looping CSS animations, kinetic Japanese / English display type. Workflow Read the active DESIGN.md (injected above). Pick the loudest serif token for the year, a sturdy sans for headlines, and a mono token for timeline / index labels. Pick the topic from the brief (e.g. "Nintendo · 1889 — Hanafuda"). You always need: a year, a one-line headline, an animated subject (a pixel sprite — character, object, or icon), and a short caption. Stage — full-bleed cream / off-white background ( #f5efe2 ) with a subtle paper grain. Keep margins generous; this is one beat of a video. Top bar — small mono row: Left: title slug ("名次の/番組" or "EP. 01 / NINTENDO") Right: progress dots ("01 / 12") and a "REC" stamp Subject animations — at least three independent looping animations on the page: Big year : the headline year (e.g. "1889年") fills the lower-left, in a serif display weight. It has a subtle vertical glitch / scanline animation (clip-path keyframes), and a 1-frame "pop" every loop. Pixel sprite card : a 96×128 pixel-art card or character (use an inline SVG with crisp shape-rendering: crispEdges rectangles, or a box-shadow pixel grid). Subtle bobbing animation (±4px, 1.6s). Kinetic kana : 1–2 Japanese / kanji characters that fade-and-slide in sync with the bob (e.g. "花" — hana — flower). Tick ribbon : bottom of the stage, a tape/ribbon with year ticks (1889 · 1907 · 1949 · 1977 · 1985 · 2006 · 2017) sliding left at a slow constant speed. Caption block — small mono caption explaining the trivia: "Nintendo started as a Hanafuda playing-card maker in Kyoto, 1889. Mario didn't show up for another ninety-six years." Write a single HTML document: <!doctype html> through </html> , CSS inline, no external JS. All animations use @keyframes + animation: ... infinite . Stage uses a fixed canvas ratio (e.g. 16:9 letterboxed) so the loop reads as a single frame from a video. data-od-id on stage, year, sprite, caption, and tick ribbon. Self-check : The page is one cohesive scene, not a collage. The eye lands on the year first, then the sprite, then the caption. At least 3 independent looping animations are visible. The color palette is restrained (cream + a single accent red + ink). No external assets — all sprites are inline SVG or CSS. Output contract Emit between <artifact> tags: <artifact identifier="sprite-anim-slug" type="text/html" title="Sprite animation — Title"> <!doctype html> <html>...</html> </artifact> One sentence before the artifact, nothing after.
Keywords that activate this skill. Click one to copy it.
This skill does not provide trigger words.
The downloaded .skill package contains the following fields.
| Field | Description |
|---|---|
| format | Format tag (skill/v1) |
| skill_id | Unique skill ID |
| name | Skill name |
| version | Version |
| description | Description |
| category | Categories (array) |
| trigger_words | Trigger words |
| tags | Tags |
| source | Source |
| source_url | Source URL (this page) |
| exported_at | Exported at (set per download) |
| system_prompt | System prompt body |
| model_config | Model config: provider / model / temperature / max_tokens / top_p |
| examples | Examples |
| install_guide | Import guide for Coze / Dify / Claude / custom frameworks |
The same skill can be exported in different platform formats.
