mirror of
https://github.com/nexu-io/open-design.git
synced 2026-07-07 23:09:34 +08:00
f6cceb303d
Picking a Home example-prompt card (or "Replicate this content" in the plugin detail modal) seeds the composer with the plugin manifest's `description`. Many descriptions were authored with cosmetic hard wraps (a single newline mid-paragraph, ~75 cols, as if formatted for a terminal/markdown source). The composer renders the seed with `white-space: pre-wrap`, so those newlines survived as short ragged lines that never filled the editor width — leaving a large blank gutter on the right of the input box (e.g. the Trading Analysis Dashboard template: 4 hard breaks, ~200px / 29% of the editor blank). Reflow the offending `description` / `description_i18n` strings in the 56 affected bundled manifests into flowing text (wrapped lines joined, real blank-line paragraph breaks preserved; CJK joins carry no space). Surgical string edits only — manifest formatting/key order untouched (146 lines changed across 56 files). The full build spec still reaches the agent as plugin context (SKILL.md + example.html); only the human-facing seed copy changed. Add an e2e guard (plugin-description-hardwrap.test.ts) that fails if any bundled manifest description carries an intra-paragraph hard wrap, so the cleanup can't silently regress when new examples are added.
131 lines
10 KiB
JSON
131 lines
10 KiB
JSON
{
|
||
"$schema": "https://open-design.ai/schemas/plugin.v1.json",
|
||
"specVersion": "1.0.0",
|
||
"name": "example-motion-frames",
|
||
"title": "Motion Frames",
|
||
"title_i18n": {
|
||
"zh-CN": "Motion Frames",
|
||
"zh-TW": "Motion Frames",
|
||
"ja": "Motion Frames",
|
||
"ko": "Motion Frames",
|
||
"de": "Motion Frames",
|
||
"fr": "Motion Frames",
|
||
"ru": "Motion Frames",
|
||
"es": "Motion Frames",
|
||
"pt-BR": "Motion Frames",
|
||
"it": "Motion Frames",
|
||
"vi": "Motion Frames",
|
||
"pl": "Motion Frames",
|
||
"id": "Motion Frames",
|
||
"nl": "Motion Frames",
|
||
"ar": "Motion Frames",
|
||
"tr": "Motion Frames",
|
||
"uk": "Motion Frames",
|
||
"en": "Motion Frames"
|
||
},
|
||
"version": "0.1.0",
|
||
"description": "A single-frame motion-design composition with looping CSS animations — rotating type ring, animated globe, ticking timer, parallax labels. Renders as a hero video poster you can hand straight to HyperFrames or any keyframe-based exporter. Use when the brief asks for \"motion design\", \"animated hero\", \"loop\", \"video poster\", \"title card\", or pairs Open Claude Design with HyperFrames for a kinetic export.",
|
||
"description_i18n": {
|
||
"zh-CN": "单帧动态设计合成，包含循环 CSS 动画——旋转文字环、动画地球、计时器、视差标签。渲染为视频封面海报，可直接导入 HyperFrames 或任何基于关键帧的导出工具。适用于动态设计、动画主视觉、循环视频、视频封面、标题卡等需求，搭配 HyperFrames 实现动态导出。",
|
||
"zh-TW": "單幀動態設計合成，包含循環 CSS 動畫——旋轉文字環、動畫地球、計時器、視差標籤。渲染為影片封面海報，可直接導入 HyperFrames 或任何基於關鍵影格的匯出工具。適用於動態設計、動畫主視覺、循環影片、影片封面、標題卡等需求，搭配 HyperFrames 實現動態匯出。",
|
||
"ja": "ループするCSS アニメーション（回転するテキストリング、アニメーション地球儀、タイマー、パララックスラベル）を含む単一フレームのモーションデザイン合成。HyperFrames や任意のキーフレームベースのエクスポーターに直接渡せるヒーロー動画ポスターとしてレンダリング。モーションデザイン、アニメーションヒーロー、ループ、動画ポスター、タイトルカードの要件に対応。",
|
||
"ko": "루핑 CSS 애니메이션(회전 텍스트 링, 애니메이션 지구본, 타이머, 패럴랙스 라벨)이 포함된 단일 프레임 모션 디자인 컴포지션. HyperFrames 또는 키프레임 기반 익스포터로 바로 전달할 수 있는 히어로 비디오 포스터로 렌더링. 모션 디자인, 애니메이션 히어로, 루프, 비디오 포스터, 타이틀 카드 요구사항에 적합.",
|
||
"de": "Einzel-Frame-Motion-Design-Komposition mit loopenden CSS-Animationen – rotierender Textring, animierter Globus, Timer, Parallax-Labels. Rendert als Hero-Video-Poster für HyperFrames oder jeden keyframe-basierten Exporter. Ideal für Motion Design, animierte Hero-Bereiche, Loops, Video-Poster und Titelkarten.",
|
||
"fr": "Composition de motion design en une seule image avec animations CSS en boucle – anneau de texte rotatif, globe animé, minuteur, labels parallaxe. Génère un poster vidéo hero utilisable directement dans HyperFrames ou tout exportateur à base de keyframes. Idéal pour le motion design, hero animé, boucle, poster vidéo et cartons de titre.",
|
||
"ru": "Однокадровая композиция motion-дизайна с зацикленными CSS-анимациями — вращающееся текстовое кольцо, анимированный глобус, таймер, параллакс-метки. Рендерится как постер hero-видео для HyperFrames или любого экспортера на основе ключевых кадров. Подходит для motion-дизайна, анимированных hero-секций, зацикленных видео и титульных карточек.",
|
||
"es": "Composición de motion design de un solo fotograma con animaciones CSS en bucle: anillo de texto giratorio, globo animado, temporizador, etiquetas parallax. Renderiza como póster de vídeo hero para HyperFrames o cualquier exportador basado en keyframes. Ideal para motion design, hero animado, loops, pósteres de vídeo y tarjetas de título.",
|
||
"pt-BR": "Composição de motion design de quadro único com animações CSS em loop — anel de texto rotativo, globo animado, timer, labels parallax. Renderiza como poster de vídeo hero para HyperFrames ou qualquer exportador baseado em keyframes. Ideal para motion design, hero animado, loops, posters de vídeo e cartões de título.",
|
||
"it": "Composizione motion design a fotogramma singolo con animazioni CSS in loop — anello di testo rotante, globo animato, timer, etichette parallax. Renderizza come poster video hero per HyperFrames o qualsiasi exporter basato su keyframe. Ideale per motion design, hero animati, loop, poster video e title card.",
|
||
"vi": "Tổng hợp thiết kế chuyển động đơn khung với hiệu ứng CSS lặp — vòng chữ xoay, quả địa cầu động, đồng hồ đếm, nhãn parallax. Render thành poster video hero cho HyperFrames hoặc công cụ xuất dựa trên keyframe. Phù hợp cho thiết kế chuyển động, hero động, video lặp, poster video và thẻ tiêu đề.",
|
||
"pl": "Jednokadowa kompozycja motion design z zapętlonymi animacjami CSS — obrotowy pierścień tekstu, animowany globus, timer, etykiety parallax. Renderuje jako poster wideo hero dla HyperFrames lub dowolnego eksportera opartego na klatkach kluczowych. Idealne do motion designu, animowanych sekcji hero, loopów, posterów wideo i kart tytułowych.",
|
||
"id": "Komposisi motion design frame tunggal dengan animasi CSS berulang — cincin teks berputar, globe animasi, timer, label parallax. Render sebagai poster video hero untuk HyperFrames atau eksporter berbasis keyframe. Cocok untuk motion design, hero animasi, loop, poster video, dan kartu judul.",
|
||
"nl": "Single-frame motion-design compositie met loopende CSS-animaties — roterende tekstcirkel, geanimeerde globe, timer, parallax labels. Rendert als hero video poster voor HyperFrames of elke keyframe-gebaseerde exporter. Ideaal voor motion design, geanimeerde hero's, loops, video posters en titelkaarten.",
|
||
"ar": "تكوين تصميم حركي بإطار واحد مع رسوم متحركة CSS متكررة — حلقة نص دوارة، كرة أرضية متحركة، مؤقت، تسميات parallax. يُعرض كملصق فيديو بطولي لـ HyperFrames أو أي أداة تصدير قائمة على الإطارات الرئيسية. مثالي لتصميم الحركة، البطل المتحرك، الحلقات، ملصقات الفيديو وبطاقات العنوان.",
|
||
"tr": "Döngüsel CSS animasyonlarıyla tek-kare motion design kompozisyonu — dönen yazı halkası, animasyonlu küre, zamanlayıcı, parallax etiketler. HyperFrames veya herhangi bir keyframe tabanlı dışa aktarıcı için hero video posteri olarak render eder. Motion design, animasyonlu hero, döngü, video posteri ve başlık kartları için idealdir.",
|
||
"uk": "Однокадрова композиція motion-дизайну із зацикленими CSS-анімаціями — обертове текстове кільце, анімований глобус, таймер, parallax-мітки. Рендериться як постер hero-відео для HyperFrames або будь-якого експортера на основі ключових кадрів. Підходить для motion-дизайну, анімованих hero-секцій, циклічного відео та титульних карток.",
|
||
"en": "A single-frame motion-design composition with looping CSS animations — rotating type ring, animated globe, ticking timer, parallax labels. Renders as a hero video poster you can hand straight to HyperFrames or any keyframe-based exporter. Use when the brief asks for \"motion design\", \"animated hero\", \"loop\", \"video poster\", \"title card\", or pairs Open Claude Design with HyperFrames for a kinetic export."
|
||
},
|
||
"license": "MIT",
|
||
"author": {
|
||
"name": "Open Design",
|
||
"url": "https://github.com/nexu-io"
|
||
},
|
||
"homepage": "https://github.com/nexu-io/open-design/tree/main/plugins/_official/examples/motion-frames",
|
||
"tags": [
|
||
"example",
|
||
"first-party",
|
||
"prototype",
|
||
"marketing",
|
||
"web",
|
||
"desktop",
|
||
"motion-design",
|
||
"motion-graphic",
|
||
"animated-hero",
|
||
"loop-animation",
|
||
"video-poster",
|
||
"title-card",
|
||
"hyperframes",
|
||
"kinetic-typography",
|
||
"untitled"
|
||
],
|
||
"compat": {
|
||
"agentSkills": [
|
||
{
|
||
"path": "./SKILL.md"
|
||
}
|
||
]
|
||
},
|
||
"od": {
|
||
"kind": "scenario",
|
||
"taskKind": "new-generation",
|
||
"mode": "prototype",
|
||
"platform": "desktop",
|
||
"scenario": "marketing",
|
||
"surface": "web",
|
||
"preview": {
|
||
"type": "html",
|
||
"entry": "./example.html"
|
||
},
|
||
"useCase": {
|
||
"query": {
|
||
"en": "Design an animated hero — a rotating type ring around a wireframe globe, with the headline ‘Reach every country.’ Loop at 12s, ready for HyperFrames export.",
|
||
"zh-CN": "使用这个插件完成以下任务：Design an animated hero — a rotating type ring around a wireframe globe, with the headline ‘Reach every country.’ Loop at 12s, ready for HyperFrames export."
|
||
},
|
||
"exampleOutputs": [
|
||
{
|
||
"path": "./example.html",
|
||
"title": "Motion Frames"
|
||
}
|
||
]
|
||
},
|
||
"context": {
|
||
"skills": [
|
||
{
|
||
"path": "./SKILL.md"
|
||
}
|
||
],
|
||
"designSystem": {
|
||
"primary": true
|
||
},
|
||
"assets": [
|
||
"./example.html"
|
||
]
|
||
},
|
||
"pipeline": {
|
||
"stages": [
|
||
{
|
||
"id": "generate",
|
||
"atoms": [
|
||
"file-write",
|
||
"live-artifact"
|
||
]
|
||
}
|
||
]
|
||
},
|
||
"capabilities": [
|
||
"prompt:inject",
|
||
"fs:write"
|
||
]
|
||
}
|
||
}
|