Add i18n metadata for official content (#2692)

This commit is contained in:
Siri-Ray 2026-05-22 16:39:32 +08:00 committed by GitHub
parent af66a929bc
commit e6da01e998
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
100 changed files with 1401 additions and 321 deletions

View file

@ -146,8 +146,12 @@ export function applyPlugin(input: ApplyInput): ApplyComputed {
autoAtom,
);
const pluginTitle = resolveLocalizedText(manifest.title_i18n, input.locale) || (manifest.title ?? manifest.name);
const pluginDescription =
resolveLocalizedText(manifest.description_i18n, input.locale) || manifest.description;
const projectMetadata: PluginProjectMetadataPatch = {
name: manifest.title ?? manifest.name,
name: pluginTitle,
taskKind,
};
const skillRef = pickFirstSkillId(manifest);
@ -187,8 +191,8 @@ export function applyPlugin(input: ApplyInput): ApplyComputed {
mcpServers,
pipeline: appliedPipeline,
genuiSurfaces,
pluginTitle: manifest.title ?? manifest.name,
pluginDescription: manifest.description,
pluginTitle,
pluginDescription,
query: queryText || undefined,
status: 'fresh',
};

View file

@ -3547,13 +3547,15 @@ export async function startServer({
bundledMarketplaceEntries = result.registered.map((plugin) => ({
name: `open-design/${plugin.id}`,
title: plugin.title,
description: plugin.description,
title_i18n: plugin.manifest.title_i18n,
description: plugin.manifest.description,
description_i18n: plugin.manifest.description_i18n,
version: plugin.version,
source: bundledPluginRegistrySource(plugin.source),
publisher: { id: 'open-design', url: 'https://open-design.ai' },
homepage: plugin.manifest.homepage,
license: plugin.manifest.license,
tags: plugin.tags,
tags: plugin.manifest.tags,
capabilitiesSummary: Array.isArray(plugin.manifest.od?.capabilities)
? plugin.manifest.od.capabilities
: undefined,

View file

@ -33,9 +33,15 @@ type JsonRecord = Record<string, unknown>;
interface SkillFrontmatter extends JsonRecord {
name?: unknown;
zh_name?: unknown;
en_name?: unknown;
description?: unknown;
zh_description?: unknown;
en_description?: unknown;
triggers?: unknown;
od?: JsonRecord & {
example_prompt?: unknown;
example_prompt_i18n?: unknown;
craft?: JsonRecord;
preview?: JsonRecord;
design_system?: JsonRecord;
@ -53,7 +59,9 @@ export type SkillSource = "user" | "built-in";
export interface SkillInfo {
id: string;
name: string;
displayName?: Record<string, string>;
description: string;
descriptionI18n?: Record<string, string>;
triggers: unknown[];
mode: SkillMode;
surface: SkillSurface;
@ -76,6 +84,7 @@ export interface SkillInfo {
speakerNotes: boolean | null;
animations: boolean | null;
examplePrompt: string;
examplePromptI18n?: Record<string, string>;
aggregatesExamples: boolean;
/**
* Per-skill Critique Theater override declared via `od.critique.policy`
@ -195,6 +204,12 @@ export async function listSkills(
: "html";
const description =
typeof data.description === "string" ? data.description : "";
const displayName = localizedMapFromFields(data.en_name, data.zh_name);
const descriptionI18n = localizedMapFromFields(
data.en_description,
data.zh_description,
);
const examplePromptI18n = localizedMapFromRecord(data.od?.example_prompt_i18n);
const parentBody = hasAttachments
? withSkillRootPreamble(body, dir)
: body;
@ -209,7 +224,9 @@ export async function listSkills(
out.push({
id: parentId,
name: parentId,
...(displayName ? { displayName } : {}),
description,
...(descriptionI18n ? { descriptionI18n } : {}),
triggers: Array.isArray(data.triggers) ? data.triggers : [],
mode,
surface,
@ -231,6 +248,7 @@ export async function listSkills(
speakerNotes: normalizeBoolHint(data.od?.speaker_notes),
animations: normalizeBoolHint(data.od?.animations),
examplePrompt: derivePrompt(data),
...(examplePromptI18n ? { examplePromptI18n } : {}),
aggregatesExamples,
critiquePolicy: normalizeCritiquePolicy(data.od?.critique?.policy),
body: parentBody,
@ -254,6 +272,7 @@ export async function listSkills(
id: derivedId,
name: humanizeExampleName(example.key),
description,
...(descriptionI18n ? { descriptionI18n } : {}),
triggers: Array.isArray(data.triggers) ? data.triggers : [],
mode,
surface,
@ -271,6 +290,7 @@ export async function listSkills(
speakerNotes: normalizeBoolHint(data.od?.speaker_notes),
animations: normalizeBoolHint(data.od?.animations),
examplePrompt: derivePrompt(data),
...(examplePromptI18n ? { examplePromptI18n } : {}),
aggregatesExamples: false,
// Derived cards inherit the parent's critique policy so a
// single SKILL.md that opts in (or out) applies the same
@ -501,6 +521,26 @@ function normalizeBoolHint(value: unknown): boolean | null {
return null;
}
function localizedMapFromFields(
enValue: unknown,
zhValue: unknown,
): Record<string, string> | undefined {
const out: Record<string, string> = {};
if (typeof enValue === "string" && enValue.trim()) out.en = enValue.trim();
if (typeof zhValue === "string" && zhValue.trim()) out["zh-CN"] = zhValue.trim();
return Object.keys(out).length > 0 ? out : undefined;
}
function localizedMapFromRecord(value: unknown): Record<string, string> | undefined {
if (!isRecord(value)) return undefined;
const out: Record<string, string> = {};
for (const [key, raw] of Object.entries(value)) {
if (typeof raw !== "string" || !raw.trim()) continue;
out[key] = raw.trim();
}
return Object.keys(out).length > 0 ? out : undefined;
}
/**
* Coerce `od.critique.policy` from SKILL.md frontmatter into the
* three-value union the rollout resolver expects. Anything unrecognised

View file

@ -75,6 +75,53 @@ function writeSkill(
}
describe('listSkills', () => {
it('surfaces optional localized display metadata from SKILL.md frontmatter', async () => {
const root = fresh();
try {
const dir = path.join(root, 'localized');
mkdirSync(dir, { recursive: true });
writeFileSync(
path.join(dir, 'SKILL.md'),
[
'---',
'name: localized',
'zh_name: "本地化技能"',
'en_name: "Localized Skill"',
'description: "English fallback description."',
'zh_description: "中文描述。"',
'en_description: "English localized description."',
'od:',
' example_prompt: "English fallback prompt."',
' example_prompt_i18n:',
' zh-CN: "中文 prompt。"',
'---',
'',
'# Localized skill body',
'',
].join('\n'),
);
const skills = await listSkills(root);
expect(skills[0]).toMatchObject({
id: 'localized',
displayName: {
en: 'Localized Skill',
'zh-CN': '本地化技能',
},
descriptionI18n: {
en: 'English localized description.',
'zh-CN': '中文描述。',
},
examplePrompt: 'English fallback prompt.',
examplePromptI18n: {
'zh-CN': '中文 prompt。',
},
});
} finally {
rmSync(root, { recursive: true, force: true });
}
});
it('includes the built-in live-artifact skill catalog entry', async () => {
const skills = await listSkills(designTemplatesRoot);
const skill = skills.find((entry: { id: string }) => entry.id === 'live-artifact');

View file

@ -8,8 +8,12 @@ import {
useState,
type ReactNode,
} from "react";
import { useT } from '../i18n';
import { useI18n, useT } from '../i18n';
import type { Dict } from '../i18n/types';
import {
localizeSkillDescription,
localizeSkillName,
} from '../i18n/content';
import { useAnalytics } from '../analytics/provider';
import {
trackChatPanelClick,
@ -2136,6 +2140,7 @@ function ToolsSkillsPanel({
currentSkillId: string | null;
onPick: (skill: SkillSummary) => void | Promise<void>;
}) {
const { locale } = useI18n();
const [query, setQuery] = useState('');
const [pendingId, setPendingId] = useState<string | null>(null);
const visibleSkills = useMemo(
@ -2176,11 +2181,11 @@ function ToolsSkillsPanel({
}
}}
disabled={pendingId !== null}
title={skill.description}
title={localizeSkillDescription(locale, skill)}
>
<Icon name={active ? 'check' : 'file'} size={12} />
<span className="composer-tools-row-body">
<strong>{skill.name}</strong>
<strong>{localizeSkillName(locale, skill)}</strong>
<span className="composer-tools-row-meta">
{skill.mode}
{skill.surface ? ` · ${skill.surface}` : ''}
@ -2419,6 +2424,7 @@ function MentionPopover({
onPickMcp: (server: McpServerConfig) => void;
onPickConnector: (connector: ConnectorDetail) => void;
}) {
const { locale } = useI18n();
const ref = useRef<HTMLDivElement | null>(null);
const [tab, setTab] = useState<MentionTab>('all');
const tabs: Array<{ id: MentionTab; label: string }> = [
@ -2506,13 +2512,13 @@ function MentionPopover({
type="button"
onMouseDown={(e) => e.preventDefault()}
onClick={() => onPickSkill(skill)}
title={skill.description}
title={localizeSkillDescription(locale, skill)}
>
<Icon name={active ? 'check' : 'file'} size={12} />
<span className="mention-item-body">
<strong>{skill.name}</strong>
<strong>{localizeSkillName(locale, skill)}</strong>
<span className="mention-meta mention-meta--desc">
{skill.description || skill.id}
{localizeSkillDescription(locale, skill) || skill.id}
</span>
</span>
<span className="mention-meta">{active ? 'Active' : skill.mode}</span>

View file

@ -2,6 +2,7 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
import { useI18n } from '../i18n';
import {
localizeSkillDescription,
localizeSkillName,
localizeSkillPrompt,
} from '../i18n/content';
import type { Dict } from '../i18n/types';
@ -318,9 +319,10 @@ export function ExamplesTab({ skills: rawSkills, onUsePrompt }: Props) {
if (!matchesSurface(s, surfaceFilter) || !matchesMode(s, modeFilter)) return false;
if (scenarioFilter !== 'all' && (s.scenario || 'general') !== scenarioFilter) return false;
if (!q) return true;
const name = localizeSkillName(locale, s);
const desc = localizeSkillDescription(locale, s);
const prompt = localizeSkillPrompt(locale, s) || '';
const haystack = `${s.name} ${desc} ${prompt} ${s.scenario ?? ''}`.toLowerCase();
const haystack = `${name} ${s.name} ${desc} ${prompt} ${s.scenario ?? ''}`.toLowerCase();
return haystack.includes(q);
});
// Featured magazine-style examples float to the top (lower priority
@ -457,7 +459,7 @@ export function ExamplesTab({ skills: rawSkills, onUsePrompt }: Props) {
const unavailableKind = previewUnavailable[previewSkill.id];
return (
<PreviewModal
title={previewSkill.name}
title={localizeSkillName(locale, previewSkill)}
subtitle={
localizeSkillPrompt(locale, previewSkill)
?? localizeSkillDescription(locale, previewSkill).slice(0, 160)
@ -483,7 +485,7 @@ export function ExamplesTab({ skills: rawSkills, onUsePrompt }: Props) {
// the Retry button reaches loadPreview through the same handler.
// Issue #860.
onView={onPreviewView}
exportTitleFor={() => previewSkill.name}
exportTitleFor={() => localizeSkillName(locale, previewSkill)}
onClose={() => setPreviewSkillId(null)}
/>
);
@ -568,7 +570,8 @@ function ExampleCard({
};
}, [shareOpen]);
const exportTitle = skill.name;
const displayName = localizeSkillName(locale, skill);
const exportTitle = displayName;
const isMobile = skill.platform === 'mobile';
const isDeck = skill.mode === 'deck';
const displayPrompt = localizeSkillPrompt(locale, skill);
@ -601,7 +604,7 @@ function ExampleCard({
{html ? (
<>
<iframe
title={`${skill.name} ${t('examples.previewLabel').toLowerCase()}`}
title={`${displayName} ${t('examples.previewLabel').toLowerCase()}`}
sandbox="allow-scripts"
srcDoc={buildSrcdoc(html)}
tabIndex={-1}
@ -631,7 +634,7 @@ function ExampleCard({
)}
</div>
<div className="example-meta">
<div className="example-name">{skill.name}</div>
<div className="example-name">{displayName}</div>
<div className="example-tags">
<span className={`example-tag ${isMobile ? 'platform-mobile' : ''} ${isDeck ? 'mode-deck' : ''}`}>
{tagForSkill(skill, t)}

View file

@ -47,6 +47,10 @@ import {
} from '../utils/inlineMentions';
import { useI18n, useT } from '../i18n';
import type { Locale } from '../i18n/types';
import {
localizeSkillDescription,
localizeSkillName,
} from '../i18n/content';
import { PreviewSurface } from './plugins-home/cards/PreviewSurface';
import { curatedPluginPriorityForChip } from './plugins-home/curatedPriority';
import { inferPluginPreview } from './plugins-home/preview';
@ -274,8 +278,8 @@ export const HomeHero = forwardRef<HTMLTextAreaElement, Props>(function HomeHero
options: skillMatches.map((skill) => ({
id: `skill-${skill.id}`,
icon: skill.id === activeSkillId ? 'check' : 'file',
title: skill.name,
description: skill.description || skill.id,
title: localizeSkillName(locale, skill),
description: localizeSkillDescription(locale, skill) || skill.id,
meta: skill.id === activeSkillId ? t('common.active') : skill.mode,
onPick: () => pickSkill(skill),
})),

View file

@ -36,6 +36,10 @@ import {
} from '../state/projects';
import { fetchMcpServers } from '../state/mcp';
import { useI18n } from '../i18n';
import {
localizeSkillName,
localizeSkillPrompt,
} from '../i18n/content';
import { fetchElevenLabsVoiceOptions } from '../providers/elevenlabs-voices';
import { fetchProjectFiles, projectFileUrl } from '../providers/registry';
import type {
@ -991,7 +995,7 @@ export function HomeView({
setFallbackProjectKind(null);
setFallbackProjectMetadata(null);
setError(null);
const replacement = nextPrompt ?? skill.examplePrompt ?? '';
const replacement = nextPrompt ?? localizeSkillPrompt(locale, skill) ?? '';
if (replacement.trim().length > 0) {
setPrompt(replacement);
setPromptEditedByUser(false);
@ -1269,7 +1273,7 @@ export function HomeView({
activePluginTitle={activeBadgeTitle}
activePluginRecord={active?.record ?? null}
activeSkillId={activeSkill?.id ?? null}
activeSkillTitle={activeSkill?.name ?? null}
activeSkillTitle={activeSkill ? localizeSkillName(locale, activeSkill) : null}
activeChipId={active?.chipId ?? null}
showActivePluginChip={showActivePluginChip}
onClearActivePlugin={clearActivePlugin}

View file

@ -16,11 +16,12 @@
import { useState } from 'react';
import type { InstalledPluginRecord } from '@open-design/contracts';
import { useT } from '../i18n';
import { useI18n, useT } from '../i18n';
import type { PluginShareAction } from '../state/projects';
import { Icon } from './Icon';
import { PluginCard } from './plugins-home/PluginCard';
import { isFeaturedPlugin, type FacetOption, type FacetSelection } from './plugins-home/facets';
import { localizePluginTitle } from './plugins-home/localization';
import { usePluginFacets } from './plugins-home/usePluginFacets';
import { useSavedPluginIds } from './plugins-home/savedPlugins';
import type { PluginUseAction } from './plugins-home/useActions';
@ -67,7 +68,7 @@ export function PluginsHomeSection({
subtitle,
emptyMessage,
}: Props) {
const t = useT();
const { locale, t } = useI18n();
const { savedPluginIds, savePluginId } = useSavedPluginIds();
const [saveToast, setSaveToast] = useState<string | null>(null);
const {
@ -89,14 +90,16 @@ export function PluginsHomeSection({
savedPluginIds,
preferDefaultFacet,
presetSelection,
locale,
});
function handleSavePlugin(record: InstalledPluginRecord): void {
const result = savePluginId(record.id);
const title = localizePluginTitle(locale, record);
if (result === 'saved') {
setSaveToast(`Saved ${record.title}.`);
setSaveToast(`Saved ${title}.`);
} else if (result === 'already-saved') {
setSaveToast(`${record.title} is already saved.`);
setSaveToast(`${title} is already saved.`);
} else {
setSaveToast('Could not save this plugin in this browser.');
}

View file

@ -1,6 +1,10 @@
import { useCallback, useEffect, useMemo, useState } from 'react';
import type { Dispatch, SetStateAction } from 'react';
import { useT } from '../i18n';
import { useI18n, useT } from '../i18n';
import {
localizeSkillDescription,
localizeSkillName,
} from '../i18n/content';
import { Icon } from './Icon';
import type { AppConfig } from '../types';
import type { SkillSummary } from '@open-design/contracts';
@ -558,7 +562,9 @@ function SkillRow({
onSubmitEdit,
}: SkillRowProps) {
const t = useT();
const summaryName = skill.name || skill.id;
const { locale } = useI18n();
const summaryName = localizeSkillName(locale, skill) || skill.id;
const summaryDescription = localizeSkillDescription(locale, skill);
const canDelete = skill.source === 'user';
return (
<div
@ -599,8 +605,8 @@ function SkillRow({
</span>
) : null}
</span>
{skill.description ? (
<span className="skills-row-summary-desc">{skill.description}</span>
{summaryDescription ? (
<span className="skills-row-summary-desc">{summaryDescription}</span>
) : null}
</span>
<span className="skills-row-chevron" aria-hidden>

View file

@ -14,10 +14,12 @@
import { useMemo, useState } from 'react';
import type { InstalledPluginRecord } from '@open-design/contracts';
import { useI18n } from '../../i18n';
import type { PluginShareAction } from '../../state/projects';
import { Icon } from '../Icon';
import { TrustBadge } from '../TrustBadge';
import { PreviewSurface } from './cards/PreviewSurface';
import { localizePluginDescription, localizePluginTitle } from './localization';
import { inferPluginPreview } from './preview';
import type { PluginUseAction } from './useActions';
@ -53,9 +55,11 @@ export function PluginCard({
onSave,
onShareAction,
}: Props) {
const { locale } = useI18n();
const [useMenuOpen, setUseMenuOpen] = useState(false);
const preview = useMemo(() => inferPluginPreview(record), [record]);
const description = record.manifest?.description ?? '';
const title = localizePluginTitle(locale, record);
const description = localizePluginDescription(locale, record);
const tags = useMemo(
() =>
(record.manifest?.tags ?? [])
@ -92,7 +96,7 @@ export function PluginCard({
>
<PreviewSurface
pluginId={record.id}
pluginTitle={record.title}
pluginTitle={title}
preview={preview}
/>
@ -106,8 +110,8 @@ export function PluginCard({
) : null}
</div>
<div className="plugins-home__card-overlay-body">
<span className="plugins-home__overlay-title" title={record.title}>
{record.title}
<span className="plugins-home__overlay-title" title={title}>
{title}
</span>
{description ? (
<p className="plugins-home__overlay-desc">{description}</p>
@ -128,7 +132,7 @@ export function PluginCard({
type="button"
className="plugins-home__action plugins-home__action--secondary"
onClick={() => onOpenDetails(record)}
aria-label={`View details for ${record.title}`}
aria-label={`View details for ${title}`}
data-testid={`plugins-home-details-${record.id}`}
>
<Icon name="eye" size={12} />
@ -162,7 +166,7 @@ export function PluginCard({
disabled={useDisabled}
aria-haspopup="menu"
aria-expanded={useMenuOpen}
aria-label={`Choose how to use ${record.title}`}
aria-label={`Choose how to use ${title}`}
data-testid={`plugins-home-use-menu-${record.id}`}
>
<Icon name="chevron-down" size={13} />
@ -171,7 +175,7 @@ export function PluginCard({
<div
className="plugins-home__use-menu-list"
role="menu"
aria-label={`Use options for ${record.title}`}
aria-label={`Use options for ${title}`}
>
<button
type="button"
@ -202,7 +206,7 @@ export function PluginCard({
{onShareAction ? (
<div
className="plugins-home__share-actions"
aria-label={`Share ${record.title}`}
aria-label={`Share ${title}`}
>
<button
type="button"
@ -210,7 +214,7 @@ export function PluginCard({
onClick={() => onShareAction(record, 'publish-github')}
disabled={pendingAny || shareBusy}
aria-busy={sharePendingAction === 'publish-github' ? 'true' : undefined}
aria-label={`Publish ${record.title} as a GitHub repository`}
aria-label={`Publish ${title} as a GitHub repository`}
title="Publish plugin as a GitHub repository"
data-testid={`plugins-home-publish-github-${record.id}`}
>
@ -226,7 +230,7 @@ export function PluginCard({
onClick={() => onShareAction(record, 'contribute-open-design')}
disabled={pendingAny || shareBusy}
aria-busy={sharePendingAction === 'contribute-open-design' ? 'true' : undefined}
aria-label={`Contribute ${record.title} to Open Design`}
aria-label={`Contribute ${title} to Open Design`}
title="Contribute plugin to Open Design with a pull request"
data-testid={`plugins-home-contribute-open-design-${record.id}`}
>
@ -252,15 +256,15 @@ export function PluginCard({
.join(' ')}
onClick={() => onSave(record)}
aria-pressed={isSaved}
aria-label={`${isSaved ? 'Saved' : 'Save'} ${record.title}`}
aria-label={`${isSaved ? 'Saved' : 'Save'} ${title}`}
title={isSaved ? 'Saved' : 'Save'}
data-testid={`plugins-home-save-${record.id}`}
>
<Icon name={isSaved ? 'check' : 'star'} size={12} />
<span className="sr-only">{isSaved ? 'Saved' : 'Save'}</span>
</button>
<span className="plugins-home__card-title" title={record.title}>
<span className="plugins-home__card-title-text">{record.title}</span>
<span className="plugins-home__card-title" title={title}>
<span className="plugins-home__card-title-text">{title}</span>
</span>
<TrustBadge trust={record.trust} />
</div>

View file

@ -18,8 +18,9 @@
// clicks make the row visually noisy and obscure how the overall
// catalog is shaped.
import type { InstalledPluginRecord } from '@open-design/contracts';
import { resolveLocalizedText, type InstalledPluginRecord } from '@open-design/contracts';
import { CURATED_LIVE_ARTIFACT_PLUGIN_IDS } from './curatedPriority';
import { localizedText } from './localization';
export type FacetAxis = 'category' | 'subcategory';
@ -614,6 +615,7 @@ export function isFeaturedPlugin(record: InstalledPluginRecord): boolean {
export function filterByQuery(
plugins: InstalledPluginRecord[],
query: string,
locale?: string,
): InstalledPluginRecord[] {
const q = query.trim().toLowerCase();
if (!q) return plugins;
@ -622,8 +624,10 @@ export function filterByQuery(
return plugins.filter((p) => {
const haystack = [
p.title ?? '',
resolveLocalizedText(localizedText(p.manifest?.title_i18n), locale),
p.id,
p.manifest?.description ?? '',
resolveLocalizedText(localizedText(p.manifest?.description_i18n), locale),
(p.manifest?.tags ?? []).join(' '),
]
.join(' ')

View file

@ -0,0 +1,24 @@
import {
resolveLocalizedText,
type InstalledPluginRecord,
type LocalizedText,
} from '@open-design/contracts';
export function localizePluginTitle(locale: string, record: InstalledPluginRecord): string {
return resolveLocalizedText(localizedText(record.manifest?.title_i18n), locale) || record.title;
}
export function localizePluginDescription(locale: string, record: InstalledPluginRecord): string {
return resolveLocalizedText(localizedText(record.manifest?.description_i18n), locale)
|| record.manifest?.description
|| '';
}
export function localizedText(value: unknown): LocalizedText | undefined {
if (typeof value === 'string') return value;
if (!value || typeof value !== 'object' || Array.isArray(value)) return undefined;
const entries = Object.entries(value as Record<string, unknown>);
if (entries.length === 0) return undefined;
if (!entries.every(([, text]) => typeof text === 'string')) return undefined;
return Object.fromEntries(entries) as Record<string, string>;
}

View file

@ -36,6 +36,7 @@ interface UsePluginFacetsArgs {
// still click a different category afterwards without the effect
// snapping back on every re-render.
presetSelection?: FacetSelection | null;
locale?: string;
}
export interface UsePluginFacetsResult {
@ -65,6 +66,7 @@ export function usePluginFacets({
savedPluginIds,
preferDefaultFacet = true,
presetSelection = null,
locale,
}: UsePluginFacetsArgs): UsePluginFacetsResult {
const [mode, setMode] = useState<FilterMode>('all');
const [selection, setSelection] = useState<FacetSelection>(EMPTY_SELECTION);
@ -137,8 +139,8 @@ export function usePluginFacets({
mode === 'saved'
? savedList
: applyFacetSelection(visiblePlugins, selection);
return filterByQuery(base, query);
}, [mode, savedList, visiblePlugins, selection, query]);
return filterByQuery(base, query, locale);
}, [mode, savedList, visiblePlugins, selection, query, locale]);
function pickCategory(slug: string | null): void {
if (mode === 'saved') setMode('all');

View file

@ -1012,15 +1012,44 @@ function normalizeText(text: string): string {
return text.replace(/\s+/g, ' ').trim();
}
function localizedRecordValue(
locale: Locale,
values: Record<string, string> | undefined,
options: { includeEnglishFallback?: boolean } = {},
): string | undefined {
if (!values) return undefined;
if (values[locale]) return values[locale];
if (locale === 'zh-TW' && values['zh-CN']) return values['zh-CN'];
if (locale.startsWith('zh') && values['zh-CN']) return values['zh-CN'];
if (options.includeEnglishFallback !== false && values.en) return values.en;
return undefined;
}
export function localizeSkillName(locale: Locale, skill: SkillSummary): string {
return localizedRecordValue(locale, skill.displayName) ?? skill.name;
}
export function localizeSkillPrompt(locale: Locale, skill: SkillSummary): string | undefined {
const inline = localizedRecordValue(locale, skill.examplePromptI18n, {
includeEnglishFallback: false,
});
if (inline) return inline;
const translated = getLocalizedContent(locale)?.skillCopy[skill.id]?.examplePrompt;
if (translated) return translated;
const fallback = localizedRecordValue(locale, skill.examplePromptI18n);
if (fallback) return fallback;
return skill.examplePrompt ? normalizeText(skill.examplePrompt) : undefined;
}
export function localizeSkillDescription(locale: Locale, skill: SkillSummary): string {
const inline = localizedRecordValue(locale, skill.descriptionI18n, {
includeEnglishFallback: false,
});
if (inline) return inline;
const translated = getLocalizedContent(locale)?.skillCopy[skill.id]?.description;
if (translated) return translated;
const fallback = localizedRecordValue(locale, skill.descriptionI18n);
if (fallback) return fallback;
return normalizeText(skill.description);
}

View file

@ -15,10 +15,14 @@ import { cleanup, fireEvent, render, screen, within } from '@testing-library/rea
import type { InstalledPluginRecord } from '@open-design/contracts';
import type { ComponentProps } from 'react';
import { PluginsHomeSection } from '../../src/components/PluginsHomeSection';
import { I18nProvider } from '../../src/i18n';
function makePlugin(overrides: {
id: string;
title?: string;
titleI18n?: Record<string, string>;
description?: string;
descriptionI18n?: Record<string, string>;
tags?: string[];
featured?: boolean;
mode?: string;
@ -36,6 +40,9 @@ function makePlugin(overrides: {
name: overrides.id,
version: '0.1.0',
title: overrides.title ?? overrides.id,
...(overrides.titleI18n ? { title_i18n: overrides.titleI18n } : {}),
...(overrides.description ? { description: overrides.description } : {}),
...(overrides.descriptionI18n ? { description_i18n: overrides.descriptionI18n } : {}),
...(overrides.tags ? { tags: overrides.tags } : {}),
od: {
kind: overrides.kind ?? 'scenario',
@ -66,6 +73,25 @@ function renderSection(
);
}
function renderSectionInChinese(
plugins: InstalledPluginRecord[] = sample,
props: Partial<ComponentProps<typeof PluginsHomeSection>> = {},
) {
return render(
<I18nProvider initial="zh-CN">
<PluginsHomeSection
plugins={plugins}
loading={false}
activePluginId={null}
pendingApplyId={null}
onUse={() => {}}
onOpenDetails={() => {}}
{...props}
/>
</I18nProvider>,
);
}
function pluginIds(): Array<string | null> {
return within(screen.getByRole('list'))
.getAllByRole('listitem')
@ -191,6 +217,31 @@ describe('PluginsHomeSection (category bar)', () => {
expect(pluginIds()).toEqual(['prototype-dashboard']);
});
it('localizes plugin card titles, descriptions, search, and save toast', () => {
renderSectionInChinese([
makePlugin({
id: 'localized-deck',
title: 'Swiss International Deck',
titleI18n: { en: 'Swiss International Deck', 'zh-CN': '瑞士国际主义 Deck' },
description: '16-column grid.',
descriptionI18n: { en: '16-column grid.', 'zh-CN': '16 列网格。' },
mode: 'deck',
tags: ['grid'],
}),
], { preferDefaultFacet: false });
expect(screen.getAllByText('瑞士国际主义 Deck').length).toBeGreaterThan(0);
expect(screen.queryByText('Swiss International Deck')).toBeNull();
fireEvent.change(screen.getByPlaceholderText('搜索插件…'), {
target: { value: '瑞士' },
});
expect(pluginIds()).toEqual(['localized-deck']);
fireEvent.click(screen.getByTestId('plugins-home-save-localized-deck'));
expect(screen.getByRole('status').textContent).toContain('Saved 瑞士国际主义 Deck.');
});
it('shows the normal empty-filter state for planned empty buckets', () => {
renderSection();

View file

@ -5,6 +5,7 @@ import {
localizeDesignSystemSummary,
localizePromptTemplateSummary,
localizeSkillDescription,
localizeSkillName,
localizeSkillPrompt,
} from '../../src/i18n/content';
@ -23,7 +24,7 @@ describe('localized resource content', () => {
id: 'blog-post',
examplePrompt: ' English prompt from source. ',
description: ' English description from source. ',
} as SkillSummary;
} as unknown as SkillSummary;
expect(localizeSkillPrompt('fr', partiallyLocalizedSkill)).toBe(
'Un article long-form / blog post — masthead, placeholder dimage hero, corps darticle avec figures et pull quotes, ligne auteur, articles associés.',
@ -33,6 +34,35 @@ describe('localized resource content', () => {
);
});
it('uses inline skill display metadata before falling back to source fields', () => {
const inlineSkill = {
id: 'inline-skill',
name: 'inline-skill',
displayName: {
en: 'Inline Skill',
'zh-CN': '内联技能',
},
description: ' English description from source. ',
descriptionI18n: {
en: 'English inline description.',
'zh-CN': '中文内联描述。',
},
examplePrompt: ' English prompt from source. ',
examplePromptI18n: {
en: 'English inline prompt.',
'zh-CN': '中文内联 prompt。',
},
} as unknown as SkillSummary;
expect(localizeSkillName('zh-CN', inlineSkill)).toBe('内联技能');
expect(localizeSkillName('zh-TW', inlineSkill)).toBe('内联技能');
expect(localizeSkillName('fr', inlineSkill)).toBe('Inline Skill');
expect(localizeSkillDescription('zh-CN', inlineSkill)).toBe('中文内联描述。');
expect(localizeSkillDescription('fr', inlineSkill)).toBe('English inline description.');
expect(localizeSkillPrompt('zh-CN', inlineSkill)).toBe('中文内联 prompt。');
expect(localizeSkillPrompt('fr', inlineSkill)).toBe('English inline prompt.');
});
it('falls back to english design system summaries when localized copy is missing', () => {
const englishOnlySystem = {
id: 'agentic',

View file

@ -225,8 +225,13 @@ Rules of authorship:
"specVersion": "1.0.0",
"name": "make-a-deck",
"title": "Make a deck",
"title_i18n": { "en": "Make a deck", "zh-CN": "制作 Deck" },
"version": "1.0.0",
"description": "Generate a 12-slide investor deck from a one-line brief.",
"description_i18n": {
"en": "Generate a 12-slide investor deck from a one-line brief.",
"zh-CN": "根据一句 brief 生成 12 页投资人 deck。"
},
"author": { "name": "Open Design", "url": "https://open-design.ai" },
"license": "MIT",
"homepage": "https://github.com/open-design/plugins/make-a-deck",
@ -349,6 +354,7 @@ Rules of authorship:
- `compat.*` — relative paths to inherited files. The loader concatenates their content into the OD prompt stack assembled by [`composeSystemPrompt()`](../apps/daemon/src/prompts/system.ts).
- `specVersion` — the Open Design plugin spec version used to interpret the manifest. This is distinct from plugin `version` and is frozen into apply snapshots for replay.
- `version` — the plugin package version. Bump it whenever behavior, metadata, pipeline, inputs, or bundled assets change in a way users may need to audit.
- `title_i18n` / `description_i18n` — optional localized display metadata. Keep `title` and `description` as English fallbacks; UI surfaces resolve requested locale, base language, English, then the first available value.
- `od.kind` — registry classification (`skill` / `scenario` / `atom` / `bundle`).
- `od.taskKind` — one of the four product scenarios (`new-generation` / `code-migration` / `figma-migration` / `tune-collab`, see §1 "Four product scenarios"). Drives marketplace filters, default input templates, and the recommended pipeline starting point.
- `od.preview` — drives the marketplace card and detail page. `entry` is served sandboxed via the daemon (the existing `/api/skills/:id/example` plumbing extended to plugins).

View file

@ -225,8 +225,13 @@ my-plugin/
"specVersion": "1.0.0",
"name": "make-a-deck",
"title": "Make a deck",
"title_i18n": { "en": "Make a deck", "zh-CN": "制作 Deck" },
"version": "1.0.0",
"description": "Generate a 12-slide investor deck from a one-line brief.",
"description_i18n": {
"en": "Generate a 12-slide investor deck from a one-line brief.",
"zh-CN": "根据一句 brief 生成 12 页投资人 deck。"
},
"author": { "name": "Open Design", "url": "https://open-design.ai" },
"license": "MIT",
"homepage": "https://github.com/open-design/plugins/make-a-deck",
@ -349,6 +354,7 @@ my-plugin/
- `compat.*`指向继承格式文件的相对路径。loader 会把它们的内容合并进 [`composeSystemPrompt()`](../apps/daemon/src/prompts/system.ts) 组装出的 OD prompt stack。
- `specVersion`:解释此 manifest 时使用的 Open Design 插件规范版本。它独立于插件 `version`,并会冻结到 apply snapshot便于 replay。
- `version`插件包自身版本。只要行为、元数据、pipeline、inputs 或随包 assets 出现用户需要审计的变化,就应该 bump。
- `title_i18n` / `description_i18n`:可选本地化展示元数据。`title` 和 `description` 保持英文 fallbackUI 会按请求 locale、基础语言、英文、首个可用值的顺序解析。
- `od.kind`registry 里的分类(`skill` / `scenario` / `atom` / `bundle`)。
- `od.taskKind`:四类产品场景之一(`new-generation` / `code-migration` / `figma-migration` / `tune-collab`§1「四类产品场景」。决定 marketplace filter、初始 inputs 模板、推荐 pipeline 起点。
- `od.preview`:驱动 marketplace 卡片和详情页。`entry` 通过 daemon 以 sandboxed 方式服务(扩展现有 `/api/skills/:id/example` plumbing

View file

@ -113,11 +113,20 @@
"yankReason": { "type": "string" },
"tags": { "type": "array", "items": { "type": "string" } },
"title": { "type": "string" },
"title_i18n": { "$ref": "#/$defs/LocalizedText" },
"description": { "type": "string" },
"description_i18n": { "$ref": "#/$defs/LocalizedText" },
"icon": { "type": "string" }
},
"additionalProperties": true
}
}
},
"$defs": {
"LocalizedText": {
"type": "object",
"minProperties": 1,
"additionalProperties": { "type": "string" }
}
}
}

View file

@ -11,8 +11,10 @@
"specVersion": { "type": "string", "minLength": 1 },
"name": { "type": "string", "minLength": 1, "pattern": "^[a-z0-9][a-z0-9._-]*$" },
"title": { "type": "string", "minLength": 1 },
"title_i18n": { "$ref": "#/$defs/LocalizedText" },
"version": { "type": "string", "minLength": 1 },
"description": { "type": "string" },
"description_i18n": { "$ref": "#/$defs/LocalizedText" },
"author": {
"type": "object",
"properties": {

View file

@ -192,6 +192,7 @@ The `e2e/tests/localized-content.test.ts` test enforces that every directory und
For a non-featured skill, the cheap path is to keep the source metadata complete:
- [ ] **Ensure `SKILL.md` has complete English display copy**: title/name, description, example prompt, and any picker metadata required by the skill schema. The localized runtime uses these fields as the fallback display path.
- [ ] **Use optional localized display fields when useful**: `en_name` / `zh_name`, `en_description` / `zh_description`, and `od.example_prompt_i18n.<locale>`. Keep `description` and `od.example_prompt` in English because those are the fallback fields for every locale without localized copy.
- [ ] **Run `pnpm --filter @open-design/web test` and `pnpm --filter @open-design/e2e test tests/localized-content.test.ts`** locally before pushing. These suites catch undisplayable discovered resources and verify localized fallback behavior.
### Featured skills (optional path)

View file

@ -30,9 +30,15 @@ Every skill is a directory containing at minimum a `SKILL.md`:
```yaml
---
name: magazine-web-ppt
zh_name: "杂志风网页 PPT"
en_name: "Magazine Web PPT"
description: |
Magazine-style horizontal-swipe web deck.
Trigger keywords: 杂志风 PPT, magazine deck, swipe slides.
zh_description: "杂志风横向翻页网页 PPT。"
en_description: |
Magazine-style horizontal-swipe web deck.
Trigger keywords: 杂志风 PPT, magazine deck, swipe slides.
triggers:
- "magazine deck"
- "杂志风 PPT"
@ -62,6 +68,9 @@ od:
type: html # html | jsx | pptx | markdown
entry: index.html # relative path produced by the skill
reload: debounce-100 # how the preview refreshes
example_prompt: "Create a magazine-style web deck from my content."
example_prompt_i18n:
zh-CN: "用杂志风网页 PPT 模板把我的内容做成横向翻页 deck。"
design_system:
requires: true # this skill reads the active DESIGN.md
sections: [color, typography] # which sections it actually uses (for prompt pruning)
@ -102,8 +111,12 @@ od:
| Field | Used by |
|---|---|
| `zh_name` / `en_name` | localized picker title; falls back to `name` |
| `zh_description` / `en_description` | localized picker description; falls back to `description` |
| `od.mode` | routing (which mode picker the skill shows up under) |
| `od.preview.type` | picking the right iframe renderer |
| `od.example_prompt` | English fallback starter prompt used by picker CTA |
| `od.example_prompt_i18n` | localized starter prompt map (for example `zh-CN`) |
| `od.design_system.requires` | whether to inject `DESIGN.md` |
| `od.design_system.sections` | pruning the injected DESIGN.md to relevant sections only (token savings) |
| `od.craft.requires` | which brand-agnostic `craft/<slug>.md` references to inject (e.g. `typography`, `color`, `anti-ai-slop`); injected between DESIGN.md and the skill body |

View file

@ -43,7 +43,9 @@ export type SkillSource = 'built-in' | 'user';
export interface SkillSummary {
id: string;
name: string;
displayName?: Record<string, string>;
description: string;
descriptionI18n?: Record<string, string>;
triggers: string[];
mode:
| 'prototype'
@ -77,6 +79,7 @@ export interface SkillSummary {
craftRequires?: string[];
hasBody: boolean;
examplePrompt: string;
examplePromptI18n?: Record<string, string>;
// True when this skill exists only to group derived `<parent>:<child>`
// example cards. The Examples gallery hides such cards because their
// preview would duplicate one of the derived cards and add no extra

View file

@ -141,8 +141,10 @@ export const PluginManifestSchema = z.object({
specVersion: OpenDesignSpecVersionSchema.optional(),
name: z.string().min(1).regex(/^[a-z0-9][a-z0-9._-]*$/),
title: z.string().optional(),
title_i18n: LocalizedTextSchema.optional(),
version: z.string().min(1),
description: z.string().optional(),
description_i18n: LocalizedTextSchema.optional(),
author: z.object({
name: z.string().optional(),
url: z.string().optional(),

View file

@ -1,5 +1,6 @@
import { z } from 'zod';
import {
LocalizedTextSchema,
OPEN_DESIGN_PLUGIN_SPEC_VERSION,
OpenDesignSpecVersionSchema,
} from './manifest.js';
@ -54,7 +55,9 @@ export const MarketplacePluginEntrySchema = z.object({
yankReason: z.string().optional(),
tags: z.array(z.string()).optional(),
title: z.string().optional(),
title_i18n: LocalizedTextSchema.optional(),
description: z.string().optional(),
description_i18n: LocalizedTextSchema.optional(),
icon: z.string().optional(),
}).passthrough();

View file

@ -1,9 +1,10 @@
import { describe, expect, it } from 'vitest';
import {
OPEN_DESIGN_PLUGIN_SPEC_VERSION,
MarketplacePluginEntrySchema,
PluginManifestSchema,
resolveLocalizedText,
} from '../src/plugins/manifest.js';
} from '../src/plugins/index.js';
describe('plugin manifest localized text', () => {
it('exports the current plugin spec version for manifests and registries', () => {
@ -43,6 +44,47 @@ describe('plugin manifest localized text', () => {
);
});
it('accepts localized title and description metadata', () => {
const manifest = PluginManifestSchema.parse({
name: 'sample-plugin',
version: '1.0.0',
title: 'Sample Plugin',
title_i18n: {
en: 'Sample Plugin',
'zh-CN': '示例插件',
},
description: 'English fallback.',
description_i18n: {
en: 'English fallback.',
'zh-CN': '中文描述。',
},
});
expect(resolveLocalizedText(manifest.title_i18n, 'zh-CN')).toBe('示例插件');
expect(resolveLocalizedText(manifest.description_i18n, 'zh-CN')).toBe('中文描述。');
});
it('accepts localized marketplace entry metadata', () => {
const entry = MarketplacePluginEntrySchema.parse({
name: 'open-design/example-sample',
source: 'github:open-design/plugins/examples/sample',
version: '1.0.0',
title: 'Sample',
title_i18n: {
en: 'Sample',
'zh-CN': '示例',
},
description: 'English fallback.',
description_i18n: {
en: 'English fallback.',
'zh-CN': '中文描述。',
},
});
expect(resolveLocalizedText(entry.title_i18n, 'zh-CN')).toBe('示例');
expect(resolveLocalizedText(entry.description_i18n, 'zh-CN')).toBe('中文描述。');
});
it('falls back from exact locale to base language, English, then first value', () => {
expect(resolveLocalizedText({ en: 'English', zh: '中文' }, 'zh-CN')).toBe('中文');
expect(resolveLocalizedText({ 'zh-CN': '中文' }, 'fr')).toBe('中文');

View file

@ -4,6 +4,8 @@ zh_name: "杂志文章"
en_name: "Magazine Article"
emoji: "📖"
description: "Huashu / huashu-md-html-inspired magazine article layout for turning Markdown or notes into a polished long-form HTML essay."
zh_description: "Huashu / huashu-md-html 风格杂志文章版式, 将 Markdown 或笔记转成精排长文 HTML。"
en_description: "Huashu / huashu-md-html-inspired magazine article layout for turning Markdown or notes into a polished long-form HTML essay."
category: article
scenario: marketing
aspect_hint: "A4 / 长页面"
@ -21,7 +23,6 @@ od:
surface: web
platform: desktop
scenario: marketing
featured: 0.03
upstream: "https://github.com/nexu-io/html-anything"
preview:
type: html
@ -29,7 +30,9 @@ od:
reload: debounce-100
design_system:
requires: false
example_prompt: "用「杂志文章」模板把我的内容做成一份「Huashu / huashu-md-html-inspired magazine article layout for turning Markdown or notes into a polished long-form HTML essay」。保持模板的视觉签名使用真实内容和数据避免 lorem ipsum 和占位图片。"
example_prompt: "Use the Magazine Article template to turn my content into a Huashu / huashu-md-html-inspired long-form HTML essay. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images."
example_prompt_i18n:
zh-CN: "用「杂志文章」模板把我的内容做成一份「Huashu / huashu-md-html-inspired magazine article layout for turning Markdown or notes into a polished long-form HTML essay」。保持模板的视觉签名使用真实内容和数据避免 lorem ipsum 和占位图片。"
---
【模板: 杂志文章】

View file

@ -2,7 +2,7 @@
"$schema": "https://open-design.ai/schemas/plugin.v1.json",
"specVersion": "1.0.0",
"name": "example-article-magazine",
"title": "杂志文章",
"title": "Magazine Article",
"version": "0.1.0",
"description": "Huashu / huashu-md-html-inspired magazine article layout for turning Markdown or notes into a polished long-form HTML essay.",
"license": "MIT",
@ -42,11 +42,18 @@
"entry": "./example.html"
},
"useCase": {
"query": "用「杂志文章」模板把我的内容做成一份「Huashu / huashu-md-html-inspired magazine article layout for turning Markdown or notes into a polished long-form HTML essay」。保持模板的视觉签名使用真实内容和数据避免 lorem ipsum 和占位图片。",
"query": {
"en": "Use the Magazine Article template to turn my content into a Huashu / huashu-md-html-inspired long-form HTML essay. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images.",
"zh-CN": "用「杂志文章」模板把我的内容做成一份「Huashu / huashu-md-html-inspired magazine article layout for turning Markdown or notes into a polished long-form HTML essay」。保持模板的视觉签名使用真实内容和数据避免 lorem ipsum 和占位图片。"
},
"exampleOutputs": [
{
"path": "./example.html",
"title": "杂志文章"
"title": "Magazine Article",
"title_i18n": {
"en": "Magazine Article",
"zh-CN": "杂志文章"
}
}
]
},
@ -75,5 +82,13 @@
"prompt:inject",
"fs:write"
]
},
"title_i18n": {
"en": "Magazine Article",
"zh-CN": "杂志文章"
},
"description_i18n": {
"en": "Huashu / huashu-md-html-inspired magazine article layout for turning Markdown or notes into a polished long-form HTML essay.",
"zh-CN": "Huashu / huashu-md-html 风格杂志文章版式, 将 Markdown 或笔记转成精排长文 HTML。"
}
}

View file

@ -3,7 +3,9 @@ name: card-twitter
zh_name: "Twitter 分享卡"
en_name: "Twitter Share Card"
emoji: "🐦"
description: "推特金句 / 数据卡, 适合配推文"
description: "Twitter quote or data card designed to pair with a post."
zh_description: "推特金句 / 数据卡, 适合配推文"
en_description: "Twitter quote or data card designed to pair with a post."
category: card
scenario: marketing
aspect_hint: "1600×900 (16:9)"
@ -25,7 +27,9 @@ od:
reload: debounce-100
design_system:
requires: false
example_prompt: "用「Twitter 分享卡」模板把我的内容做成一份「推特金句 / 数据卡, 适合配推文」。保持模板的视觉签名,使用真实内容和数据,避免 lorem ipsum 和占位图片。"
example_prompt: "Use the Twitter Share Card template to turn my content into a Twitter quote or data card designed to pair with a post. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images."
example_prompt_i18n:
zh-CN: "用「Twitter 分享卡」模板把我的内容做成一份「推特金句 / 数据卡, 适合配推文」。保持模板的视觉签名,使用真实内容和数据,避免 lorem ipsum 和占位图片。"
---
【模板: Twitter 分享卡】

View file

@ -2,9 +2,9 @@
"$schema": "https://open-design.ai/schemas/plugin.v1.json",
"specVersion": "1.0.0",
"name": "example-card-twitter",
"title": "Twitter 分享卡",
"title": "Twitter Share Card",
"version": "0.1.0",
"description": "推特金句 / 数据卡, 适合配推文",
"description": "Twitter quote or data card designed to pair with a post.",
"license": "MIT",
"author": {
"name": "Open Design",
@ -42,11 +42,18 @@
"entry": "./example.html"
},
"useCase": {
"query": "用「Twitter 分享卡」模板把我的内容做成一份「推特金句 / 数据卡, 适合配推文」。保持模板的视觉签名,使用真实内容和数据,避免 lorem ipsum 和占位图片。",
"query": {
"en": "Use the Twitter Share Card template to turn my content into a Twitter quote or data card designed to pair with a post. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images.",
"zh-CN": "用「Twitter 分享卡」模板把我的内容做成一份「推特金句 / 数据卡, 适合配推文」。保持模板的视觉签名,使用真实内容和数据,避免 lorem ipsum 和占位图片。"
},
"exampleOutputs": [
{
"path": "./example.html",
"title": "Twitter 分享卡"
"title": "Twitter Share Card",
"title_i18n": {
"en": "Twitter Share Card",
"zh-CN": "Twitter 分享卡"
}
}
]
},
@ -75,5 +82,13 @@
"prompt:inject",
"fs:write"
]
},
"title_i18n": {
"en": "Twitter Share Card",
"zh-CN": "Twitter 分享卡"
},
"description_i18n": {
"en": "Twitter quote or data card designed to pair with a post.",
"zh-CN": "推特金句 / 数据卡, 适合配推文"
}
}

View file

@ -3,7 +3,9 @@ name: card-xiaohongshu
zh_name: "小红书图文卡片"
en_name: "Xiaohongshu Card"
emoji: "📱"
description: "小红书风格知识卡片, 多张联排可滑动浏览"
description: "Xiaohongshu-style knowledge cards, arranged as a swipeable multi-card carousel."
zh_description: "小红书风格知识卡片, 多张联排可滑动浏览"
en_description: "Xiaohongshu-style knowledge cards, arranged as a swipeable multi-card carousel."
category: card
scenario: marketing
aspect_hint: "1080×1440 (3:4)"
@ -19,7 +21,6 @@ od:
surface: web
platform: desktop
scenario: marketing
featured: 24
upstream: "https://github.com/nexu-io/html-anything"
preview:
type: html
@ -27,7 +28,9 @@ od:
reload: debounce-100
design_system:
requires: false
example_prompt: "用「小红书图文卡片」模板把我的内容做成一份「小红书风格知识卡片, 多张联排可滑动浏览」。保持模板的视觉签名,使用真实内容和数据,避免 lorem ipsum 和占位图片。"
example_prompt: "Use the Xiaohongshu Card template to turn my content into a Xiaohongshu-style swipeable knowledge-card carousel. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images."
example_prompt_i18n:
zh-CN: "用「小红书图文卡片」模板把我的内容做成一份「小红书风格知识卡片, 多张联排可滑动浏览」。保持模板的视觉签名,使用真实内容和数据,避免 lorem ipsum 和占位图片。"
---
【模板: 小红书图文卡片】

View file

@ -2,9 +2,9 @@
"$schema": "https://open-design.ai/schemas/plugin.v1.json",
"specVersion": "1.0.0",
"name": "example-card-xiaohongshu",
"title": "小红书图文卡片",
"title": "Xiaohongshu Card",
"version": "0.1.0",
"description": "小红书风格知识卡片, 多张联排可滑动浏览",
"description": "Xiaohongshu-style knowledge cards, arranged as a swipeable multi-card carousel.",
"license": "MIT",
"author": {
"name": "Open Design",
@ -41,11 +41,18 @@
"entry": "./example.html"
},
"useCase": {
"query": "用「小红书图文卡片」模板把我的内容做成一份「小红书风格知识卡片, 多张联排可滑动浏览」。保持模板的视觉签名,使用真实内容和数据,避免 lorem ipsum 和占位图片。",
"query": {
"en": "Use the Xiaohongshu Card template to turn my content into a Xiaohongshu-style swipeable knowledge-card carousel. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images.",
"zh-CN": "用「小红书图文卡片」模板把我的内容做成一份「小红书风格知识卡片, 多张联排可滑动浏览」。保持模板的视觉签名,使用真实内容和数据,避免 lorem ipsum 和占位图片。"
},
"exampleOutputs": [
{
"path": "./example.html",
"title": "小红书图文卡片"
"title": "Xiaohongshu Card",
"title_i18n": {
"en": "Xiaohongshu Card",
"zh-CN": "小红书图文卡片"
}
}
]
},
@ -74,5 +81,13 @@
"prompt:inject",
"fs:write"
]
},
"title_i18n": {
"en": "Xiaohongshu Card",
"zh-CN": "小红书图文卡片"
},
"description_i18n": {
"en": "Xiaohongshu-style knowledge cards, arranged as a swipeable multi-card carousel.",
"zh-CN": "小红书风格知识卡片, 多张联排可滑动浏览"
}
}

View file

@ -3,7 +3,9 @@ name: data-report
zh_name: "数据可视化报告"
en_name: "Data Visualization Report"
emoji: "📊"
description: "把 CSV/Excel/JSON 数据转成漂亮的可视化报告页"
description: "Turns CSV, Excel, or JSON data into a polished visual report page."
zh_description: "把 CSV/Excel/JSON 数据转成漂亮的可视化报告页"
en_description: "Turns CSV, Excel, or JSON data into a polished visual report page."
category: data
scenario: finance
aspect_hint: "桌面长页面"
@ -19,7 +21,6 @@ od:
surface: web
platform: desktop
scenario: finance
featured: 10
upstream: "https://github.com/nexu-io/html-anything"
preview:
type: html
@ -27,7 +28,9 @@ od:
reload: debounce-100
design_system:
requires: false
example_prompt: "用「数据可视化报告」模板把我的内容做成一份「把 CSV/Excel/JSON 数据转成漂亮的可视化报告页」。保持模板的视觉签名,使用真实内容和数据,避免 lorem ipsum 和占位图片。"
example_prompt: "Use the Data Visualization Report template to turn my CSV, Excel, or JSON data into a polished visual report page. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images."
example_prompt_i18n:
zh-CN: "用「数据可视化报告」模板把我的内容做成一份「把 CSV/Excel/JSON 数据转成漂亮的可视化报告页」。保持模板的视觉签名,使用真实内容和数据,避免 lorem ipsum 和占位图片。"
---
【模板: 数据可视化报告】

View file

@ -2,9 +2,9 @@
"$schema": "https://open-design.ai/schemas/plugin.v1.json",
"specVersion": "1.0.0",
"name": "example-data-report",
"title": "数据可视化报告",
"title": "Data Visualization Report",
"version": "0.1.0",
"description": "把 CSV/Excel/JSON 数据转成漂亮的可视化报告页",
"description": "Turns CSV, Excel, or JSON data into a polished visual report page.",
"license": "MIT",
"author": {
"name": "Open Design",
@ -42,11 +42,18 @@
"entry": "./example.html"
},
"useCase": {
"query": "用「数据可视化报告」模板把我的内容做成一份「把 CSV/Excel/JSON 数据转成漂亮的可视化报告页」。保持模板的视觉签名,使用真实内容和数据,避免 lorem ipsum 和占位图片。",
"query": {
"en": "Use the Data Visualization Report template to turn my CSV, Excel, or JSON data into a polished visual report page. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images.",
"zh-CN": "用「数据可视化报告」模板把我的内容做成一份「把 CSV/Excel/JSON 数据转成漂亮的可视化报告页」。保持模板的视觉签名,使用真实内容和数据,避免 lorem ipsum 和占位图片。"
},
"exampleOutputs": [
{
"path": "./example.html",
"title": "数据可视化报告"
"title": "Data Visualization Report",
"title_i18n": {
"en": "Data Visualization Report",
"zh-CN": "数据可视化报告"
}
}
]
},
@ -75,5 +82,13 @@
"prompt:inject",
"fs:write"
]
},
"title_i18n": {
"en": "Data Visualization Report",
"zh-CN": "数据可视化报告"
},
"description_i18n": {
"en": "Turns CSV, Excel, or JSON data into a polished visual report page.",
"zh-CN": "把 CSV/Excel/JSON 数据转成漂亮的可视化报告页"
}
}

View file

@ -3,7 +3,9 @@ name: deck-guizang-editorial
zh_name: "归藏编辑墨水 Deck"
en_name: "Guizang Editorial E-Ink Deck"
emoji: "🖋️"
description: "电子杂志 × 电子墨水; 10 个版面 + 5 套调色板 (墨水/靛蓝瓷/森林墨/牛皮纸/沙丘)"
description: "Editorial magazine meets e-ink: 10 layouts and 5 palettes (Ink, Indigo Porcelain, Forest Ink, Kraft Paper, Dune)."
zh_description: "电子杂志 × 电子墨水; 10 个版面 + 5 套调色板 (墨水/靛蓝瓷/森林墨/牛皮纸/沙丘)"
en_description: "Editorial magazine meets e-ink: 10 layouts and 5 palettes (Ink, Indigo Porcelain, Forest Ink, Kraft Paper, Dune)."
category: slides
scenario: marketing
aspect_hint: "16:9 横向翻页"
@ -29,7 +31,9 @@ od:
reload: debounce-100
design_system:
requires: false
example_prompt: "用「归藏编辑墨水 Deck」模板把我的内容做成一套「电子杂志 × 电子墨水; 10 个版面 + 5 套调色板 (墨水/靛蓝瓷/森林墨/牛皮纸/沙丘)」。保持模板的视觉签名,使用真实内容和数据,避免 lorem ipsum 和占位图片。"
example_prompt: "Use the Guizang Editorial E-Ink Deck template to turn my content into an editorial magazine x e-ink horizontal deck with 10 layouts and 5 palettes. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images."
example_prompt_i18n:
zh-CN: "用「归藏编辑墨水 Deck」模板把我的内容做成一套「电子杂志 × 电子墨水; 10 个版面 + 5 套调色板 (墨水/靛蓝瓷/森林墨/牛皮纸/沙丘)」。保持模板的视觉签名,使用真实内容和数据,避免 lorem ipsum 和占位图片。"
---
【模板: 归藏编辑墨水 Deck (Editorial × E-Ink)】

View file

@ -2,9 +2,9 @@
"$schema": "https://open-design.ai/schemas/plugin.v1.json",
"specVersion": "1.0.0",
"name": "example-deck-guizang-editorial",
"title": "归藏编辑墨水 Deck",
"title": "Guizang Editorial E-Ink Deck",
"version": "0.1.0",
"description": "电子杂志 × 电子墨水; 10 个版面 + 5 套调色板 (墨水/靛蓝瓷/森林墨/牛皮纸/沙丘)",
"description": "Editorial magazine meets e-ink: 10 layouts and 5 palettes (Ink, Indigo Porcelain, Forest Ink, Kraft Paper, Dune).",
"license": "MIT",
"author": {
"name": "Open Design",
@ -42,11 +42,18 @@
"entry": "./example.html"
},
"useCase": {
"query": "用「归藏编辑墨水 Deck」模板把我的内容做成一套「电子杂志 × 电子墨水; 10 个版面 + 5 套调色板 (墨水/靛蓝瓷/森林墨/牛皮纸/沙丘)」。保持模板的视觉签名,使用真实内容和数据,避免 lorem ipsum 和占位图片。",
"query": {
"en": "Use the Guizang Editorial E-Ink Deck template to turn my content into an editorial magazine x e-ink horizontal deck with 10 layouts and 5 palettes. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images.",
"zh-CN": "用「归藏编辑墨水 Deck」模板把我的内容做成一套「电子杂志 × 电子墨水; 10 个版面 + 5 套调色板 (墨水/靛蓝瓷/森林墨/牛皮纸/沙丘)」。保持模板的视觉签名,使用真实内容和数据,避免 lorem ipsum 和占位图片。"
},
"exampleOutputs": [
{
"path": "./example.html",
"title": "归藏编辑墨水 Deck"
"title": "Guizang Editorial E-Ink Deck",
"title_i18n": {
"en": "Guizang Editorial E-Ink Deck",
"zh-CN": "归藏编辑墨水 Deck"
}
}
]
},
@ -75,5 +82,13 @@
"prompt:inject",
"fs:write"
]
},
"title_i18n": {
"en": "Guizang Editorial E-Ink Deck",
"zh-CN": "归藏编辑墨水 Deck"
},
"description_i18n": {
"en": "Editorial magazine meets e-ink: 10 layouts and 5 palettes (Ink, Indigo Porcelain, Forest Ink, Kraft Paper, Dune).",
"zh-CN": "电子杂志 × 电子墨水; 10 个版面 + 5 套调色板 (墨水/靛蓝瓷/森林墨/牛皮纸/沙丘)"
}
}

View file

@ -3,7 +3,9 @@ name: deck-open-slide-canvas
zh_name: "1920 画布自由 Deck"
en_name: "Open-Slide 1920 Canvas Deck"
emoji: "🎨"
description: "锁死 1920×1080 画布, React 组件级自由组合, 不绑模板"
description: "Locked 1920x1080 canvas deck with React component-level free composition, not bound to a fixed template."
zh_description: "锁死 1920×1080 画布, React 组件级自由组合, 不绑模板"
en_description: "Locked 1920x1080 canvas deck with React component-level free composition, not bound to a fixed template."
category: slides
scenario: design
aspect_hint: "1920×1080 (16:9)"
@ -29,7 +31,9 @@ od:
reload: debounce-100
design_system:
requires: false
example_prompt: "用「1920 画布自由 Deck」模板把我的内容做成一套「锁死 1920×1080 画布, React 组件级自由组合, 不绑模板」。保持模板的视觉签名,使用真实内容和数据,避免 lorem ipsum 和占位图片。"
example_prompt: "Use the Open-Slide 1920 Canvas Deck template to turn my content into a locked 1920x1080 free-composition deck with React component-level layout. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images."
example_prompt_i18n:
zh-CN: "用「1920 画布自由 Deck」模板把我的内容做成一套「锁死 1920×1080 画布, React 组件级自由组合, 不绑模板」。保持模板的视觉签名,使用真实内容和数据,避免 lorem ipsum 和占位图片。"
---
【模板: 1920 画布自由 Deck】

View file

@ -2,9 +2,9 @@
"$schema": "https://open-design.ai/schemas/plugin.v1.json",
"specVersion": "1.0.0",
"name": "example-deck-open-slide-canvas",
"title": "1920 画布自由 Deck",
"title": "Open-Slide 1920 Canvas Deck",
"version": "0.1.0",
"description": "锁死 1920×1080 画布, React 组件级自由组合, 不绑模板",
"description": "Locked 1920x1080 canvas deck with React component-level free composition, not bound to a fixed template.",
"license": "MIT",
"author": {
"name": "Open Design",
@ -42,11 +42,18 @@
"entry": "./example.html"
},
"useCase": {
"query": "用「1920 画布自由 Deck」模板把我的内容做成一套「锁死 1920×1080 画布, React 组件级自由组合, 不绑模板」。保持模板的视觉签名,使用真实内容和数据,避免 lorem ipsum 和占位图片。",
"query": {
"en": "Use the Open-Slide 1920 Canvas Deck template to turn my content into a locked 1920x1080 free-composition deck with React component-level layout. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images.",
"zh-CN": "用「1920 画布自由 Deck」模板把我的内容做成一套「锁死 1920×1080 画布, React 组件级自由组合, 不绑模板」。保持模板的视觉签名,使用真实内容和数据,避免 lorem ipsum 和占位图片。"
},
"exampleOutputs": [
{
"path": "./example.html",
"title": "1920 画布自由 Deck"
"title": "Open-Slide 1920 Canvas Deck",
"title_i18n": {
"en": "Open-Slide 1920 Canvas Deck",
"zh-CN": "1920 画布自由 Deck"
}
}
]
},
@ -75,5 +82,13 @@
"prompt:inject",
"fs:write"
]
},
"title_i18n": {
"en": "Open-Slide 1920 Canvas Deck",
"zh-CN": "1920 画布自由 Deck"
},
"description_i18n": {
"en": "Locked 1920x1080 canvas deck with React component-level free composition, not bound to a fixed template.",
"zh-CN": "锁死 1920×1080 画布, React 组件级自由组合, 不绑模板"
}
}

View file

@ -3,7 +3,9 @@ name: deck-swiss-international
zh_name: "瑞士国际主义 Deck"
en_name: "Swiss International Deck"
emoji: "🟦"
description: "16 列网格 + 单一饱和 accent + 22 个锁死版面 (Klein Blue / Lemon / Mint / Safety Orange)"
description: "16-column grid, one saturated accent, and 22 locked layouts (Klein Blue, Lemon, Mint, Safety Orange)."
zh_description: "16 列网格 + 单一饱和 accent + 22 个锁死版面 (Klein Blue / Lemon / Mint / Safety Orange)"
en_description: "16-column grid, one saturated accent, and 22 locked layouts (Klein Blue, Lemon, Mint, Safety Orange)."
category: slides
scenario: marketing
aspect_hint: "16:9 横向翻页"
@ -29,7 +31,9 @@ od:
reload: debounce-100
design_system:
requires: false
example_prompt: "用「瑞士国际主义 Deck」模板把我的内容做成一套「16 列网格 + 单一饱和 accent + 22 个锁死版面 (Klein Blue / Lemon / Mint / Safety Orange)」。保持模板的视觉签名,使用真实内容和数据,避免 lorem ipsum 和占位图片。"
example_prompt: "Use the Swiss International Deck template to turn my content into a 16-column-grid deck with one saturated accent and 22 locked layouts. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images."
example_prompt_i18n:
zh-CN: "用「瑞士国际主义 Deck」模板把我的内容做成一套「16 列网格 + 单一饱和 accent + 22 个锁死版面 (Klein Blue / Lemon / Mint / Safety Orange)」。保持模板的视觉签名,使用真实内容和数据,避免 lorem ipsum 和占位图片。"
---
【模板: 瑞士国际主义 Deck (Swiss International)】

View file

@ -2,9 +2,9 @@
"$schema": "https://open-design.ai/schemas/plugin.v1.json",
"specVersion": "1.0.0",
"name": "example-deck-swiss-international",
"title": "瑞士国际主义 Deck",
"title": "Swiss International Deck",
"version": "0.1.0",
"description": "16 列网格 + 单一饱和 accent + 22 个锁死版面 (Klein Blue / Lemon / Mint / Safety Orange)",
"description": "16-column grid, one saturated accent, and 22 locked layouts (Klein Blue, Lemon, Mint, Safety Orange).",
"license": "MIT",
"author": {
"name": "Open Design",
@ -43,11 +43,18 @@
"entry": "./example.html"
},
"useCase": {
"query": "用「瑞士国际主义 Deck」模板把我的内容做成一套「16 列网格 + 单一饱和 accent + 22 个锁死版面 (Klein Blue / Lemon / Mint / Safety Orange)」。保持模板的视觉签名,使用真实内容和数据,避免 lorem ipsum 和占位图片。",
"query": {
"en": "Use the Swiss International Deck template to turn my content into a 16-column-grid deck with one saturated accent and 22 locked layouts. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images.",
"zh-CN": "用「瑞士国际主义 Deck」模板把我的内容做成一套「16 列网格 + 单一饱和 accent + 22 个锁死版面 (Klein Blue / Lemon / Mint / Safety Orange)」。保持模板的视觉签名,使用真实内容和数据,避免 lorem ipsum 和占位图片。"
},
"exampleOutputs": [
{
"path": "./example.html",
"title": "瑞士国际主义 Deck"
"title": "Swiss International Deck",
"title_i18n": {
"en": "Swiss International Deck",
"zh-CN": "瑞士国际主义 Deck"
}
}
]
},
@ -76,5 +83,13 @@
"prompt:inject",
"fs:write"
]
},
"title_i18n": {
"en": "Swiss International Deck",
"zh-CN": "瑞士国际主义 Deck"
},
"description_i18n": {
"en": "16-column grid, one saturated accent, and 22 locked layouts (Klein Blue, Lemon, Mint, Safety Orange).",
"zh-CN": "16 列网格 + 单一饱和 accent + 22 个锁死版面 (Klein Blue / Lemon / Mint / Safety Orange)"
}
}

View file

@ -3,7 +3,9 @@ name: doc-kami-parchment
zh_name: "Kami 羊皮纸文档"
en_name: "Kami Parchment Document"
emoji: "📜"
description: "暖羊皮纸底 (#f5f4ed) + 墨蓝单色 accent (#1B365D) + 单一衬线字体, 编辑级排印"
description: "Warm parchment canvas (#f5f4ed), monochrome ink-blue accent (#1B365D), one serif family, and editorial-grade typography."
zh_description: "暖羊皮纸底 (#f5f4ed) + 墨蓝单色 accent (#1B365D) + 单一衬线字体, 编辑级排印"
en_description: "Warm parchment canvas (#f5f4ed), monochrome ink-blue accent (#1B365D), one serif family, and editorial-grade typography."
category: doc
scenario: personal
aspect_hint: "A4 / Letter 长页"
@ -30,7 +32,9 @@ od:
reload: debounce-100
design_system:
requires: false
example_prompt: "用「Kami 羊皮纸文档」模板把我的内容做成一份「暖羊皮纸底 (#f5f4ed) + 墨蓝单色 accent (#1B365D) + 单一衬线字体, 编辑级排印」。保持模板的视觉签名,使用真实内容和数据,避免 lorem ipsum 和占位图片。"
example_prompt: "Use the Kami Parchment Document template to turn my content into a warm parchment document with monochrome ink-blue accents, one serif family, and editorial-grade typography. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images."
example_prompt_i18n:
zh-CN: "用「Kami 羊皮纸文档」模板把我的内容做成一份「暖羊皮纸底 (#f5f4ed) + 墨蓝单色 accent (#1B365D) + 单一衬线字体, 编辑级排印」。保持模板的视觉签名,使用真实内容和数据,避免 lorem ipsum 和占位图片。"
---
【模板: Kami 羊皮纸文档】

View file

@ -2,9 +2,9 @@
"$schema": "https://open-design.ai/schemas/plugin.v1.json",
"specVersion": "1.0.0",
"name": "example-doc-kami-parchment",
"title": "Kami 羊皮纸文档",
"title": "Kami Parchment Document",
"version": "0.1.0",
"description": "暖羊皮纸底 (#f5f4ed) + 墨蓝单色 accent (#1B365D) + 单一衬线字体, 编辑级排印",
"description": "Warm parchment canvas (#f5f4ed), monochrome ink-blue accent (#1B365D), one serif family, and editorial-grade typography.",
"license": "MIT",
"author": {
"name": "Open Design",
@ -46,11 +46,18 @@
"entry": "./example.html"
},
"useCase": {
"query": "用「Kami 羊皮纸文档」模板把我的内容做成一份「暖羊皮纸底 (#f5f4ed) + 墨蓝单色 accent (#1B365D) + 单一衬线字体, 编辑级排印」。保持模板的视觉签名,使用真实内容和数据,避免 lorem ipsum 和占位图片。",
"query": {
"en": "Use the Kami Parchment Document template to turn my content into a warm parchment document with monochrome ink-blue accents, one serif family, and editorial-grade typography. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images.",
"zh-CN": "用「Kami 羊皮纸文档」模板把我的内容做成一份「暖羊皮纸底 (#f5f4ed) + 墨蓝单色 accent (#1B365D) + 单一衬线字体, 编辑级排印」。保持模板的视觉签名,使用真实内容和数据,避免 lorem ipsum 和占位图片。"
},
"exampleOutputs": [
{
"path": "./example.html",
"title": "Kami 羊皮纸文档"
"title": "Kami Parchment Document",
"title_i18n": {
"en": "Kami Parchment Document",
"zh-CN": "Kami 羊皮纸文档"
}
}
]
},
@ -79,5 +86,13 @@
"prompt:inject",
"fs:write"
]
},
"title_i18n": {
"en": "Kami Parchment Document",
"zh-CN": "Kami 羊皮纸文档"
},
"description_i18n": {
"en": "Warm parchment canvas (#f5f4ed), monochrome ink-blue accent (#1B365D), one serif family, and editorial-grade typography.",
"zh-CN": "暖羊皮纸底 (#f5f4ed) + 墨蓝单色 accent (#1B365D) + 单一衬线字体, 编辑级排印"
}
}

View file

@ -3,7 +3,9 @@ name: frame-data-chart-nyt
zh_name: "NYT 风数据图表帧"
en_name: "NYT-Style Data Chart Frame"
emoji: "📈"
description: "NYT-newsroom 排版 + 错峰揭示动画 + 编辑级图表 (折线/柱/范围带)"
description: "NYT-newsroom typography, staggered reveal animation, and editorial-grade charts (line, bar, or range band)."
zh_description: "NYT-newsroom 排版 + 错峰揭示动画 + 编辑级图表 (折线/柱/范围带)"
en_description: "NYT-newsroom typography, staggered reveal animation, and editorial-grade charts (line, bar, or range band)."
category: video
scenario: video
aspect_hint: "1920×1080 (16:9)"
@ -20,7 +22,6 @@ od:
mode: video
surface: video
scenario: video
featured: 46
upstream: "https://github.com/nexu-io/html-anything"
preview:
type: html
@ -28,7 +29,9 @@ od:
reload: debounce-100
design_system:
requires: false
example_prompt: "用「NYT 风数据图表帧」模板把我的内容做成一段「NYT-newsroom 排版 + 错峰揭示动画 + 编辑级图表 (折线/柱/范围带)」。保持模板的视觉签名,使用真实内容和数据,避免 lorem ipsum 和占位图片。"
example_prompt: "Use the NYT-Style Data Chart Frame template to turn my content into a frame with NYT-newsroom typography, staggered reveal animation, and editorial-grade charts. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images."
example_prompt_i18n:
zh-CN: "用「NYT 风数据图表帧」模板把我的内容做成一段「NYT-newsroom 排版 + 错峰揭示动画 + 编辑级图表 (折线/柱/范围带)」。保持模板的视觉签名,使用真实内容和数据,避免 lorem ipsum 和占位图片。"
---
【模板: NYT 风数据图表帧】

View file

@ -2,9 +2,9 @@
"$schema": "https://open-design.ai/schemas/plugin.v1.json",
"specVersion": "1.0.0",
"name": "example-frame-data-chart-nyt",
"title": "NYT 风数据图表帧",
"title": "NYT-Style Data Chart Frame",
"version": "0.1.0",
"description": "NYT-newsroom 排版 + 错峰揭示动画 + 编辑级图表 (折线/柱/范围带)",
"description": "NYT-newsroom typography, staggered reveal animation, and editorial-grade charts (line, bar, or range band).",
"license": "MIT",
"author": {
"name": "Open Design",
@ -39,11 +39,18 @@
"entry": "./example.html"
},
"useCase": {
"query": "用「NYT 风数据图表帧」模板把我的内容做成一段「NYT-newsroom 排版 + 错峰揭示动画 + 编辑级图表 (折线/柱/范围带)」。保持模板的视觉签名,使用真实内容和数据,避免 lorem ipsum 和占位图片。",
"query": {
"en": "Use the NYT-Style Data Chart Frame template to turn my content into a frame with NYT-newsroom typography, staggered reveal animation, and editorial-grade charts. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images.",
"zh-CN": "用「NYT 风数据图表帧」模板把我的内容做成一段「NYT-newsroom 排版 + 错峰揭示动画 + 编辑级图表 (折线/柱/范围带)」。保持模板的视觉签名,使用真实内容和数据,避免 lorem ipsum 和占位图片。"
},
"exampleOutputs": [
{
"path": "./example.html",
"title": "NYT 风数据图表帧"
"title": "NYT-Style Data Chart Frame",
"title_i18n": {
"en": "NYT-Style Data Chart Frame",
"zh-CN": "NYT 风数据图表帧"
}
}
]
},
@ -72,5 +79,13 @@
"prompt:inject",
"fs:write"
]
},
"title_i18n": {
"en": "NYT-Style Data Chart Frame",
"zh-CN": "NYT 风数据图表帧"
},
"description_i18n": {
"en": "NYT-newsroom typography, staggered reveal animation, and editorial-grade charts (line, bar, or range band).",
"zh-CN": "NYT-newsroom 排版 + 错峰揭示动画 + 编辑级图表 (折线/柱/范围带)"
}
}

View file

@ -3,7 +3,9 @@ name: frame-flowchart-sticky
zh_name: "便利贴流程图帧"
en_name: "Sticky Flowchart Frame"
emoji: "📝"
description: "SVG 曲线连接 + 便利贴节点 + 光标交互, 像白板 brainstorm"
description: "SVG curve connectors, sticky-note nodes, and cursor interaction with a whiteboard-brainstorm feel."
zh_description: "SVG 曲线连接 + 便利贴节点 + 光标交互, 像白板 brainstorm"
en_description: "SVG curve connectors, sticky-note nodes, and cursor interaction with a whiteboard-brainstorm feel."
category: video
scenario: operations
aspect_hint: "1920×1080 (16:9)"
@ -20,7 +22,6 @@ od:
mode: video
surface: video
scenario: operations
featured: 45
upstream: "https://github.com/nexu-io/html-anything"
preview:
type: html
@ -28,7 +29,9 @@ od:
reload: debounce-100
design_system:
requires: false
example_prompt: "用「便利贴流程图帧」模板把我的内容做成一段「SVG 曲线连接 + 便利贴节点 + 光标交互, 像白板 brainstorm」。保持模板的视觉签名使用真实内容和数据避免 lorem ipsum 和占位图片。"
example_prompt: "Use the Sticky Flowchart Frame template to turn my content into a whiteboard-brainstorm frame with SVG curve connectors, sticky-note nodes, and cursor interaction. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images."
example_prompt_i18n:
zh-CN: "用「便利贴流程图帧」模板把我的内容做成一段「SVG 曲线连接 + 便利贴节点 + 光标交互, 像白板 brainstorm」。保持模板的视觉签名使用真实内容和数据避免 lorem ipsum 和占位图片。"
---
【模板: 便利贴流程图帧 (Sticky Flowchart)】

View file

@ -2,9 +2,9 @@
"$schema": "https://open-design.ai/schemas/plugin.v1.json",
"specVersion": "1.0.0",
"name": "example-frame-flowchart-sticky",
"title": "便利贴流程图帧",
"title": "Sticky Flowchart Frame",
"version": "0.1.0",
"description": "SVG 曲线连接 + 便利贴节点 + 光标交互, 像白板 brainstorm",
"description": "SVG curve connectors, sticky-note nodes, and cursor interaction with a whiteboard-brainstorm feel.",
"license": "MIT",
"author": {
"name": "Open Design",
@ -40,11 +40,18 @@
"entry": "./example.html"
},
"useCase": {
"query": "用「便利贴流程图帧」模板把我的内容做成一段「SVG 曲线连接 + 便利贴节点 + 光标交互, 像白板 brainstorm」。保持模板的视觉签名使用真实内容和数据避免 lorem ipsum 和占位图片。",
"query": {
"en": "Use the Sticky Flowchart Frame template to turn my content into a whiteboard-brainstorm frame with SVG curve connectors, sticky-note nodes, and cursor interaction. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images.",
"zh-CN": "用「便利贴流程图帧」模板把我的内容做成一段「SVG 曲线连接 + 便利贴节点 + 光标交互, 像白板 brainstorm」。保持模板的视觉签名使用真实内容和数据避免 lorem ipsum 和占位图片。"
},
"exampleOutputs": [
{
"path": "./example.html",
"title": "便利贴流程图帧"
"title": "Sticky Flowchart Frame",
"title_i18n": {
"en": "Sticky Flowchart Frame",
"zh-CN": "便利贴流程图帧"
}
}
]
},
@ -73,5 +80,13 @@
"prompt:inject",
"fs:write"
]
},
"title_i18n": {
"en": "Sticky Flowchart Frame",
"zh-CN": "便利贴流程图帧"
},
"description_i18n": {
"en": "SVG curve connectors, sticky-note nodes, and cursor interaction with a whiteboard-brainstorm feel.",
"zh-CN": "SVG 曲线连接 + 便利贴节点 + 光标交互, 像白板 brainstorm"
}
}

View file

@ -3,7 +3,9 @@ name: frame-glitch-title
zh_name: "故障艺术标题帧"
en_name: "Glitch Title Frame"
emoji: "⚡"
description: "数字故障 / 像散偏移 / 数据腐败标题, 适合视频转场 / cyberpunk hero"
description: "Digital glitch, chromatic offset, and data-corruption title frame for video transitions or cyberpunk heroes."
zh_description: "数字故障 / 像散偏移 / 数据腐败标题, 适合视频转场 / cyberpunk hero"
en_description: "Digital glitch, chromatic offset, and data-corruption title frame for video transitions or cyberpunk heroes."
category: video
scenario: video
aspect_hint: "1920×1080 (16:9)"
@ -29,7 +31,9 @@ od:
reload: debounce-100
design_system:
requires: false
example_prompt: "用「故障艺术标题帧」模板把我的内容做成一段「数字故障 / 像散偏移 / 数据腐败标题, 适合视频转场 / cyberpunk hero」。保持模板的视觉签名使用真实内容和数据避免 lorem ipsum 和占位图片。"
example_prompt: "Use the Glitch Title Frame template to turn my content into a digital-glitch, chromatic-offset, data-corruption title frame for a video transition or cyberpunk hero. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images."
example_prompt_i18n:
zh-CN: "用「故障艺术标题帧」模板把我的内容做成一段「数字故障 / 像散偏移 / 数据腐败标题, 适合视频转场 / cyberpunk hero」。保持模板的视觉签名使用真实内容和数据避免 lorem ipsum 和占位图片。"
---
【模板: 故障艺术标题帧 (Glitch Title)】

View file

@ -2,9 +2,9 @@
"$schema": "https://open-design.ai/schemas/plugin.v1.json",
"specVersion": "1.0.0",
"name": "example-frame-glitch-title",
"title": "故障艺术标题帧",
"title": "Glitch Title Frame",
"version": "0.1.0",
"description": "数字故障 / 像散偏移 / 数据腐败标题, 适合视频转场 / cyberpunk hero",
"description": "Digital glitch, chromatic offset, and data-corruption title frame for video transitions or cyberpunk heroes.",
"license": "MIT",
"author": {
"name": "Open Design",
@ -41,11 +41,18 @@
"entry": "./example.html"
},
"useCase": {
"query": "用「故障艺术标题帧」模板把我的内容做成一段「数字故障 / 像散偏移 / 数据腐败标题, 适合视频转场 / cyberpunk hero」。保持模板的视觉签名使用真实内容和数据避免 lorem ipsum 和占位图片。",
"query": {
"en": "Use the Glitch Title Frame template to turn my content into a digital-glitch, chromatic-offset, data-corruption title frame for a video transition or cyberpunk hero. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images.",
"zh-CN": "用「故障艺术标题帧」模板把我的内容做成一段「数字故障 / 像散偏移 / 数据腐败标题, 适合视频转场 / cyberpunk hero」。保持模板的视觉签名使用真实内容和数据避免 lorem ipsum 和占位图片。"
},
"exampleOutputs": [
{
"path": "./example.html",
"title": "故障艺术标题帧"
"title": "Glitch Title Frame",
"title_i18n": {
"en": "Glitch Title Frame",
"zh-CN": "故障艺术标题帧"
}
}
]
},
@ -74,5 +81,13 @@
"prompt:inject",
"fs:write"
]
},
"title_i18n": {
"en": "Glitch Title Frame",
"zh-CN": "故障艺术标题帧"
},
"description_i18n": {
"en": "Digital glitch, chromatic offset, and data-corruption title frame for video transitions or cyberpunk heroes.",
"zh-CN": "数字故障 / 像散偏移 / 数据腐败标题, 适合视频转场 / cyberpunk hero"
}
}

View file

@ -3,7 +3,9 @@ name: frame-light-leak-cinema
zh_name: "胶片漏光电影帧"
en_name: "Light-Leak Cinematic Frame"
emoji: "🎞️"
description: "胶片漏光 + 颗粒噪点 + 16:9 letterbox + 衬线大字, 电影感开场 / 章节卡"
description: "Film light leaks, grain, 16:9 letterbox, and large serif type for cinematic openings or chapter cards."
zh_description: "胶片漏光 + 颗粒噪点 + 16:9 letterbox + 衬线大字, 电影感开场 / 章节卡"
en_description: "Film light leaks, grain, 16:9 letterbox, and large serif type for cinematic openings or chapter cards."
category: video
scenario: video
aspect_hint: "2.39:1 letterbox (1920×800) 或 16:9 (1920×1080)"
@ -20,7 +22,6 @@ od:
mode: video
surface: video
scenario: video
featured: 36
upstream: "https://github.com/nexu-io/html-anything"
preview:
type: html
@ -28,7 +29,9 @@ od:
reload: debounce-100
design_system:
requires: false
example_prompt: "用「胶片漏光电影帧」模板把我的内容做成一段「胶片漏光 + 颗粒噪点 + 16:9 letterbox + 衬线大字, 电影感开场 / 章节卡」。保持模板的视觉签名,使用真实内容和数据,避免 lorem ipsum 和占位图片。"
example_prompt: "Use the Light-Leak Cinematic Frame template to turn my content into a cinematic opening or chapter card with film light leaks, grain, letterbox framing, and large serif type. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images."
example_prompt_i18n:
zh-CN: "用「胶片漏光电影帧」模板把我的内容做成一段「胶片漏光 + 颗粒噪点 + 16:9 letterbox + 衬线大字, 电影感开场 / 章节卡」。保持模板的视觉签名,使用真实内容和数据,避免 lorem ipsum 和占位图片。"
---
【模板: 胶片漏光电影帧】

View file

@ -2,9 +2,9 @@
"$schema": "https://open-design.ai/schemas/plugin.v1.json",
"specVersion": "1.0.0",
"name": "example-frame-light-leak-cinema",
"title": "胶片漏光电影帧",
"title": "Light-Leak Cinematic Frame",
"version": "0.1.0",
"description": "胶片漏光 + 颗粒噪点 + 16:9 letterbox + 衬线大字, 电影感开场 / 章节卡",
"description": "Film light leaks, grain, 16:9 letterbox, and large serif type for cinematic openings or chapter cards.",
"license": "MIT",
"author": {
"name": "Open Design",
@ -40,11 +40,18 @@
"entry": "./example.html"
},
"useCase": {
"query": "用「胶片漏光电影帧」模板把我的内容做成一段「胶片漏光 + 颗粒噪点 + 16:9 letterbox + 衬线大字, 电影感开场 / 章节卡」。保持模板的视觉签名,使用真实内容和数据,避免 lorem ipsum 和占位图片。",
"query": {
"en": "Use the Light-Leak Cinematic Frame template to turn my content into a cinematic opening or chapter card with film light leaks, grain, letterbox framing, and large serif type. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images.",
"zh-CN": "用「胶片漏光电影帧」模板把我的内容做成一段「胶片漏光 + 颗粒噪点 + 16:9 letterbox + 衬线大字, 电影感开场 / 章节卡」。保持模板的视觉签名,使用真实内容和数据,避免 lorem ipsum 和占位图片。"
},
"exampleOutputs": [
{
"path": "./example.html",
"title": "胶片漏光电影帧"
"title": "Light-Leak Cinematic Frame",
"title_i18n": {
"en": "Light-Leak Cinematic Frame",
"zh-CN": "胶片漏光电影帧"
}
}
]
},
@ -73,5 +80,13 @@
"prompt:inject",
"fs:write"
]
},
"title_i18n": {
"en": "Light-Leak Cinematic Frame",
"zh-CN": "胶片漏光电影帧"
},
"description_i18n": {
"en": "Film light leaks, grain, 16:9 letterbox, and large serif type for cinematic openings or chapter cards.",
"zh-CN": "胶片漏光 + 颗粒噪点 + 16:9 letterbox + 衬线大字, 电影感开场 / 章节卡"
}
}

View file

@ -3,7 +3,9 @@ name: frame-liquid-bg-hero
zh_name: "流体背景 Hero 帧"
en_name: "Liquid Background Hero"
emoji: "🌊"
description: "WebGL 风流体置换背景 + 顶部叠加金句, 适合视频片头 / landing hero / 海报"
description: "WebGL-style fluid displacement background with a quote overlay, suited to video intros, landing heroes, or posters."
zh_description: "WebGL 风流体置换背景 + 顶部叠加金句, 适合视频片头 / landing hero / 海报"
en_description: "WebGL-style fluid displacement background with a quote overlay, suited to video intros, landing heroes, or posters."
category: poster
scenario: video
aspect_hint: "1920×1080 (16:9) 或 1080×1920 (9:16)"
@ -20,7 +22,6 @@ od:
mode: video
surface: video
scenario: video
featured: 39
upstream: "https://github.com/nexu-io/html-anything"
preview:
type: html
@ -28,7 +29,9 @@ od:
reload: debounce-100
design_system:
requires: false
example_prompt: "用「流体背景 Hero 帧」模板把我的内容做成一段「WebGL 风流体置换背景 + 顶部叠加金句, 适合视频片头 / landing hero / 海报」。保持模板的视觉签名,使用真实内容和数据,避免 lorem ipsum 和占位图片。"
example_prompt: "Use the Liquid Background Hero template to turn my content into a WebGL-style fluid displacement background with a quote overlay for a video intro, landing hero, or poster. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images."
example_prompt_i18n:
zh-CN: "用「流体背景 Hero 帧」模板把我的内容做成一段「WebGL 风流体置换背景 + 顶部叠加金句, 适合视频片头 / landing hero / 海报」。保持模板的视觉签名,使用真实内容和数据,避免 lorem ipsum 和占位图片。"
---
【模板: 流体背景 Hero】

View file

@ -2,9 +2,9 @@
"$schema": "https://open-design.ai/schemas/plugin.v1.json",
"specVersion": "1.0.0",
"name": "example-frame-liquid-bg-hero",
"title": "流体背景 Hero 帧",
"title": "Liquid Background Hero",
"version": "0.1.0",
"description": "WebGL 风流体置换背景 + 顶部叠加金句, 适合视频片头 / landing hero / 海报",
"description": "WebGL-style fluid displacement background with a quote overlay, suited to video intros, landing heroes, or posters.",
"license": "MIT",
"author": {
"name": "Open Design",
@ -40,11 +40,18 @@
"entry": "./example.html"
},
"useCase": {
"query": "用「流体背景 Hero 帧」模板把我的内容做成一段「WebGL 风流体置换背景 + 顶部叠加金句, 适合视频片头 / landing hero / 海报」。保持模板的视觉签名,使用真实内容和数据,避免 lorem ipsum 和占位图片。",
"query": {
"en": "Use the Liquid Background Hero template to turn my content into a WebGL-style fluid displacement background with a quote overlay for a video intro, landing hero, or poster. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images.",
"zh-CN": "用「流体背景 Hero 帧」模板把我的内容做成一段「WebGL 风流体置换背景 + 顶部叠加金句, 适合视频片头 / landing hero / 海报」。保持模板的视觉签名,使用真实内容和数据,避免 lorem ipsum 和占位图片。"
},
"exampleOutputs": [
{
"path": "./example.html",
"title": "流体背景 Hero 帧"
"title": "Liquid Background Hero",
"title_i18n": {
"en": "Liquid Background Hero",
"zh-CN": "流体背景 Hero 帧"
}
}
]
},
@ -73,5 +80,13 @@
"prompt:inject",
"fs:write"
]
},
"title_i18n": {
"en": "Liquid Background Hero",
"zh-CN": "流体背景 Hero 帧"
},
"description_i18n": {
"en": "WebGL-style fluid displacement background with a quote overlay, suited to video intros, landing heroes, or posters.",
"zh-CN": "WebGL 风流体置换背景 + 顶部叠加金句, 适合视频片头 / landing hero / 海报"
}
}

View file

@ -3,7 +3,9 @@ name: frame-logo-outro
zh_name: "品牌 Logo 收尾帧"
en_name: "Logo Outro Frame"
emoji: "🎬"
description: "Logo 分块组装入场 + glow bloom + tagline 揭示, 适合视频片尾 / 品牌闭幕"
description: "Segmented logo assembly, glow bloom, and tagline reveal for video outros or brand closing frames."
zh_description: "Logo 分块组装入场 + glow bloom + tagline 揭示, 适合视频片尾 / 品牌闭幕"
en_description: "Segmented logo assembly, glow bloom, and tagline reveal for video outros or brand closing frames."
category: video
scenario: video
aspect_hint: "1920×1080 (16:9)"
@ -29,7 +31,9 @@ od:
reload: debounce-100
design_system:
requires: false
example_prompt: "用「品牌 Logo 收尾帧」模板把我的内容做成一段「Logo 分块组装入场 + glow bloom + tagline 揭示, 适合视频片尾 / 品牌闭幕」。保持模板的视觉签名,使用真实内容和数据,避免 lorem ipsum 和占位图片。"
example_prompt: "Use the Logo Outro Frame template to turn my content into a video outro or brand closing frame with segmented logo assembly, glow bloom, and tagline reveal. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images."
example_prompt_i18n:
zh-CN: "用「品牌 Logo 收尾帧」模板把我的内容做成一段「Logo 分块组装入场 + glow bloom + tagline 揭示, 适合视频片尾 / 品牌闭幕」。保持模板的视觉签名,使用真实内容和数据,避免 lorem ipsum 和占位图片。"
---
【模板: Logo 收尾帧 (Logo Outro)】

View file

@ -2,9 +2,9 @@
"$schema": "https://open-design.ai/schemas/plugin.v1.json",
"specVersion": "1.0.0",
"name": "example-frame-logo-outro",
"title": "品牌 Logo 收尾帧",
"title": "Logo Outro Frame",
"version": "0.1.0",
"description": "Logo 分块组装入场 + glow bloom + tagline 揭示, 适合视频片尾 / 品牌闭幕",
"description": "Segmented logo assembly, glow bloom, and tagline reveal for video outros or brand closing frames.",
"license": "MIT",
"author": {
"name": "Open Design",
@ -40,11 +40,18 @@
"entry": "./example.html"
},
"useCase": {
"query": "用「品牌 Logo 收尾帧」模板把我的内容做成一段「Logo 分块组装入场 + glow bloom + tagline 揭示, 适合视频片尾 / 品牌闭幕」。保持模板的视觉签名,使用真实内容和数据,避免 lorem ipsum 和占位图片。",
"query": {
"en": "Use the Logo Outro Frame template to turn my content into a video outro or brand closing frame with segmented logo assembly, glow bloom, and tagline reveal. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images.",
"zh-CN": "用「品牌 Logo 收尾帧」模板把我的内容做成一段「Logo 分块组装入场 + glow bloom + tagline 揭示, 适合视频片尾 / 品牌闭幕」。保持模板的视觉签名,使用真实内容和数据,避免 lorem ipsum 和占位图片。"
},
"exampleOutputs": [
{
"path": "./example.html",
"title": "品牌 Logo 收尾帧"
"title": "Logo Outro Frame",
"title_i18n": {
"en": "Logo Outro Frame",
"zh-CN": "品牌 Logo 收尾帧"
}
}
]
},
@ -73,5 +80,13 @@
"prompt:inject",
"fs:write"
]
},
"title_i18n": {
"en": "Logo Outro Frame",
"zh-CN": "品牌 Logo 收尾帧"
},
"description_i18n": {
"en": "Segmented logo assembly, glow bloom, and tagline reveal for video outros or brand closing frames.",
"zh-CN": "Logo 分块组装入场 + glow bloom + tagline 揭示, 适合视频片尾 / 品牌闭幕"
}
}

View file

@ -3,7 +3,9 @@ name: frame-macos-notification
zh_name: "macOS 通知横幅"
en_name: "macOS Notification Banner"
emoji: "🔔"
description: "拟真 macOS 通知 banner + app icon + 标题正文, 适合 video overlay / 产品发布预告"
description: "Realistic macOS notification banner with app icon, title, and body, suited to video overlays or product teasers."
zh_description: "拟真 macOS 通知 banner + app icon + 标题正文, 适合 video overlay / 产品发布预告"
en_description: "Realistic macOS notification banner with app icon, title, and body, suited to video overlays or product teasers."
category: card
scenario: video
aspect_hint: "1920×1080 视频或 480×120 横幅"
@ -20,7 +22,6 @@ od:
mode: video
surface: video
scenario: video
featured: 41
upstream: "https://github.com/nexu-io/html-anything"
preview:
type: html
@ -28,7 +29,9 @@ od:
reload: debounce-100
design_system:
requires: false
example_prompt: "用「macOS 通知横幅」模板把我的内容做成一段「拟真 macOS 通知 banner + app icon + 标题正文, 适合 video overlay / 产品发布预告」。保持模板的视觉签名,使用真实内容和数据,避免 lorem ipsum 和占位图片。"
example_prompt: "Use the macOS Notification Banner template to turn my content into a realistic macOS notification banner for a video overlay or product teaser. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images."
example_prompt_i18n:
zh-CN: "用「macOS 通知横幅」模板把我的内容做成一段「拟真 macOS 通知 banner + app icon + 标题正文, 适合 video overlay / 产品发布预告」。保持模板的视觉签名,使用真实内容和数据,避免 lorem ipsum 和占位图片。"
---
【模板: macOS 通知横幅】

View file

@ -2,9 +2,9 @@
"$schema": "https://open-design.ai/schemas/plugin.v1.json",
"specVersion": "1.0.0",
"name": "example-frame-macos-notification",
"title": "macOS 通知横幅",
"title": "macOS Notification Banner",
"version": "0.1.0",
"description": "拟真 macOS 通知 banner + app icon + 标题正文, 适合 video overlay / 产品发布预告",
"description": "Realistic macOS notification banner with app icon, title, and body, suited to video overlays or product teasers.",
"license": "MIT",
"author": {
"name": "Open Design",
@ -39,11 +39,18 @@
"entry": "./example.html"
},
"useCase": {
"query": "用「macOS 通知横幅」模板把我的内容做成一段「拟真 macOS 通知 banner + app icon + 标题正文, 适合 video overlay / 产品发布预告」。保持模板的视觉签名,使用真实内容和数据,避免 lorem ipsum 和占位图片。",
"query": {
"en": "Use the macOS Notification Banner template to turn my content into a realistic macOS notification banner for a video overlay or product teaser. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images.",
"zh-CN": "用「macOS 通知横幅」模板把我的内容做成一段「拟真 macOS 通知 banner + app icon + 标题正文, 适合 video overlay / 产品发布预告」。保持模板的视觉签名,使用真实内容和数据,避免 lorem ipsum 和占位图片。"
},
"exampleOutputs": [
{
"path": "./example.html",
"title": "macOS 通知横幅"
"title": "macOS Notification Banner",
"title_i18n": {
"en": "macOS Notification Banner",
"zh-CN": "macOS 通知横幅"
}
}
]
},
@ -72,5 +79,13 @@
"prompt:inject",
"fs:write"
]
},
"title_i18n": {
"en": "macOS Notification Banner",
"zh-CN": "macOS 通知横幅"
},
"description_i18n": {
"en": "Realistic macOS notification banner with app icon, title, and body, suited to video overlays or product teasers.",
"zh-CN": "拟真 macOS 通知 banner + app icon + 标题正文, 适合 video overlay / 产品发布预告"
}
}

View file

@ -3,7 +3,9 @@ name: mockup-device-3d
zh_name: "iPhone × MacBook 立体展架"
en_name: "Device 3D Showcase"
emoji: "📱"
description: "iPhone + MacBook 仿 GLTF 静态展架, 屏幕内嵌真实 HTML 内容, 玻璃镜头折射, 360° 转盘构图"
description: "Static iPhone and MacBook 3D-style showcase with real HTML embedded on screens, glass-lens refraction, and 360-degree turntable composition."
zh_description: "iPhone + MacBook 仿 GLTF 静态展架, 屏幕内嵌真实 HTML 内容, 玻璃镜头折射, 360° 转盘构图"
en_description: "Static iPhone and MacBook 3D-style showcase with real HTML embedded on screens, glass-lens refraction, and 360-degree turntable composition."
category: poster
scenario: product
aspect_hint: "1920×1080 (16:9)"
@ -21,7 +23,6 @@ od:
surface: web
platform: desktop
scenario: product
featured: 47
upstream: "https://github.com/nexu-io/html-anything"
preview:
type: html
@ -29,7 +30,9 @@ od:
reload: debounce-100
design_system:
requires: false
example_prompt: "用「iPhone × MacBook 立体展架」模板把我的内容做成一份「iPhone + MacBook 仿 GLTF 静态展架, 屏幕内嵌真实 HTML 内容, 玻璃镜头折射, 360° 转盘构图」。保持模板的视觉签名,使用真实内容和数据,避免 lorem ipsum 和占位图片。"
example_prompt: "Use the Device 3D Showcase template to turn my content into a static iPhone and MacBook 3D-style showcase with real HTML embedded on the screens. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images."
example_prompt_i18n:
zh-CN: "用「iPhone × MacBook 立体展架」模板把我的内容做成一份「iPhone + MacBook 仿 GLTF 静态展架, 屏幕内嵌真实 HTML 内容, 玻璃镜头折射, 360° 转盘构图」。保持模板的视觉签名,使用真实内容和数据,避免 lorem ipsum 和占位图片。"
---
【模板: 设备 3D 展架 (Device 3D Showcase / HTML-in-Canvas)】

View file

@ -2,9 +2,9 @@
"$schema": "https://open-design.ai/schemas/plugin.v1.json",
"specVersion": "1.0.0",
"name": "example-mockup-device-3d",
"title": "iPhone × MacBook 立体展架",
"title": "Device 3D Showcase",
"version": "0.1.0",
"description": "iPhone + MacBook 仿 GLTF 静态展架, 屏幕内嵌真实 HTML 内容, 玻璃镜头折射, 360° 转盘构图",
"description": "Static iPhone and MacBook 3D-style showcase with real HTML embedded on screens, glass-lens refraction, and 360-degree turntable composition.",
"license": "MIT",
"author": {
"name": "Open Design",
@ -43,11 +43,18 @@
"entry": "./example.html"
},
"useCase": {
"query": "用「iPhone × MacBook 立体展架」模板把我的内容做成一份「iPhone + MacBook 仿 GLTF 静态展架, 屏幕内嵌真实 HTML 内容, 玻璃镜头折射, 360° 转盘构图」。保持模板的视觉签名,使用真实内容和数据,避免 lorem ipsum 和占位图片。",
"query": {
"en": "Use the Device 3D Showcase template to turn my content into a static iPhone and MacBook 3D-style showcase with real HTML embedded on the screens. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images.",
"zh-CN": "用「iPhone × MacBook 立体展架」模板把我的内容做成一份「iPhone + MacBook 仿 GLTF 静态展架, 屏幕内嵌真实 HTML 内容, 玻璃镜头折射, 360° 转盘构图」。保持模板的视觉签名,使用真实内容和数据,避免 lorem ipsum 和占位图片。"
},
"exampleOutputs": [
{
"path": "./example.html",
"title": "iPhone × MacBook 立体展架"
"title": "Device 3D Showcase",
"title_i18n": {
"en": "Device 3D Showcase",
"zh-CN": "iPhone × MacBook 立体展架"
}
}
]
},
@ -76,5 +83,13 @@
"prompt:inject",
"fs:write"
]
},
"title_i18n": {
"en": "Device 3D Showcase",
"zh-CN": "iPhone × MacBook 立体展架"
},
"description_i18n": {
"en": "Static iPhone and MacBook 3D-style showcase with real HTML embedded on screens, glass-lens refraction, and 360-degree turntable composition.",
"zh-CN": "iPhone + MacBook 仿 GLTF 静态展架, 屏幕内嵌真实 HTML 内容, 玻璃镜头折射, 360° 转盘构图"
}
}

View file

@ -3,7 +3,9 @@ name: poster-hero
zh_name: "营销海报"
en_name: "Marketing Poster"
emoji: "🖼️"
description: "竖版海报 / 朋友圈分享图, 强视觉冲击"
description: "Vertical poster or Moments-style share image with strong visual impact."
zh_description: "竖版海报 / 朋友圈分享图, 强视觉冲击"
en_description: "Vertical poster or Moments-style share image with strong visual impact."
category: poster
scenario: marketing
aspect_hint: "1080×1920 竖版"
@ -25,7 +27,9 @@ od:
reload: debounce-100
design_system:
requires: false
example_prompt: "用「营销海报」模板把我的内容做成一份「竖版海报 / 朋友圈分享图, 强视觉冲击」。保持模板的视觉签名,使用真实内容和数据,避免 lorem ipsum 和占位图片。"
example_prompt: "Use the Marketing Poster template to turn my content into a vertical poster or Moments-style share image with strong visual impact. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images."
example_prompt_i18n:
zh-CN: "用「营销海报」模板把我的内容做成一份「竖版海报 / 朋友圈分享图, 强视觉冲击」。保持模板的视觉签名,使用真实内容和数据,避免 lorem ipsum 和占位图片。"
---
【模板: 营销海报】

View file

@ -2,9 +2,9 @@
"$schema": "https://open-design.ai/schemas/plugin.v1.json",
"specVersion": "1.0.0",
"name": "example-poster-hero",
"title": "营销海报",
"title": "Marketing Poster",
"version": "0.1.0",
"description": "竖版海报 / 朋友圈分享图, 强视觉冲击",
"description": "Vertical poster or Moments-style share image with strong visual impact.",
"license": "MIT",
"author": {
"name": "Open Design",
@ -40,11 +40,18 @@
"entry": "./example.html"
},
"useCase": {
"query": "用「营销海报」模板把我的内容做成一份「竖版海报 / 朋友圈分享图, 强视觉冲击」。保持模板的视觉签名,使用真实内容和数据,避免 lorem ipsum 和占位图片。",
"query": {
"en": "Use the Marketing Poster template to turn my content into a vertical poster or Moments-style share image with strong visual impact. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images.",
"zh-CN": "用「营销海报」模板把我的内容做成一份「竖版海报 / 朋友圈分享图, 强视觉冲击」。保持模板的视觉签名,使用真实内容和数据,避免 lorem ipsum 和占位图片。"
},
"exampleOutputs": [
{
"path": "./example.html",
"title": "营销海报"
"title": "Marketing Poster",
"title_i18n": {
"en": "Marketing Poster",
"zh-CN": "营销海报"
}
}
]
},
@ -73,5 +80,13 @@
"prompt:inject",
"fs:write"
]
},
"title_i18n": {
"en": "Marketing Poster",
"zh-CN": "营销海报"
},
"description_i18n": {
"en": "Vertical poster or Moments-style share image with strong visual impact.",
"zh-CN": "竖版海报 / 朋友圈分享图, 强视觉冲击"
}
}

View file

@ -3,7 +3,9 @@ name: ppt-keynote
zh_name: "Keynote 风格 PPT"
en_name: "Keynote-style Slides"
emoji: "🎬"
description: "苹果 Keynote 级别幻灯片, 一屏一卡, 键盘左右切换"
description: "Apple Keynote-quality slides, one card per screen, with keyboard left/right navigation."
zh_description: "苹果 Keynote 级别幻灯片, 一屏一卡, 键盘左右切换"
en_description: "Apple Keynote-quality slides, one card per screen, with keyboard left/right navigation."
category: slides
scenario: marketing
aspect_hint: "16:9 (1280×720)"
@ -18,7 +20,6 @@ od:
mode: deck
surface: web
scenario: marketing
featured: 19
upstream: "https://github.com/nexu-io/html-anything"
preview:
type: html
@ -26,7 +27,9 @@ od:
reload: debounce-100
design_system:
requires: false
example_prompt: "用「Keynote 风格 PPT」模板把我的内容做成一套「苹果 Keynote 级别幻灯片, 一屏一卡, 键盘左右切换」。保持模板的视觉签名,使用真实内容和数据,避免 lorem ipsum 和占位图片。"
example_prompt: "Use the Keynote-style Slides template to turn my content into Apple Keynote-quality slides with one card per screen and keyboard left/right navigation. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images."
example_prompt_i18n:
zh-CN: "用「Keynote 风格 PPT」模板把我的内容做成一套「苹果 Keynote 级别幻灯片, 一屏一卡, 键盘左右切换」。保持模板的视觉签名,使用真实内容和数据,避免 lorem ipsum 和占位图片。"
---
【模板: Keynote 风格 PPT】

View file

@ -2,9 +2,9 @@
"$schema": "https://open-design.ai/schemas/plugin.v1.json",
"specVersion": "1.0.0",
"name": "example-ppt-keynote",
"title": "Keynote 风格 PPT",
"title": "Keynote-style Slides",
"version": "0.1.0",
"description": "苹果 Keynote 级别幻灯片, 一屏一卡, 键盘左右切换",
"description": "Apple Keynote-quality slides, one card per screen, with keyboard left/right navigation.",
"license": "MIT",
"author": {
"name": "Open Design",
@ -39,11 +39,18 @@
"entry": "./example.html"
},
"useCase": {
"query": "用「Keynote 风格 PPT」模板把我的内容做成一套「苹果 Keynote 级别幻灯片, 一屏一卡, 键盘左右切换」。保持模板的视觉签名,使用真实内容和数据,避免 lorem ipsum 和占位图片。",
"query": {
"en": "Use the Keynote-style Slides template to turn my content into Apple Keynote-quality slides with one card per screen and keyboard left/right navigation. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images.",
"zh-CN": "用「Keynote 风格 PPT」模板把我的内容做成一套「苹果 Keynote 级别幻灯片, 一屏一卡, 键盘左右切换」。保持模板的视觉签名,使用真实内容和数据,避免 lorem ipsum 和占位图片。"
},
"exampleOutputs": [
{
"path": "./example.html",
"title": "Keynote 风格 PPT"
"title": "Keynote-style Slides",
"title_i18n": {
"en": "Keynote-style Slides",
"zh-CN": "Keynote 风格 PPT"
}
}
]
},
@ -72,5 +79,13 @@
"prompt:inject",
"fs:write"
]
},
"title_i18n": {
"en": "Keynote-style Slides",
"zh-CN": "Keynote 风格 PPT"
},
"description_i18n": {
"en": "Apple Keynote-quality slides, one card per screen, with keyboard left/right navigation.",
"zh-CN": "苹果 Keynote 级别幻灯片, 一屏一卡, 键盘左右切换"
}
}

View file

@ -3,7 +3,9 @@ name: resume-modern
zh_name: "极简简历"
en_name: "Modern Resume"
emoji: "📄"
description: "现代极简简历, A4 单页, 适合打印或导出 PDF"
description: "Modern minimal resume, single A4 page, ready for print or PDF export."
zh_description: "现代极简简历, A4 单页, 适合打印或导出 PDF"
en_description: "Modern minimal resume, single A4 page, ready for print or PDF export."
category: resume
scenario: personal
aspect_hint: "A4 (210×297mm)"
@ -19,7 +21,6 @@ od:
surface: web
platform: desktop
scenario: personal
featured: 12
upstream: "https://github.com/nexu-io/html-anything"
preview:
type: html
@ -27,7 +28,9 @@ od:
reload: debounce-100
design_system:
requires: false
example_prompt: "用「极简简历」模板把我的内容做成一份「现代极简简历, A4 单页, 适合打印或导出 PDF」。保持模板的视觉签名使用真实内容和数据避免 lorem ipsum 和占位图片。"
example_prompt: "Use the Modern Resume template to turn my content into a modern minimal single-page A4 resume ready for print or PDF export. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images."
example_prompt_i18n:
zh-CN: "用「极简简历」模板把我的内容做成一份「现代极简简历, A4 单页, 适合打印或导出 PDF」。保持模板的视觉签名使用真实内容和数据避免 lorem ipsum 和占位图片。"
---
【模板: 现代极简简历】

View file

@ -2,9 +2,9 @@
"$schema": "https://open-design.ai/schemas/plugin.v1.json",
"specVersion": "1.0.0",
"name": "example-resume-modern",
"title": "极简简历",
"title": "Modern Resume",
"version": "0.1.0",
"description": "现代极简简历, A4 单页, 适合打印或导出 PDF",
"description": "Modern minimal resume, single A4 page, ready for print or PDF export.",
"license": "MIT",
"author": {
"name": "Open Design",
@ -41,11 +41,18 @@
"entry": "./example.html"
},
"useCase": {
"query": "用「极简简历」模板把我的内容做成一份「现代极简简历, A4 单页, 适合打印或导出 PDF」。保持模板的视觉签名使用真实内容和数据避免 lorem ipsum 和占位图片。",
"query": {
"en": "Use the Modern Resume template to turn my content into a modern minimal single-page A4 resume ready for print or PDF export. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images.",
"zh-CN": "用「极简简历」模板把我的内容做成一份「现代极简简历, A4 单页, 适合打印或导出 PDF」。保持模板的视觉签名使用真实内容和数据避免 lorem ipsum 和占位图片。"
},
"exampleOutputs": [
{
"path": "./example.html",
"title": "极简简历"
"title": "Modern Resume",
"title_i18n": {
"en": "Modern Resume",
"zh-CN": "极简简历"
}
}
]
},
@ -74,5 +81,13 @@
"prompt:inject",
"fs:write"
]
},
"title_i18n": {
"en": "Modern Resume",
"zh-CN": "极简简历"
},
"description_i18n": {
"en": "Modern minimal resume, single A4 page, ready for print or PDF export.",
"zh-CN": "现代极简简历, A4 单页, 适合打印或导出 PDF"
}
}

View file

@ -3,7 +3,9 @@ name: social-reddit-card
zh_name: "Reddit 帖子卡"
en_name: "Reddit Post Card"
emoji: "🔺"
description: "拟真 Reddit 帖子卡 + 上下投票 + 评论数, 适合视频叠加 / 故事分享"
description: "Realistic Reddit post card with vote rail and comment count, suited to video overlays or story sharing."
zh_description: "拟真 Reddit 帖子卡 + 上下投票 + 评论数, 适合视频叠加 / 故事分享"
en_description: "Realistic Reddit post card with vote rail and comment count, suited to video overlays or story sharing."
category: card
scenario: marketing
aspect_hint: "1280×720 或 800×600"
@ -21,7 +23,6 @@ od:
surface: web
platform: desktop
scenario: marketing
featured: 42
upstream: "https://github.com/nexu-io/html-anything"
preview:
type: html
@ -29,7 +30,9 @@ od:
reload: debounce-100
design_system:
requires: false
example_prompt: "用「Reddit 帖子卡」模板把我的内容做成一份「拟真 Reddit 帖子卡 + 上下投票 + 评论数, 适合视频叠加 / 故事分享」。保持模板的视觉签名,使用真实内容和数据,避免 lorem ipsum 和占位图片。"
example_prompt: "Use the Reddit Post Card template to turn my content into a realistic Reddit post card with vote rail and comment count for a video overlay or story share. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images."
example_prompt_i18n:
zh-CN: "用「Reddit 帖子卡」模板把我的内容做成一份「拟真 Reddit 帖子卡 + 上下投票 + 评论数, 适合视频叠加 / 故事分享」。保持模板的视觉签名,使用真实内容和数据,避免 lorem ipsum 和占位图片。"
---
【模板: Reddit 帖子卡】

View file

@ -2,9 +2,9 @@
"$schema": "https://open-design.ai/schemas/plugin.v1.json",
"specVersion": "1.0.0",
"name": "example-social-reddit-card",
"title": "Reddit 帖子卡",
"title": "Reddit Post Card",
"version": "0.1.0",
"description": "拟真 Reddit 帖子卡 + 上下投票 + 评论数, 适合视频叠加 / 故事分享",
"description": "Realistic Reddit post card with vote rail and comment count, suited to video overlays or story sharing.",
"license": "MIT",
"author": {
"name": "Open Design",
@ -43,11 +43,18 @@
"entry": "./example.html"
},
"useCase": {
"query": "用「Reddit 帖子卡」模板把我的内容做成一份「拟真 Reddit 帖子卡 + 上下投票 + 评论数, 适合视频叠加 / 故事分享」。保持模板的视觉签名,使用真实内容和数据,避免 lorem ipsum 和占位图片。",
"query": {
"en": "Use the Reddit Post Card template to turn my content into a realistic Reddit post card with vote rail and comment count for a video overlay or story share. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images.",
"zh-CN": "用「Reddit 帖子卡」模板把我的内容做成一份「拟真 Reddit 帖子卡 + 上下投票 + 评论数, 适合视频叠加 / 故事分享」。保持模板的视觉签名,使用真实内容和数据,避免 lorem ipsum 和占位图片。"
},
"exampleOutputs": [
{
"path": "./example.html",
"title": "Reddit 帖子卡"
"title": "Reddit Post Card",
"title_i18n": {
"en": "Reddit Post Card",
"zh-CN": "Reddit 帖子卡"
}
}
]
},
@ -76,5 +83,13 @@
"prompt:inject",
"fs:write"
]
},
"title_i18n": {
"en": "Reddit Post Card",
"zh-CN": "Reddit 帖子卡"
},
"description_i18n": {
"en": "Realistic Reddit post card with vote rail and comment count, suited to video overlays or story sharing.",
"zh-CN": "拟真 Reddit 帖子卡 + 上下投票 + 评论数, 适合视频叠加 / 故事分享"
}
}

View file

@ -3,7 +3,9 @@ name: social-spotify-card
zh_name: "Spotify 正在播放卡"
en_name: "Spotify Now-Playing Card"
emoji: "🎵"
description: "Spotify Now Playing 风格卡: 专辑封面 + 进度条 + 播放控制, 适配视频叠加 / 个人主页"
description: "Spotify Now Playing-style card with album art, progress bar, and playback controls, suited to video overlays or personal homepages."
zh_description: "Spotify Now Playing 风格卡: 专辑封面 + 进度条 + 播放控制, 适配视频叠加 / 个人主页"
en_description: "Spotify Now Playing-style card with album art, progress bar, and playback controls, suited to video overlays or personal homepages."
category: card
scenario: personal
aspect_hint: "1280×720 或 600×200"
@ -21,7 +23,6 @@ od:
surface: web
platform: desktop
scenario: personal
featured: 43
upstream: "https://github.com/nexu-io/html-anything"
preview:
type: html
@ -29,7 +30,9 @@ od:
reload: debounce-100
design_system:
requires: false
example_prompt: "用「Spotify 正在播放卡」模板把我的内容做成一份「Spotify Now Playing 风格卡: 专辑封面 + 进度条 + 播放控制, 适配视频叠加 / 个人主页」。保持模板的视觉签名,使用真实内容和数据,避免 lorem ipsum 和占位图片。"
example_prompt: "Use the Spotify Now-Playing Card template to turn my content into a Spotify Now Playing-style card with album art, progress bar, and playback controls for a video overlay or personal homepage. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images."
example_prompt_i18n:
zh-CN: "用「Spotify 正在播放卡」模板把我的内容做成一份「Spotify Now Playing 风格卡: 专辑封面 + 进度条 + 播放控制, 适配视频叠加 / 个人主页」。保持模板的视觉签名,使用真实内容和数据,避免 lorem ipsum 和占位图片。"
---
【模板: Spotify Now-Playing 卡】

View file

@ -2,9 +2,9 @@
"$schema": "https://open-design.ai/schemas/plugin.v1.json",
"specVersion": "1.0.0",
"name": "example-social-spotify-card",
"title": "Spotify 正在播放卡",
"title": "Spotify Now-Playing Card",
"version": "0.1.0",
"description": "Spotify Now Playing 风格卡: 专辑封面 + 进度条 + 播放控制, 适配视频叠加 / 个人主页",
"description": "Spotify Now Playing-style card with album art, progress bar, and playback controls, suited to video overlays or personal homepages.",
"license": "MIT",
"author": {
"name": "Open Design",
@ -43,11 +43,18 @@
"entry": "./example.html"
},
"useCase": {
"query": "用「Spotify 正在播放卡」模板把我的内容做成一份「Spotify Now Playing 风格卡: 专辑封面 + 进度条 + 播放控制, 适配视频叠加 / 个人主页」。保持模板的视觉签名,使用真实内容和数据,避免 lorem ipsum 和占位图片。",
"query": {
"en": "Use the Spotify Now-Playing Card template to turn my content into a Spotify Now Playing-style card with album art, progress bar, and playback controls for a video overlay or personal homepage. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images.",
"zh-CN": "用「Spotify 正在播放卡」模板把我的内容做成一份「Spotify Now Playing 风格卡: 专辑封面 + 进度条 + 播放控制, 适配视频叠加 / 个人主页」。保持模板的视觉签名,使用真实内容和数据,避免 lorem ipsum 和占位图片。"
},
"exampleOutputs": [
{
"path": "./example.html",
"title": "Spotify 正在播放卡"
"title": "Spotify Now-Playing Card",
"title_i18n": {
"en": "Spotify Now-Playing Card",
"zh-CN": "Spotify 正在播放卡"
}
}
]
},
@ -76,5 +83,13 @@
"prompt:inject",
"fs:write"
]
},
"title_i18n": {
"en": "Spotify Now-Playing Card",
"zh-CN": "Spotify 正在播放卡"
},
"description_i18n": {
"en": "Spotify Now Playing-style card with album art, progress bar, and playback controls, suited to video overlays or personal homepages.",
"zh-CN": "Spotify Now Playing 风格卡: 专辑封面 + 进度条 + 播放控制, 适配视频叠加 / 个人主页"
}
}

View file

@ -3,7 +3,9 @@ name: social-x-post-card
zh_name: "X (Twitter) 帖子卡"
en_name: "X / Twitter Post Card"
emoji: "𝕏"
description: "拟真 X 推文卡片 + 互动数据 (likes/reposts/views), 适配视频叠加或图卡分享"
description: "Realistic X post card with engagement metrics (likes, reposts, views), suited to video overlays or shareable image cards."
zh_description: "拟真 X 推文卡片 + 互动数据 (likes/reposts/views), 适配视频叠加或图卡分享"
en_description: "Realistic X post card with engagement metrics (likes, reposts, views), suited to video overlays or shareable image cards."
category: card
scenario: marketing
aspect_hint: "1280×720 或 1080×1080"
@ -21,7 +23,6 @@ od:
surface: web
platform: desktop
scenario: marketing
featured: 44
upstream: "https://github.com/nexu-io/html-anything"
preview:
type: html
@ -29,7 +30,9 @@ od:
reload: debounce-100
design_system:
requires: false
example_prompt: "用「X (Twitter) 帖子卡」模板把我的内容做成一份「拟真 X 推文卡片 + 互动数据 (likes/reposts/views), 适配视频叠加或图卡分享」。保持模板的视觉签名,使用真实内容和数据,避免 lorem ipsum 和占位图片。"
example_prompt: "Use the X / Twitter Post Card template to turn my content into a realistic X post card with engagement metrics for a video overlay or shareable image card. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images."
example_prompt_i18n:
zh-CN: "用「X (Twitter) 帖子卡」模板把我的内容做成一份「拟真 X 推文卡片 + 互动数据 (likes/reposts/views), 适配视频叠加或图卡分享」。保持模板的视觉签名,使用真实内容和数据,避免 lorem ipsum 和占位图片。"
---
【模板: X (Twitter) 帖子卡】

View file

@ -2,9 +2,9 @@
"$schema": "https://open-design.ai/schemas/plugin.v1.json",
"specVersion": "1.0.0",
"name": "example-social-x-post-card",
"title": "X (Twitter) 帖子卡",
"title": "X / Twitter Post Card",
"version": "0.1.0",
"description": "拟真 X 推文卡片 + 互动数据 (likes/reposts/views), 适配视频叠加或图卡分享",
"description": "Realistic X post card with engagement metrics (likes, reposts, views), suited to video overlays or shareable image cards.",
"license": "MIT",
"author": {
"name": "Open Design",
@ -43,11 +43,18 @@
"entry": "./example.html"
},
"useCase": {
"query": "用「X (Twitter) 帖子卡」模板把我的内容做成一份「拟真 X 推文卡片 + 互动数据 (likes/reposts/views), 适配视频叠加或图卡分享」。保持模板的视觉签名,使用真实内容和数据,避免 lorem ipsum 和占位图片。",
"query": {
"en": "Use the X / Twitter Post Card template to turn my content into a realistic X post card with engagement metrics for a video overlay or shareable image card. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images.",
"zh-CN": "用「X (Twitter) 帖子卡」模板把我的内容做成一份「拟真 X 推文卡片 + 互动数据 (likes/reposts/views), 适配视频叠加或图卡分享」。保持模板的视觉签名,使用真实内容和数据,避免 lorem ipsum 和占位图片。"
},
"exampleOutputs": [
{
"path": "./example.html",
"title": "X (Twitter) 帖子卡"
"title": "X / Twitter Post Card",
"title_i18n": {
"en": "X / Twitter Post Card",
"zh-CN": "X (Twitter) 帖子卡"
}
}
]
},
@ -76,5 +83,13 @@
"prompt:inject",
"fs:write"
]
},
"title_i18n": {
"en": "X / Twitter Post Card",
"zh-CN": "X (Twitter) 帖子卡"
},
"description_i18n": {
"en": "Realistic X post card with engagement metrics (likes, reposts, views), suited to video overlays or shareable image cards.",
"zh-CN": "拟真 X 推文卡片 + 互动数据 (likes/reposts/views), 适配视频叠加或图卡分享"
}
}

View file

@ -3,7 +3,9 @@ name: vfx-text-cursor
zh_name: "VFX 文字光标"
en_name: "VFX Text Cursor"
emoji: "✨"
description: "光标拖光 + 彩色像散射线 + 定向光斑, 适合视频片头逐字揭示金句"
description: "Cursor light trail, chromatic rays, and directional flares for word-by-word quote reveals in video intros."
zh_description: "光标拖光 + 彩色像散射线 + 定向光斑, 适合视频片头逐字揭示金句"
en_description: "Cursor light trail, chromatic rays, and directional flares for word-by-word quote reveals in video intros."
category: video
scenario: video
aspect_hint: "1920×1080 (16:9)"
@ -29,7 +31,9 @@ od:
reload: debounce-100
design_system:
requires: false
example_prompt: "用「VFX 文字光标」模板把我的内容做成一段「光标拖光 + 彩色像散射线 + 定向光斑, 适合视频片头逐字揭示金句」。保持模板的视觉签名,使用真实内容和数据,避免 lorem ipsum 和占位图片。"
example_prompt: "Use the VFX Text Cursor template to turn my content into a video-intro quote reveal with cursor light trails, chromatic rays, and directional flares. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images."
example_prompt_i18n:
zh-CN: "用「VFX 文字光标」模板把我的内容做成一段「光标拖光 + 彩色像散射线 + 定向光斑, 适合视频片头逐字揭示金句」。保持模板的视觉签名,使用真实内容和数据,避免 lorem ipsum 和占位图片。"
---
【模板: VFX 文字光标 (Text Cursor)】

View file

@ -2,9 +2,9 @@
"$schema": "https://open-design.ai/schemas/plugin.v1.json",
"specVersion": "1.0.0",
"name": "example-vfx-text-cursor",
"title": "VFX 文字光标",
"title": "VFX Text Cursor",
"version": "0.1.0",
"description": "光标拖光 + 彩色像散射线 + 定向光斑, 适合视频片头逐字揭示金句",
"description": "Cursor light trail, chromatic rays, and directional flares for word-by-word quote reveals in video intros.",
"license": "MIT",
"author": {
"name": "Open Design",
@ -41,11 +41,18 @@
"entry": "./example.html"
},
"useCase": {
"query": "用「VFX 文字光标」模板把我的内容做成一段「光标拖光 + 彩色像散射线 + 定向光斑, 适合视频片头逐字揭示金句」。保持模板的视觉签名,使用真实内容和数据,避免 lorem ipsum 和占位图片。",
"query": {
"en": "Use the VFX Text Cursor template to turn my content into a video-intro quote reveal with cursor light trails, chromatic rays, and directional flares. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images.",
"zh-CN": "用「VFX 文字光标」模板把我的内容做成一段「光标拖光 + 彩色像散射线 + 定向光斑, 适合视频片头逐字揭示金句」。保持模板的视觉签名,使用真实内容和数据,避免 lorem ipsum 和占位图片。"
},
"exampleOutputs": [
{
"path": "./example.html",
"title": "VFX 文字光标"
"title": "VFX Text Cursor",
"title_i18n": {
"en": "VFX Text Cursor",
"zh-CN": "VFX 文字光标"
}
}
]
},
@ -74,5 +81,13 @@
"prompt:inject",
"fs:write"
]
},
"title_i18n": {
"en": "VFX Text Cursor",
"zh-CN": "VFX 文字光标"
},
"description_i18n": {
"en": "Cursor light trail, chromatic rays, and directional flares for word-by-word quote reveals in video intros.",
"zh-CN": "光标拖光 + 彩色像散射线 + 定向光斑, 适合视频片头逐字揭示金句"
}
}

View file

@ -3,7 +3,9 @@ name: video-hyperframes
zh_name: "Hyperframes 视频脚本"
en_name: "Hyperframes Video"
emoji: "🎞️"
description: "Hyperframes / Remotion 兼容的连续帧动画, 可自动播放"
description: "Hyperframes / Remotion-compatible continuous frame animation with autoplay support."
zh_description: "Hyperframes / Remotion 兼容的连续帧动画, 可自动播放"
en_description: "Hyperframes / Remotion-compatible continuous frame animation with autoplay support."
category: video
scenario: video
aspect_hint: "1920×1080 (16:9)"
@ -28,7 +30,9 @@ od:
reload: debounce-100
design_system:
requires: false
example_prompt: "用「Hyperframes 视频脚本」模板把我的内容做成一段「Hyperframes / Remotion 兼容的连续帧动画, 可自动播放」。保持模板的视觉签名,使用真实内容和数据,避免 lorem ipsum 和占位图片。"
example_prompt: "Use the Hyperframes Video template to turn my content into a Hyperframes / Remotion-compatible continuous frame animation with autoplay support. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images."
example_prompt_i18n:
zh-CN: "用「Hyperframes 视频脚本」模板把我的内容做成一段「Hyperframes / Remotion 兼容的连续帧动画, 可自动播放」。保持模板的视觉签名,使用真实内容和数据,避免 lorem ipsum 和占位图片。"
---
【模板: Hyperframes 视频帧】

View file

@ -2,9 +2,9 @@
"$schema": "https://open-design.ai/schemas/plugin.v1.json",
"specVersion": "1.0.0",
"name": "example-video-hyperframes",
"title": "Hyperframes 视频脚本",
"title": "Hyperframes Video",
"version": "0.1.0",
"description": "Hyperframes / Remotion 兼容的连续帧动画, 可自动播放",
"description": "Hyperframes / Remotion-compatible continuous frame animation with autoplay support.",
"license": "MIT",
"author": {
"name": "Open Design",
@ -38,11 +38,18 @@
"entry": "./example.html"
},
"useCase": {
"query": "用「Hyperframes 视频脚本」模板把我的内容做成一段「Hyperframes / Remotion 兼容的连续帧动画, 可自动播放」。保持模板的视觉签名,使用真实内容和数据,避免 lorem ipsum 和占位图片。",
"query": {
"en": "Use the Hyperframes Video template to turn my content into a Hyperframes / Remotion-compatible continuous frame animation with autoplay support. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images.",
"zh-CN": "用「Hyperframes 视频脚本」模板把我的内容做成一段「Hyperframes / Remotion 兼容的连续帧动画, 可自动播放」。保持模板的视觉签名,使用真实内容和数据,避免 lorem ipsum 和占位图片。"
},
"exampleOutputs": [
{
"path": "./example.html",
"title": "Hyperframes 视频脚本"
"title": "Hyperframes Video",
"title_i18n": {
"en": "Hyperframes Video",
"zh-CN": "Hyperframes 视频脚本"
}
}
]
},
@ -71,5 +78,13 @@
"prompt:inject",
"fs:write"
]
},
"title_i18n": {
"en": "Hyperframes Video",
"zh-CN": "Hyperframes 视频脚本"
},
"description_i18n": {
"en": "Hyperframes / Remotion-compatible continuous frame animation with autoplay support.",
"zh-CN": "Hyperframes / Remotion 兼容的连续帧动画, 可自动播放"
}
}

View file

@ -3592,7 +3592,7 @@
},
{
"name": "open-design/example-article-magazine",
"title": "杂志文章",
"title": "Magazine Article",
"version": "0.1.0",
"source": "github:nexu-io/open-design@main/plugins/_official/examples/article-magazine",
"publisher": {
@ -3619,7 +3619,15 @@
"homepage": "https://github.com/nexu-io/open-design/tree/main/plugins/_official/examples/article-magazine",
"license": "MIT",
"mode": "prototype",
"taskKind": "new-generation"
"taskKind": "new-generation",
"title_i18n": {
"en": "Magazine Article",
"zh-CN": "杂志文章"
},
"description_i18n": {
"en": "Huashu / huashu-md-html-inspired magazine article layout for turning Markdown or notes into a polished long-form HTML essay.",
"zh-CN": "Huashu / huashu-md-html 风格杂志文章版式, 将 Markdown 或笔记转成精排长文 HTML。"
}
},
{
"name": "open-design/example-audio-jingle",
@ -3689,7 +3697,7 @@
},
{
"name": "open-design/example-card-twitter",
"title": "Twitter 分享卡",
"title": "Twitter Share Card",
"version": "0.1.0",
"source": "github:nexu-io/open-design@main/plugins/_official/examples/card-twitter",
"publisher": {
@ -3700,7 +3708,7 @@
"prompt:inject",
"fs:write"
],
"description": "推特金句 / 数据卡, 适合配推文",
"description": "Twitter quote or data card designed to pair with a post.",
"tags": [
"example",
"first-party",
@ -3716,11 +3724,19 @@
"homepage": "https://github.com/nexu-io/open-design/tree/main/plugins/_official/examples/card-twitter",
"license": "MIT",
"mode": "prototype",
"taskKind": "new-generation"
"taskKind": "new-generation",
"title_i18n": {
"en": "Twitter Share Card",
"zh-CN": "Twitter 分享卡"
},
"description_i18n": {
"en": "Twitter quote or data card designed to pair with a post.",
"zh-CN": "推特金句 / 数据卡, 适合配推文"
}
},
{
"name": "open-design/example-card-xiaohongshu",
"title": "小红书图文卡片",
"title": "Xiaohongshu Card",
"version": "0.1.0",
"source": "github:nexu-io/open-design@main/plugins/_official/examples/card-xiaohongshu",
"publisher": {
@ -3731,7 +3747,7 @@
"prompt:inject",
"fs:write"
],
"description": "小红书风格知识卡片, 多张联排可滑动浏览",
"description": "Xiaohongshu-style knowledge cards, arranged as a swipeable multi-card carousel.",
"tags": [
"example",
"first-party",
@ -3746,7 +3762,15 @@
"homepage": "https://github.com/nexu-io/open-design/tree/main/plugins/_official/examples/card-xiaohongshu",
"license": "MIT",
"mode": "prototype",
"taskKind": "new-generation"
"taskKind": "new-generation",
"title_i18n": {
"en": "Xiaohongshu Card",
"zh-CN": "小红书图文卡片"
},
"description_i18n": {
"en": "Xiaohongshu-style knowledge cards, arranged as a swipeable multi-card carousel.",
"zh-CN": "小红书风格知识卡片, 多张联排可滑动浏览"
}
},
{
"name": "open-design/example-clinical-case-report",
@ -3853,7 +3877,7 @@
},
{
"name": "open-design/example-data-report",
"title": "数据可视化报告",
"title": "Data Visualization Report",
"version": "0.1.0",
"source": "github:nexu-io/open-design@main/plugins/_official/examples/data-report",
"publisher": {
@ -3864,7 +3888,7 @@
"prompt:inject",
"fs:write"
],
"description": "把 CSV/Excel/JSON 数据转成漂亮的可视化报告页",
"description": "Turns CSV, Excel, or JSON data into a polished visual report page.",
"tags": [
"example",
"first-party",
@ -3880,7 +3904,15 @@
"homepage": "https://github.com/nexu-io/open-design/tree/main/plugins/_official/examples/data-report",
"license": "MIT",
"mode": "prototype",
"taskKind": "new-generation"
"taskKind": "new-generation",
"title_i18n": {
"en": "Data Visualization Report",
"zh-CN": "数据可视化报告"
},
"description_i18n": {
"en": "Turns CSV, Excel, or JSON data into a polished visual report page.",
"zh-CN": "把 CSV/Excel/JSON 数据转成漂亮的可视化报告页"
}
},
{
"name": "open-design/example-dating-web",
@ -3952,7 +3984,7 @@
},
{
"name": "open-design/example-deck-guizang-editorial",
"title": "归藏编辑墨水 Deck",
"title": "Guizang Editorial E-Ink Deck",
"version": "0.1.0",
"source": "github:nexu-io/open-design@main/plugins/_official/examples/deck-guizang-editorial",
"publisher": {
@ -3963,7 +3995,7 @@
"prompt:inject",
"fs:write"
],
"description": "电子杂志 × 电子墨水; 10 个版面 + 5 套调色板 (墨水/靛蓝瓷/森林墨/牛皮纸/沙丘)",
"description": "Editorial magazine meets e-ink: 10 layouts and 5 palettes (Ink, Indigo Porcelain, Forest Ink, Kraft Paper, Dune).",
"tags": [
"example",
"first-party",
@ -3979,11 +4011,19 @@
"homepage": "https://github.com/nexu-io/open-design/tree/main/plugins/_official/examples/deck-guizang-editorial",
"license": "MIT",
"mode": "deck",
"taskKind": "new-generation"
"taskKind": "new-generation",
"title_i18n": {
"en": "Guizang Editorial E-Ink Deck",
"zh-CN": "归藏编辑墨水 Deck"
},
"description_i18n": {
"en": "Editorial magazine meets e-ink: 10 layouts and 5 palettes (Ink, Indigo Porcelain, Forest Ink, Kraft Paper, Dune).",
"zh-CN": "电子杂志 × 电子墨水; 10 个版面 + 5 套调色板 (墨水/靛蓝瓷/森林墨/牛皮纸/沙丘)"
}
},
{
"name": "open-design/example-deck-open-slide-canvas",
"title": "1920 画布自由 Deck",
"title": "Open-Slide 1920 Canvas Deck",
"version": "0.1.0",
"source": "github:nexu-io/open-design@main/plugins/_official/examples/deck-open-slide-canvas",
"publisher": {
@ -3994,7 +4034,7 @@
"prompt:inject",
"fs:write"
],
"description": "锁死 1920×1080 画布, React 组件级自由组合, 不绑模板",
"description": "Locked 1920x1080 canvas deck with React component-level free composition, not bound to a fixed template.",
"tags": [
"example",
"first-party",
@ -4010,11 +4050,19 @@
"homepage": "https://github.com/nexu-io/open-design/tree/main/plugins/_official/examples/deck-open-slide-canvas",
"license": "MIT",
"mode": "deck",
"taskKind": "new-generation"
"taskKind": "new-generation",
"title_i18n": {
"en": "Open-Slide 1920 Canvas Deck",
"zh-CN": "1920 画布自由 Deck"
},
"description_i18n": {
"en": "Locked 1920x1080 canvas deck with React component-level free composition, not bound to a fixed template.",
"zh-CN": "锁死 1920×1080 画布, React 组件级自由组合, 不绑模板"
}
},
{
"name": "open-design/example-deck-swiss-international",
"title": "瑞士国际主义 Deck",
"title": "Swiss International Deck",
"version": "0.1.0",
"source": "github:nexu-io/open-design@main/plugins/_official/examples/deck-swiss-international",
"publisher": {
@ -4025,7 +4073,7 @@
"prompt:inject",
"fs:write"
],
"description": "16 列网格 + 单一饱和 accent + 22 个锁死版面 (Klein Blue / Lemon / Mint / Safety Orange)",
"description": "16-column grid, one saturated accent, and 22 locked layouts (Klein Blue, Lemon, Mint, Safety Orange).",
"tags": [
"example",
"first-party",
@ -4042,7 +4090,15 @@
"homepage": "https://github.com/nexu-io/open-design/tree/main/plugins/_official/examples/deck-swiss-international",
"license": "MIT",
"mode": "deck",
"taskKind": "new-generation"
"taskKind": "new-generation",
"title_i18n": {
"en": "Swiss International Deck",
"zh-CN": "瑞士国际主义 Deck"
},
"description_i18n": {
"en": "16-column grid, one saturated accent, and 22 locked layouts (Klein Blue, Lemon, Mint, Safety Orange).",
"zh-CN": "16 列网格 + 单一饱和 accent + 22 个锁死版面 (Klein Blue / Lemon / Mint / Safety Orange)"
}
},
{
"name": "open-design/example-design-brief",
@ -4113,7 +4169,7 @@
},
{
"name": "open-design/example-doc-kami-parchment",
"title": "Kami 羊皮纸文档",
"title": "Kami Parchment Document",
"version": "0.1.0",
"source": "github:nexu-io/open-design@main/plugins/_official/examples/doc-kami-parchment",
"publisher": {
@ -4124,7 +4180,7 @@
"prompt:inject",
"fs:write"
],
"description": "暖羊皮纸底 (#f5f4ed) + 墨蓝单色 accent (#1B365D) + 单一衬线字体, 编辑级排印",
"description": "Warm parchment canvas (#f5f4ed), monochrome ink-blue accent (#1B365D), one serif family, and editorial-grade typography.",
"tags": [
"example",
"first-party",
@ -4143,7 +4199,15 @@
"homepage": "https://github.com/nexu-io/open-design/tree/main/plugins/_official/examples/doc-kami-parchment",
"license": "MIT",
"mode": "prototype",
"taskKind": "new-generation"
"taskKind": "new-generation",
"title_i18n": {
"en": "Kami Parchment Document",
"zh-CN": "Kami 羊皮纸文档"
},
"description_i18n": {
"en": "Warm parchment canvas (#f5f4ed), monochrome ink-blue accent (#1B365D), one serif family, and editorial-grade typography.",
"zh-CN": "暖羊皮纸底 (#f5f4ed) + 墨蓝单色 accent (#1B365D) + 单一衬线字体, 编辑级排印"
}
},
{
"name": "open-design/example-docs-page",
@ -4313,7 +4377,7 @@
},
{
"name": "open-design/example-frame-data-chart-nyt",
"title": "NYT 风数据图表帧",
"title": "NYT-Style Data Chart Frame",
"version": "0.1.0",
"source": "github:nexu-io/open-design@main/plugins/_official/examples/frame-data-chart-nyt",
"publisher": {
@ -4324,7 +4388,7 @@
"prompt:inject",
"fs:write"
],
"description": "NYT-newsroom 排版 + 错峰揭示动画 + 编辑级图表 (折线/柱/范围带)",
"description": "NYT-newsroom typography, staggered reveal animation, and editorial-grade charts (line, bar, or range band).",
"tags": [
"example",
"first-party",
@ -4338,11 +4402,19 @@
"homepage": "https://github.com/nexu-io/open-design/tree/main/plugins/_official/examples/frame-data-chart-nyt",
"license": "MIT",
"mode": "video",
"taskKind": "new-generation"
"taskKind": "new-generation",
"title_i18n": {
"en": "NYT-Style Data Chart Frame",
"zh-CN": "NYT 风数据图表帧"
},
"description_i18n": {
"en": "NYT-newsroom typography, staggered reveal animation, and editorial-grade charts (line, bar, or range band).",
"zh-CN": "NYT-newsroom 排版 + 错峰揭示动画 + 编辑级图表 (折线/柱/范围带)"
}
},
{
"name": "open-design/example-frame-flowchart-sticky",
"title": "便利贴流程图帧",
"title": "Sticky Flowchart Frame",
"version": "0.1.0",
"source": "github:nexu-io/open-design@main/plugins/_official/examples/frame-flowchart-sticky",
"publisher": {
@ -4353,7 +4425,7 @@
"prompt:inject",
"fs:write"
],
"description": "SVG 曲线连接 + 便利贴节点 + 光标交互, 像白板 brainstorm",
"description": "SVG curve connectors, sticky-note nodes, and cursor interaction with a whiteboard-brainstorm feel.",
"tags": [
"example",
"first-party",
@ -4368,11 +4440,19 @@
"homepage": "https://github.com/nexu-io/open-design/tree/main/plugins/_official/examples/frame-flowchart-sticky",
"license": "MIT",
"mode": "video",
"taskKind": "new-generation"
"taskKind": "new-generation",
"title_i18n": {
"en": "Sticky Flowchart Frame",
"zh-CN": "便利贴流程图帧"
},
"description_i18n": {
"en": "SVG curve connectors, sticky-note nodes, and cursor interaction with a whiteboard-brainstorm feel.",
"zh-CN": "SVG 曲线连接 + 便利贴节点 + 光标交互, 像白板 brainstorm"
}
},
{
"name": "open-design/example-frame-glitch-title",
"title": "故障艺术标题帧",
"title": "Glitch Title Frame",
"version": "0.1.0",
"source": "github:nexu-io/open-design@main/plugins/_official/examples/frame-glitch-title",
"publisher": {
@ -4383,7 +4463,7 @@
"prompt:inject",
"fs:write"
],
"description": "数字故障 / 像散偏移 / 数据腐败标题, 适合视频转场 / cyberpunk hero",
"description": "Digital glitch, chromatic offset, and data-corruption title frame for video transitions or cyberpunk heroes.",
"tags": [
"example",
"first-party",
@ -4398,11 +4478,19 @@
"homepage": "https://github.com/nexu-io/open-design/tree/main/plugins/_official/examples/frame-glitch-title",
"license": "MIT",
"mode": "video",
"taskKind": "new-generation"
"taskKind": "new-generation",
"title_i18n": {
"en": "Glitch Title Frame",
"zh-CN": "故障艺术标题帧"
},
"description_i18n": {
"en": "Digital glitch, chromatic offset, and data-corruption title frame for video transitions or cyberpunk heroes.",
"zh-CN": "数字故障 / 像散偏移 / 数据腐败标题, 适合视频转场 / cyberpunk hero"
}
},
{
"name": "open-design/example-frame-light-leak-cinema",
"title": "胶片漏光电影帧",
"title": "Light-Leak Cinematic Frame",
"version": "0.1.0",
"source": "github:nexu-io/open-design@main/plugins/_official/examples/frame-light-leak-cinema",
"publisher": {
@ -4413,7 +4501,7 @@
"prompt:inject",
"fs:write"
],
"description": "胶片漏光 + 颗粒噪点 + 16:9 letterbox + 衬线大字, 电影感开场 / 章节卡",
"description": "Film light leaks, grain, 16:9 letterbox, and large serif type for cinematic openings or chapter cards.",
"tags": [
"example",
"first-party",
@ -4428,11 +4516,19 @@
"homepage": "https://github.com/nexu-io/open-design/tree/main/plugins/_official/examples/frame-light-leak-cinema",
"license": "MIT",
"mode": "video",
"taskKind": "new-generation"
"taskKind": "new-generation",
"title_i18n": {
"en": "Light-Leak Cinematic Frame",
"zh-CN": "胶片漏光电影帧"
},
"description_i18n": {
"en": "Film light leaks, grain, 16:9 letterbox, and large serif type for cinematic openings or chapter cards.",
"zh-CN": "胶片漏光 + 颗粒噪点 + 16:9 letterbox + 衬线大字, 电影感开场 / 章节卡"
}
},
{
"name": "open-design/example-frame-liquid-bg-hero",
"title": "流体背景 Hero 帧",
"title": "Liquid Background Hero",
"version": "0.1.0",
"source": "github:nexu-io/open-design@main/plugins/_official/examples/frame-liquid-bg-hero",
"publisher": {
@ -4443,7 +4539,7 @@
"prompt:inject",
"fs:write"
],
"description": "WebGL 风流体置换背景 + 顶部叠加金句, 适合视频片头 / landing hero / 海报",
"description": "WebGL-style fluid displacement background with a quote overlay, suited to video intros, landing heroes, or posters.",
"tags": [
"example",
"first-party",
@ -4458,11 +4554,19 @@
"homepage": "https://github.com/nexu-io/open-design/tree/main/plugins/_official/examples/frame-liquid-bg-hero",
"license": "MIT",
"mode": "video",
"taskKind": "new-generation"
"taskKind": "new-generation",
"title_i18n": {
"en": "Liquid Background Hero",
"zh-CN": "流体背景 Hero 帧"
},
"description_i18n": {
"en": "WebGL-style fluid displacement background with a quote overlay, suited to video intros, landing heroes, or posters.",
"zh-CN": "WebGL 风流体置换背景 + 顶部叠加金句, 适合视频片头 / landing hero / 海报"
}
},
{
"name": "open-design/example-frame-logo-outro",
"title": "品牌 Logo 收尾帧",
"title": "Logo Outro Frame",
"version": "0.1.0",
"source": "github:nexu-io/open-design@main/plugins/_official/examples/frame-logo-outro",
"publisher": {
@ -4473,7 +4577,7 @@
"prompt:inject",
"fs:write"
],
"description": "Logo 分块组装入场 + glow bloom + tagline 揭示, 适合视频片尾 / 品牌闭幕",
"description": "Segmented logo assembly, glow bloom, and tagline reveal for video outros or brand closing frames.",
"tags": [
"example",
"first-party",
@ -4487,11 +4591,19 @@
"homepage": "https://github.com/nexu-io/open-design/tree/main/plugins/_official/examples/frame-logo-outro",
"license": "MIT",
"mode": "video",
"taskKind": "new-generation"
"taskKind": "new-generation",
"title_i18n": {
"en": "Logo Outro Frame",
"zh-CN": "品牌 Logo 收尾帧"
},
"description_i18n": {
"en": "Segmented logo assembly, glow bloom, and tagline reveal for video outros or brand closing frames.",
"zh-CN": "Logo 分块组装入场 + glow bloom + tagline 揭示, 适合视频片尾 / 品牌闭幕"
}
},
{
"name": "open-design/example-frame-macos-notification",
"title": "macOS 通知横幅",
"title": "macOS Notification Banner",
"version": "0.1.0",
"source": "github:nexu-io/open-design@main/plugins/_official/examples/frame-macos-notification",
"publisher": {
@ -4502,7 +4614,7 @@
"prompt:inject",
"fs:write"
],
"description": "拟真 macOS 通知 banner + app icon + 标题正文, 适合 video overlay / 产品发布预告",
"description": "Realistic macOS notification banner with app icon, title, and body, suited to video overlays or product teasers.",
"tags": [
"example",
"first-party",
@ -4516,7 +4628,15 @@
"homepage": "https://github.com/nexu-io/open-design/tree/main/plugins/_official/examples/frame-macos-notification",
"license": "MIT",
"mode": "video",
"taskKind": "new-generation"
"taskKind": "new-generation",
"title_i18n": {
"en": "macOS Notification Banner",
"zh-CN": "macOS 通知横幅"
},
"description_i18n": {
"en": "Realistic macOS notification banner with app icon, title, and body, suited to video overlays or product teasers.",
"zh-CN": "拟真 macOS 通知 banner + app icon + 标题正文, 适合 video overlay / 产品发布预告"
}
},
{
"name": "open-design/example-gamified-app",
@ -6905,7 +7025,7 @@
},
{
"name": "open-design/example-mockup-device-3d",
"title": "iPhone × MacBook 立体展架",
"title": "Device 3D Showcase",
"version": "0.1.0",
"source": "github:nexu-io/open-design@main/plugins/_official/examples/mockup-device-3d",
"publisher": {
@ -6916,7 +7036,7 @@
"prompt:inject",
"fs:write"
],
"description": "iPhone + MacBook 仿 GLTF 静态展架, 屏幕内嵌真实 HTML 内容, 玻璃镜头折射, 360° 转盘构图",
"description": "Static iPhone and MacBook 3D-style showcase with real HTML embedded on screens, glass-lens refraction, and 360-degree turntable composition.",
"tags": [
"example",
"first-party",
@ -6933,7 +7053,15 @@
"homepage": "https://github.com/nexu-io/open-design/tree/main/plugins/_official/examples/mockup-device-3d",
"license": "MIT",
"mode": "prototype",
"taskKind": "new-generation"
"taskKind": "new-generation",
"title_i18n": {
"en": "Device 3D Showcase",
"zh-CN": "iPhone × MacBook 立体展架"
},
"description_i18n": {
"en": "Static iPhone and MacBook 3D-style showcase with real HTML embedded on screens, glass-lens refraction, and 360-degree turntable composition.",
"zh-CN": "iPhone + MacBook 仿 GLTF 静态展架, 屏幕内嵌真实 HTML 内容, 玻璃镜头折射, 360° 转盘构图"
}
},
{
"name": "open-design/example-motion-frames",
@ -7231,7 +7359,7 @@
},
{
"name": "open-design/example-poster-hero",
"title": "营销海报",
"title": "Marketing Poster",
"version": "0.1.0",
"source": "github:nexu-io/open-design@main/plugins/_official/examples/poster-hero",
"publisher": {
@ -7242,7 +7370,7 @@
"prompt:inject",
"fs:write"
],
"description": "竖版海报 / 朋友圈分享图, 强视觉冲击",
"description": "Vertical poster or Moments-style share image with strong visual impact.",
"tags": [
"example",
"first-party",
@ -7256,11 +7384,19 @@
"homepage": "https://github.com/nexu-io/open-design/tree/main/plugins/_official/examples/poster-hero",
"license": "MIT",
"mode": "prototype",
"taskKind": "new-generation"
"taskKind": "new-generation",
"title_i18n": {
"en": "Marketing Poster",
"zh-CN": "营销海报"
},
"description_i18n": {
"en": "Vertical poster or Moments-style share image with strong visual impact.",
"zh-CN": "竖版海报 / 朋友圈分享图, 强视觉冲击"
}
},
{
"name": "open-design/example-ppt-keynote",
"title": "Keynote 风格 PPT",
"title": "Keynote-style Slides",
"version": "0.1.0",
"source": "github:nexu-io/open-design@main/plugins/_official/examples/ppt-keynote",
"publisher": {
@ -7271,7 +7407,7 @@
"prompt:inject",
"fs:write"
],
"description": "苹果 Keynote 级别幻灯片, 一屏一卡, 键盘左右切换",
"description": "Apple Keynote-quality slides, one card per screen, with keyboard left/right navigation.",
"tags": [
"example",
"first-party",
@ -7285,7 +7421,15 @@
"homepage": "https://github.com/nexu-io/open-design/tree/main/plugins/_official/examples/ppt-keynote",
"license": "MIT",
"mode": "deck",
"taskKind": "new-generation"
"taskKind": "new-generation",
"title_i18n": {
"en": "Keynote-style Slides",
"zh-CN": "Keynote 风格 PPT"
},
"description_i18n": {
"en": "Apple Keynote-quality slides, one card per screen, with keyboard left/right navigation.",
"zh-CN": "苹果 Keynote 级别幻灯片, 一屏一卡, 键盘左右切换"
}
},
{
"name": "open-design/example-pptx-html-fidelity-audit",
@ -7390,7 +7534,7 @@
},
{
"name": "open-design/example-resume-modern",
"title": "极简简历",
"title": "Modern Resume",
"version": "0.1.0",
"source": "github:nexu-io/open-design@main/plugins/_official/examples/resume-modern",
"publisher": {
@ -7401,7 +7545,7 @@
"prompt:inject",
"fs:write"
],
"description": "现代极简简历, A4 单页, 适合打印或导出 PDF",
"description": "Modern minimal resume, single A4 page, ready for print or PDF export.",
"tags": [
"example",
"first-party",
@ -7416,7 +7560,15 @@
"homepage": "https://github.com/nexu-io/open-design/tree/main/plugins/_official/examples/resume-modern",
"license": "MIT",
"mode": "prototype",
"taskKind": "new-generation"
"taskKind": "new-generation",
"title_i18n": {
"en": "Modern Resume",
"zh-CN": "极简简历"
},
"description_i18n": {
"en": "Modern minimal resume, single A4 page, ready for print or PDF export.",
"zh-CN": "现代极简简历, A4 单页, 适合打印或导出 PDF"
}
},
{
"name": "open-design/example-saas-landing",
@ -7585,7 +7737,7 @@
},
{
"name": "open-design/example-social-reddit-card",
"title": "Reddit 帖子卡",
"title": "Reddit Post Card",
"version": "0.1.0",
"source": "github:nexu-io/open-design@main/plugins/_official/examples/social-reddit-card",
"publisher": {
@ -7596,7 +7748,7 @@
"prompt:inject",
"fs:write"
],
"description": "拟真 Reddit 帖子卡 + 上下投票 + 评论数, 适合视频叠加 / 故事分享",
"description": "Realistic Reddit post card with vote rail and comment count, suited to video overlays or story sharing.",
"tags": [
"example",
"first-party",
@ -7613,11 +7765,19 @@
"homepage": "https://github.com/nexu-io/open-design/tree/main/plugins/_official/examples/social-reddit-card",
"license": "MIT",
"mode": "prototype",
"taskKind": "new-generation"
"taskKind": "new-generation",
"title_i18n": {
"en": "Reddit Post Card",
"zh-CN": "Reddit 帖子卡"
},
"description_i18n": {
"en": "Realistic Reddit post card with vote rail and comment count, suited to video overlays or story sharing.",
"zh-CN": "拟真 Reddit 帖子卡 + 上下投票 + 评论数, 适合视频叠加 / 故事分享"
}
},
{
"name": "open-design/example-social-spotify-card",
"title": "Spotify 正在播放卡",
"title": "Spotify Now-Playing Card",
"version": "0.1.0",
"source": "github:nexu-io/open-design@main/plugins/_official/examples/social-spotify-card",
"publisher": {
@ -7628,7 +7788,7 @@
"prompt:inject",
"fs:write"
],
"description": "Spotify Now Playing 风格卡: 专辑封面 + 进度条 + 播放控制, 适配视频叠加 / 个人主页",
"description": "Spotify Now Playing-style card with album art, progress bar, and playback controls, suited to video overlays or personal homepages.",
"tags": [
"example",
"first-party",
@ -7645,11 +7805,19 @@
"homepage": "https://github.com/nexu-io/open-design/tree/main/plugins/_official/examples/social-spotify-card",
"license": "MIT",
"mode": "prototype",
"taskKind": "new-generation"
"taskKind": "new-generation",
"title_i18n": {
"en": "Spotify Now-Playing Card",
"zh-CN": "Spotify 正在播放卡"
},
"description_i18n": {
"en": "Spotify Now Playing-style card with album art, progress bar, and playback controls, suited to video overlays or personal homepages.",
"zh-CN": "Spotify Now Playing 风格卡: 专辑封面 + 进度条 + 播放控制, 适配视频叠加 / 个人主页"
}
},
{
"name": "open-design/example-social-x-post-card",
"title": "X (Twitter) 帖子卡",
"title": "X / Twitter Post Card",
"version": "0.1.0",
"source": "github:nexu-io/open-design@main/plugins/_official/examples/social-x-post-card",
"publisher": {
@ -7660,7 +7828,7 @@
"prompt:inject",
"fs:write"
],
"description": "拟真 X 推文卡片 + 互动数据 (likes/reposts/views), 适配视频叠加或图卡分享",
"description": "Realistic X post card with engagement metrics (likes, reposts, views), suited to video overlays or shareable image cards.",
"tags": [
"example",
"first-party",
@ -7677,7 +7845,15 @@
"homepage": "https://github.com/nexu-io/open-design/tree/main/plugins/_official/examples/social-x-post-card",
"license": "MIT",
"mode": "prototype",
"taskKind": "new-generation"
"taskKind": "new-generation",
"title_i18n": {
"en": "X / Twitter Post Card",
"zh-CN": "X (Twitter) 帖子卡"
},
"description_i18n": {
"en": "Realistic X post card with engagement metrics (likes, reposts, views), suited to video overlays or shareable image cards.",
"zh-CN": "拟真 X 推文卡片 + 互动数据 (likes/reposts/views), 适配视频叠加或图卡分享"
}
},
{
"name": "open-design/example-sprite-animation",
@ -7816,7 +7992,7 @@
},
{
"name": "open-design/example-vfx-text-cursor",
"title": "VFX 文字光标",
"title": "VFX Text Cursor",
"version": "0.1.0",
"source": "github:nexu-io/open-design@main/plugins/_official/examples/vfx-text-cursor",
"publisher": {
@ -7827,7 +8003,7 @@
"prompt:inject",
"fs:write"
],
"description": "光标拖光 + 彩色像散射线 + 定向光斑, 适合视频片头逐字揭示金句",
"description": "Cursor light trail, chromatic rays, and directional flares for word-by-word quote reveals in video intros.",
"tags": [
"example",
"first-party",
@ -7842,11 +8018,19 @@
"homepage": "https://github.com/nexu-io/open-design/tree/main/plugins/_official/examples/vfx-text-cursor",
"license": "MIT",
"mode": "video",
"taskKind": "new-generation"
"taskKind": "new-generation",
"title_i18n": {
"en": "VFX Text Cursor",
"zh-CN": "VFX 文字光标"
},
"description_i18n": {
"en": "Cursor light trail, chromatic rays, and directional flares for word-by-word quote reveals in video intros.",
"zh-CN": "光标拖光 + 彩色像散射线 + 定向光斑, 适合视频片头逐字揭示金句"
}
},
{
"name": "open-design/example-video-hyperframes",
"title": "Hyperframes 视频脚本",
"title": "Hyperframes Video",
"version": "0.1.0",
"source": "github:nexu-io/open-design@main/plugins/_official/examples/video-hyperframes",
"publisher": {
@ -7857,7 +8041,7 @@
"prompt:inject",
"fs:write"
],
"description": "Hyperframes / Remotion 兼容的连续帧动画, 可自动播放",
"description": "Hyperframes / Remotion-compatible continuous frame animation with autoplay support.",
"tags": [
"example",
"first-party",
@ -7869,7 +8053,15 @@
"homepage": "https://github.com/nexu-io/open-design/tree/main/plugins/_official/examples/video-hyperframes",
"license": "MIT",
"mode": "video",
"taskKind": "new-generation"
"taskKind": "new-generation",
"title_i18n": {
"en": "Hyperframes Video",
"zh-CN": "Hyperframes 视频脚本"
},
"description_i18n": {
"en": "Hyperframes / Remotion-compatible continuous frame animation with autoplay support.",
"zh-CN": "Hyperframes / Remotion 兼容的连续帧动画, 可自动播放"
}
},
{
"name": "open-design/example-video-shortform",

View file

@ -4,6 +4,8 @@ zh_name: "杂志文章"
en_name: "Magazine Article"
emoji: "📖"
description: "Huashu / huashu-md-html-inspired magazine article layout for turning Markdown or notes into a polished long-form HTML essay."
zh_description: "Huashu / huashu-md-html 风格杂志文章版式, 将 Markdown 或笔记转成精排长文 HTML。"
en_description: "Huashu / huashu-md-html-inspired magazine article layout for turning Markdown or notes into a polished long-form HTML essay."
category: article
scenario: marketing
aspect_hint: "A4 / 长页面"
@ -28,7 +30,9 @@ od:
reload: debounce-100
design_system:
requires: false
example_prompt: "用「杂志文章」模板把我的内容做成一份「Huashu / huashu-md-html-inspired magazine article layout for turning Markdown or notes into a polished long-form HTML essay」。保持模板的视觉签名使用真实内容和数据避免 lorem ipsum 和占位图片。"
example_prompt: "Use the Magazine Article template to turn my content into a Huashu / huashu-md-html-inspired long-form HTML essay. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images."
example_prompt_i18n:
zh-CN: "用「杂志文章」模板把我的内容做成一份「Huashu / huashu-md-html-inspired magazine article layout for turning Markdown or notes into a polished long-form HTML essay」。保持模板的视觉签名使用真实内容和数据避免 lorem ipsum 和占位图片。"
---
【模板: 杂志文章】

View file

@ -3,7 +3,9 @@ name: card-twitter
zh_name: "Twitter 分享卡"
en_name: "Twitter Share Card"
emoji: "🐦"
description: "推特金句 / 数据卡, 适合配推文"
description: "Twitter quote or data card designed to pair with a post."
zh_description: "推特金句 / 数据卡, 适合配推文"
en_description: "Twitter quote or data card designed to pair with a post."
category: card
scenario: marketing
aspect_hint: "1600×900 (16:9)"
@ -25,7 +27,9 @@ od:
reload: debounce-100
design_system:
requires: false
example_prompt: "用「Twitter 分享卡」模板把我的内容做成一份「推特金句 / 数据卡, 适合配推文」。保持模板的视觉签名,使用真实内容和数据,避免 lorem ipsum 和占位图片。"
example_prompt: "Use the Twitter Share Card template to turn my content into a Twitter quote or data card designed to pair with a post. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images."
example_prompt_i18n:
zh-CN: "用「Twitter 分享卡」模板把我的内容做成一份「推特金句 / 数据卡, 适合配推文」。保持模板的视觉签名,使用真实内容和数据,避免 lorem ipsum 和占位图片。"
---
【模板: Twitter 分享卡】

View file

@ -3,7 +3,9 @@ name: card-xiaohongshu
zh_name: "小红书图文卡片"
en_name: "Xiaohongshu Card"
emoji: "📱"
description: "小红书风格知识卡片, 多张联排可滑动浏览"
description: "Xiaohongshu-style knowledge cards, arranged as a swipeable multi-card carousel."
zh_description: "小红书风格知识卡片, 多张联排可滑动浏览"
en_description: "Xiaohongshu-style knowledge cards, arranged as a swipeable multi-card carousel."
category: card
scenario: marketing
aspect_hint: "1080×1440 (3:4)"
@ -26,7 +28,9 @@ od:
reload: debounce-100
design_system:
requires: false
example_prompt: "用「小红书图文卡片」模板把我的内容做成一份「小红书风格知识卡片, 多张联排可滑动浏览」。保持模板的视觉签名,使用真实内容和数据,避免 lorem ipsum 和占位图片。"
example_prompt: "Use the Xiaohongshu Card template to turn my content into a Xiaohongshu-style swipeable knowledge-card carousel. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images."
example_prompt_i18n:
zh-CN: "用「小红书图文卡片」模板把我的内容做成一份「小红书风格知识卡片, 多张联排可滑动浏览」。保持模板的视觉签名,使用真实内容和数据,避免 lorem ipsum 和占位图片。"
---
【模板: 小红书图文卡片】

View file

@ -3,7 +3,9 @@ name: data-report
zh_name: "数据可视化报告"
en_name: "Data Visualization Report"
emoji: "📊"
description: "把 CSV/Excel/JSON 数据转成漂亮的可视化报告页"
description: "Turns CSV, Excel, or JSON data into a polished visual report page."
zh_description: "把 CSV/Excel/JSON 数据转成漂亮的可视化报告页"
en_description: "Turns CSV, Excel, or JSON data into a polished visual report page."
category: data
scenario: finance
aspect_hint: "桌面长页面"
@ -26,7 +28,9 @@ od:
reload: debounce-100
design_system:
requires: false
example_prompt: "用「数据可视化报告」模板把我的内容做成一份「把 CSV/Excel/JSON 数据转成漂亮的可视化报告页」。保持模板的视觉签名,使用真实内容和数据,避免 lorem ipsum 和占位图片。"
example_prompt: "Use the Data Visualization Report template to turn my CSV, Excel, or JSON data into a polished visual report page. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images."
example_prompt_i18n:
zh-CN: "用「数据可视化报告」模板把我的内容做成一份「把 CSV/Excel/JSON 数据转成漂亮的可视化报告页」。保持模板的视觉签名,使用真实内容和数据,避免 lorem ipsum 和占位图片。"
---
【模板: 数据可视化报告】

View file

@ -3,7 +3,9 @@ name: deck-guizang-editorial
zh_name: "归藏编辑墨水 Deck"
en_name: "Guizang Editorial E-Ink Deck"
emoji: "🖋️"
description: "电子杂志 × 电子墨水; 10 个版面 + 5 套调色板 (墨水/靛蓝瓷/森林墨/牛皮纸/沙丘)"
description: "Editorial magazine meets e-ink: 10 layouts and 5 palettes (Ink, Indigo Porcelain, Forest Ink, Kraft Paper, Dune)."
zh_description: "电子杂志 × 电子墨水; 10 个版面 + 5 套调色板 (墨水/靛蓝瓷/森林墨/牛皮纸/沙丘)"
en_description: "Editorial magazine meets e-ink: 10 layouts and 5 palettes (Ink, Indigo Porcelain, Forest Ink, Kraft Paper, Dune)."
category: slides
scenario: marketing
aspect_hint: "16:9 横向翻页"
@ -29,7 +31,9 @@ od:
reload: debounce-100
design_system:
requires: false
example_prompt: "用「归藏编辑墨水 Deck」模板把我的内容做成一套「电子杂志 × 电子墨水; 10 个版面 + 5 套调色板 (墨水/靛蓝瓷/森林墨/牛皮纸/沙丘)」。保持模板的视觉签名,使用真实内容和数据,避免 lorem ipsum 和占位图片。"
example_prompt: "Use the Guizang Editorial E-Ink Deck template to turn my content into an editorial magazine x e-ink horizontal deck with 10 layouts and 5 palettes. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images."
example_prompt_i18n:
zh-CN: "用「归藏编辑墨水 Deck」模板把我的内容做成一套「电子杂志 × 电子墨水; 10 个版面 + 5 套调色板 (墨水/靛蓝瓷/森林墨/牛皮纸/沙丘)」。保持模板的视觉签名,使用真实内容和数据,避免 lorem ipsum 和占位图片。"
---
【模板: 归藏编辑墨水 Deck (Editorial × E-Ink)】

View file

@ -3,7 +3,9 @@ name: deck-open-slide-canvas
zh_name: "1920 画布自由 Deck"
en_name: "Open-Slide 1920 Canvas Deck"
emoji: "🎨"
description: "锁死 1920×1080 画布, React 组件级自由组合, 不绑模板"
description: "Locked 1920x1080 canvas deck with React component-level free composition, not bound to a fixed template."
zh_description: "锁死 1920×1080 画布, React 组件级自由组合, 不绑模板"
en_description: "Locked 1920x1080 canvas deck with React component-level free composition, not bound to a fixed template."
category: slides
scenario: design
aspect_hint: "1920×1080 (16:9)"
@ -29,7 +31,9 @@ od:
reload: debounce-100
design_system:
requires: false
example_prompt: "用「1920 画布自由 Deck」模板把我的内容做成一套「锁死 1920×1080 画布, React 组件级自由组合, 不绑模板」。保持模板的视觉签名,使用真实内容和数据,避免 lorem ipsum 和占位图片。"
example_prompt: "Use the Open-Slide 1920 Canvas Deck template to turn my content into a locked 1920x1080 free-composition deck with React component-level layout. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images."
example_prompt_i18n:
zh-CN: "用「1920 画布自由 Deck」模板把我的内容做成一套「锁死 1920×1080 画布, React 组件级自由组合, 不绑模板」。保持模板的视觉签名,使用真实内容和数据,避免 lorem ipsum 和占位图片。"
---
【模板: 1920 画布自由 Deck】

View file

@ -3,7 +3,9 @@ name: deck-swiss-international
zh_name: "瑞士国际主义 Deck"
en_name: "Swiss International Deck"
emoji: "🟦"
description: "16 列网格 + 单一饱和 accent + 22 个锁死版面 (Klein Blue / Lemon / Mint / Safety Orange)"
description: "16-column grid, one saturated accent, and 22 locked layouts (Klein Blue, Lemon, Mint, Safety Orange)."
zh_description: "16 列网格 + 单一饱和 accent + 22 个锁死版面 (Klein Blue / Lemon / Mint / Safety Orange)"
en_description: "16-column grid, one saturated accent, and 22 locked layouts (Klein Blue, Lemon, Mint, Safety Orange)."
category: slides
scenario: marketing
aspect_hint: "16:9 横向翻页"
@ -29,7 +31,9 @@ od:
reload: debounce-100
design_system:
requires: false
example_prompt: "用「瑞士国际主义 Deck」模板把我的内容做成一套「16 列网格 + 单一饱和 accent + 22 个锁死版面 (Klein Blue / Lemon / Mint / Safety Orange)」。保持模板的视觉签名,使用真实内容和数据,避免 lorem ipsum 和占位图片。"
example_prompt: "Use the Swiss International Deck template to turn my content into a 16-column-grid deck with one saturated accent and 22 locked layouts. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images."
example_prompt_i18n:
zh-CN: "用「瑞士国际主义 Deck」模板把我的内容做成一套「16 列网格 + 单一饱和 accent + 22 个锁死版面 (Klein Blue / Lemon / Mint / Safety Orange)」。保持模板的视觉签名,使用真实内容和数据,避免 lorem ipsum 和占位图片。"
---
【模板: 瑞士国际主义 Deck (Swiss International)】

View file

@ -3,7 +3,9 @@ name: doc-kami-parchment
zh_name: "Kami 羊皮纸文档"
en_name: "Kami Parchment Document"
emoji: "📜"
description: "暖羊皮纸底 (#f5f4ed) + 墨蓝单色 accent (#1B365D) + 单一衬线字体, 编辑级排印"
description: "Warm parchment canvas (#f5f4ed), monochrome ink-blue accent (#1B365D), one serif family, and editorial-grade typography."
zh_description: "暖羊皮纸底 (#f5f4ed) + 墨蓝单色 accent (#1B365D) + 单一衬线字体, 编辑级排印"
en_description: "Warm parchment canvas (#f5f4ed), monochrome ink-blue accent (#1B365D), one serif family, and editorial-grade typography."
category: doc
scenario: personal
aspect_hint: "A4 / Letter 长页"
@ -30,7 +32,9 @@ od:
reload: debounce-100
design_system:
requires: false
example_prompt: "用「Kami 羊皮纸文档」模板把我的内容做成一份「暖羊皮纸底 (#f5f4ed) + 墨蓝单色 accent (#1B365D) + 单一衬线字体, 编辑级排印」。保持模板的视觉签名,使用真实内容和数据,避免 lorem ipsum 和占位图片。"
example_prompt: "Use the Kami Parchment Document template to turn my content into a warm parchment document with monochrome ink-blue accents, one serif family, and editorial-grade typography. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images."
example_prompt_i18n:
zh-CN: "用「Kami 羊皮纸文档」模板把我的内容做成一份「暖羊皮纸底 (#f5f4ed) + 墨蓝单色 accent (#1B365D) + 单一衬线字体, 编辑级排印」。保持模板的视觉签名,使用真实内容和数据,避免 lorem ipsum 和占位图片。"
---
【模板: Kami 羊皮纸文档】

View file

@ -3,7 +3,9 @@ name: frame-data-chart-nyt
zh_name: "NYT 风数据图表帧"
en_name: "NYT-Style Data Chart Frame"
emoji: "📈"
description: "NYT-newsroom 排版 + 错峰揭示动画 + 编辑级图表 (折线/柱/范围带)"
description: "NYT-newsroom typography, staggered reveal animation, and editorial-grade charts (line, bar, or range band)."
zh_description: "NYT-newsroom 排版 + 错峰揭示动画 + 编辑级图表 (折线/柱/范围带)"
en_description: "NYT-newsroom typography, staggered reveal animation, and editorial-grade charts (line, bar, or range band)."
category: video
scenario: video
aspect_hint: "1920×1080 (16:9)"
@ -27,7 +29,9 @@ od:
reload: debounce-100
design_system:
requires: false
example_prompt: "用「NYT 风数据图表帧」模板把我的内容做成一段「NYT-newsroom 排版 + 错峰揭示动画 + 编辑级图表 (折线/柱/范围带)」。保持模板的视觉签名,使用真实内容和数据,避免 lorem ipsum 和占位图片。"
example_prompt: "Use the NYT-Style Data Chart Frame template to turn my content into a frame with NYT-newsroom typography, staggered reveal animation, and editorial-grade charts. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images."
example_prompt_i18n:
zh-CN: "用「NYT 风数据图表帧」模板把我的内容做成一段「NYT-newsroom 排版 + 错峰揭示动画 + 编辑级图表 (折线/柱/范围带)」。保持模板的视觉签名,使用真实内容和数据,避免 lorem ipsum 和占位图片。"
---
【模板: NYT 风数据图表帧】

View file

@ -3,7 +3,9 @@ name: frame-flowchart-sticky
zh_name: "便利贴流程图帧"
en_name: "Sticky Flowchart Frame"
emoji: "📝"
description: "SVG 曲线连接 + 便利贴节点 + 光标交互, 像白板 brainstorm"
description: "SVG curve connectors, sticky-note nodes, and cursor interaction with a whiteboard-brainstorm feel."
zh_description: "SVG 曲线连接 + 便利贴节点 + 光标交互, 像白板 brainstorm"
en_description: "SVG curve connectors, sticky-note nodes, and cursor interaction with a whiteboard-brainstorm feel."
category: video
scenario: operations
aspect_hint: "1920×1080 (16:9)"
@ -27,7 +29,9 @@ od:
reload: debounce-100
design_system:
requires: false
example_prompt: "用「便利贴流程图帧」模板把我的内容做成一段「SVG 曲线连接 + 便利贴节点 + 光标交互, 像白板 brainstorm」。保持模板的视觉签名使用真实内容和数据避免 lorem ipsum 和占位图片。"
example_prompt: "Use the Sticky Flowchart Frame template to turn my content into a whiteboard-brainstorm frame with SVG curve connectors, sticky-note nodes, and cursor interaction. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images."
example_prompt_i18n:
zh-CN: "用「便利贴流程图帧」模板把我的内容做成一段「SVG 曲线连接 + 便利贴节点 + 光标交互, 像白板 brainstorm」。保持模板的视觉签名使用真实内容和数据避免 lorem ipsum 和占位图片。"
---
【模板: 便利贴流程图帧 (Sticky Flowchart)】

View file

@ -3,7 +3,9 @@ name: frame-glitch-title
zh_name: "故障艺术标题帧"
en_name: "Glitch Title Frame"
emoji: "⚡"
description: "数字故障 / 像散偏移 / 数据腐败标题, 适合视频转场 / cyberpunk hero"
description: "Digital glitch, chromatic offset, and data-corruption title frame for video transitions or cyberpunk heroes."
zh_description: "数字故障 / 像散偏移 / 数据腐败标题, 适合视频转场 / cyberpunk hero"
en_description: "Digital glitch, chromatic offset, and data-corruption title frame for video transitions or cyberpunk heroes."
category: video
scenario: video
aspect_hint: "1920×1080 (16:9)"
@ -29,7 +31,9 @@ od:
reload: debounce-100
design_system:
requires: false
example_prompt: "用「故障艺术标题帧」模板把我的内容做成一段「数字故障 / 像散偏移 / 数据腐败标题, 适合视频转场 / cyberpunk hero」。保持模板的视觉签名使用真实内容和数据避免 lorem ipsum 和占位图片。"
example_prompt: "Use the Glitch Title Frame template to turn my content into a digital-glitch, chromatic-offset, data-corruption title frame for a video transition or cyberpunk hero. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images."
example_prompt_i18n:
zh-CN: "用「故障艺术标题帧」模板把我的内容做成一段「数字故障 / 像散偏移 / 数据腐败标题, 适合视频转场 / cyberpunk hero」。保持模板的视觉签名使用真实内容和数据避免 lorem ipsum 和占位图片。"
---
【模板: 故障艺术标题帧 (Glitch Title)】

View file

@ -3,7 +3,9 @@ name: frame-light-leak-cinema
zh_name: "胶片漏光电影帧"
en_name: "Light-Leak Cinematic Frame"
emoji: "🎞️"
description: "胶片漏光 + 颗粒噪点 + 16:9 letterbox + 衬线大字, 电影感开场 / 章节卡"
description: "Film light leaks, grain, 16:9 letterbox, and large serif type for cinematic openings or chapter cards."
zh_description: "胶片漏光 + 颗粒噪点 + 16:9 letterbox + 衬线大字, 电影感开场 / 章节卡"
en_description: "Film light leaks, grain, 16:9 letterbox, and large serif type for cinematic openings or chapter cards."
category: video
scenario: video
aspect_hint: "2.39:1 letterbox (1920×800) 或 16:9 (1920×1080)"
@ -27,7 +29,9 @@ od:
reload: debounce-100
design_system:
requires: false
example_prompt: "用「胶片漏光电影帧」模板把我的内容做成一段「胶片漏光 + 颗粒噪点 + 16:9 letterbox + 衬线大字, 电影感开场 / 章节卡」。保持模板的视觉签名,使用真实内容和数据,避免 lorem ipsum 和占位图片。"
example_prompt: "Use the Light-Leak Cinematic Frame template to turn my content into a cinematic opening or chapter card with film light leaks, grain, letterbox framing, and large serif type. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images."
example_prompt_i18n:
zh-CN: "用「胶片漏光电影帧」模板把我的内容做成一段「胶片漏光 + 颗粒噪点 + 16:9 letterbox + 衬线大字, 电影感开场 / 章节卡」。保持模板的视觉签名,使用真实内容和数据,避免 lorem ipsum 和占位图片。"
---
【模板: 胶片漏光电影帧】

View file

@ -3,7 +3,9 @@ name: frame-liquid-bg-hero
zh_name: "流体背景 Hero 帧"
en_name: "Liquid Background Hero"
emoji: "🌊"
description: "WebGL 风流体置换背景 + 顶部叠加金句, 适合视频片头 / landing hero / 海报"
description: "WebGL-style fluid displacement background with a quote overlay, suited to video intros, landing heroes, or posters."
zh_description: "WebGL 风流体置换背景 + 顶部叠加金句, 适合视频片头 / landing hero / 海报"
en_description: "WebGL-style fluid displacement background with a quote overlay, suited to video intros, landing heroes, or posters."
category: poster
scenario: video
aspect_hint: "1920×1080 (16:9) 或 1080×1920 (9:16)"
@ -27,7 +29,9 @@ od:
reload: debounce-100
design_system:
requires: false
example_prompt: "用「流体背景 Hero 帧」模板把我的内容做成一段「WebGL 风流体置换背景 + 顶部叠加金句, 适合视频片头 / landing hero / 海报」。保持模板的视觉签名,使用真实内容和数据,避免 lorem ipsum 和占位图片。"
example_prompt: "Use the Liquid Background Hero template to turn my content into a WebGL-style fluid displacement background with a quote overlay for a video intro, landing hero, or poster. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images."
example_prompt_i18n:
zh-CN: "用「流体背景 Hero 帧」模板把我的内容做成一段「WebGL 风流体置换背景 + 顶部叠加金句, 适合视频片头 / landing hero / 海报」。保持模板的视觉签名,使用真实内容和数据,避免 lorem ipsum 和占位图片。"
---
【模板: 流体背景 Hero】

View file

@ -3,7 +3,9 @@ name: frame-logo-outro
zh_name: "品牌 Logo 收尾帧"
en_name: "Logo Outro Frame"
emoji: "🎬"
description: "Logo 分块组装入场 + glow bloom + tagline 揭示, 适合视频片尾 / 品牌闭幕"
description: "Segmented logo assembly, glow bloom, and tagline reveal for video outros or brand closing frames."
zh_description: "Logo 分块组装入场 + glow bloom + tagline 揭示, 适合视频片尾 / 品牌闭幕"
en_description: "Segmented logo assembly, glow bloom, and tagline reveal for video outros or brand closing frames."
category: video
scenario: video
aspect_hint: "1920×1080 (16:9)"
@ -29,7 +31,9 @@ od:
reload: debounce-100
design_system:
requires: false
example_prompt: "用「品牌 Logo 收尾帧」模板把我的内容做成一段「Logo 分块组装入场 + glow bloom + tagline 揭示, 适合视频片尾 / 品牌闭幕」。保持模板的视觉签名,使用真实内容和数据,避免 lorem ipsum 和占位图片。"
example_prompt: "Use the Logo Outro Frame template to turn my content into a video outro or brand closing frame with segmented logo assembly, glow bloom, and tagline reveal. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images."
example_prompt_i18n:
zh-CN: "用「品牌 Logo 收尾帧」模板把我的内容做成一段「Logo 分块组装入场 + glow bloom + tagline 揭示, 适合视频片尾 / 品牌闭幕」。保持模板的视觉签名,使用真实内容和数据,避免 lorem ipsum 和占位图片。"
---
【模板: Logo 收尾帧 (Logo Outro)】

View file

@ -3,7 +3,9 @@ name: frame-macos-notification
zh_name: "macOS 通知横幅"
en_name: "macOS Notification Banner"
emoji: "🔔"
description: "拟真 macOS 通知 banner + app icon + 标题正文, 适合 video overlay / 产品发布预告"
description: "Realistic macOS notification banner with app icon, title, and body, suited to video overlays or product teasers."
zh_description: "拟真 macOS 通知 banner + app icon + 标题正文, 适合 video overlay / 产品发布预告"
en_description: "Realistic macOS notification banner with app icon, title, and body, suited to video overlays or product teasers."
category: card
scenario: video
aspect_hint: "1920×1080 视频或 480×120 横幅"
@ -27,7 +29,9 @@ od:
reload: debounce-100
design_system:
requires: false
example_prompt: "用「macOS 通知横幅」模板把我的内容做成一段「拟真 macOS 通知 banner + app icon + 标题正文, 适合 video overlay / 产品发布预告」。保持模板的视觉签名,使用真实内容和数据,避免 lorem ipsum 和占位图片。"
example_prompt: "Use the macOS Notification Banner template to turn my content into a realistic macOS notification banner for a video overlay or product teaser. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images."
example_prompt_i18n:
zh-CN: "用「macOS 通知横幅」模板把我的内容做成一段「拟真 macOS 通知 banner + app icon + 标题正文, 适合 video overlay / 产品发布预告」。保持模板的视觉签名,使用真实内容和数据,避免 lorem ipsum 和占位图片。"
---
【模板: macOS 通知横幅】

View file

@ -3,7 +3,9 @@ name: mockup-device-3d
zh_name: "iPhone × MacBook 立体展架"
en_name: "Device 3D Showcase"
emoji: "📱"
description: "iPhone + MacBook 仿 GLTF 静态展架, 屏幕内嵌真实 HTML 内容, 玻璃镜头折射, 360° 转盘构图"
description: "Static iPhone and MacBook 3D-style showcase with real HTML embedded on screens, glass-lens refraction, and 360-degree turntable composition."
zh_description: "iPhone + MacBook 仿 GLTF 静态展架, 屏幕内嵌真实 HTML 内容, 玻璃镜头折射, 360° 转盘构图"
en_description: "Static iPhone and MacBook 3D-style showcase with real HTML embedded on screens, glass-lens refraction, and 360-degree turntable composition."
category: poster
scenario: product
aspect_hint: "1920×1080 (16:9)"
@ -28,7 +30,9 @@ od:
reload: debounce-100
design_system:
requires: false
example_prompt: "用「iPhone × MacBook 立体展架」模板把我的内容做成一份「iPhone + MacBook 仿 GLTF 静态展架, 屏幕内嵌真实 HTML 内容, 玻璃镜头折射, 360° 转盘构图」。保持模板的视觉签名,使用真实内容和数据,避免 lorem ipsum 和占位图片。"
example_prompt: "Use the Device 3D Showcase template to turn my content into a static iPhone and MacBook 3D-style showcase with real HTML embedded on the screens. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images."
example_prompt_i18n:
zh-CN: "用「iPhone × MacBook 立体展架」模板把我的内容做成一份「iPhone + MacBook 仿 GLTF 静态展架, 屏幕内嵌真实 HTML 内容, 玻璃镜头折射, 360° 转盘构图」。保持模板的视觉签名,使用真实内容和数据,避免 lorem ipsum 和占位图片。"
---
【模板: 设备 3D 展架 (Device 3D Showcase / HTML-in-Canvas)】

View file

@ -3,7 +3,9 @@ name: poster-hero
zh_name: "营销海报"
en_name: "Marketing Poster"
emoji: "🖼️"
description: "竖版海报 / 朋友圈分享图, 强视觉冲击"
description: "Vertical poster or Moments-style share image with strong visual impact."
zh_description: "竖版海报 / 朋友圈分享图, 强视觉冲击"
en_description: "Vertical poster or Moments-style share image with strong visual impact."
category: poster
scenario: marketing
aspect_hint: "1080×1920 竖版"
@ -25,7 +27,9 @@ od:
reload: debounce-100
design_system:
requires: false
example_prompt: "用「营销海报」模板把我的内容做成一份「竖版海报 / 朋友圈分享图, 强视觉冲击」。保持模板的视觉签名,使用真实内容和数据,避免 lorem ipsum 和占位图片。"
example_prompt: "Use the Marketing Poster template to turn my content into a vertical poster or Moments-style share image with strong visual impact. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images."
example_prompt_i18n:
zh-CN: "用「营销海报」模板把我的内容做成一份「竖版海报 / 朋友圈分享图, 强视觉冲击」。保持模板的视觉签名,使用真实内容和数据,避免 lorem ipsum 和占位图片。"
---
【模板: 营销海报】

View file

@ -3,7 +3,9 @@ name: ppt-keynote
zh_name: "Keynote 风格 PPT"
en_name: "Keynote-style Slides"
emoji: "🎬"
description: "苹果 Keynote 级别幻灯片, 一屏一卡, 键盘左右切换"
description: "Apple Keynote-quality slides, one card per screen, with keyboard left/right navigation."
zh_description: "苹果 Keynote 级别幻灯片, 一屏一卡, 键盘左右切换"
en_description: "Apple Keynote-quality slides, one card per screen, with keyboard left/right navigation."
category: slides
scenario: marketing
aspect_hint: "16:9 (1280×720)"
@ -25,7 +27,9 @@ od:
reload: debounce-100
design_system:
requires: false
example_prompt: "用「Keynote 风格 PPT」模板把我的内容做成一套「苹果 Keynote 级别幻灯片, 一屏一卡, 键盘左右切换」。保持模板的视觉签名,使用真实内容和数据,避免 lorem ipsum 和占位图片。"
example_prompt: "Use the Keynote-style Slides template to turn my content into Apple Keynote-quality slides with one card per screen and keyboard left/right navigation. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images."
example_prompt_i18n:
zh-CN: "用「Keynote 风格 PPT」模板把我的内容做成一套「苹果 Keynote 级别幻灯片, 一屏一卡, 键盘左右切换」。保持模板的视觉签名,使用真实内容和数据,避免 lorem ipsum 和占位图片。"
---
【模板: Keynote 风格 PPT】

View file

@ -3,7 +3,9 @@ name: resume-modern
zh_name: "极简简历"
en_name: "Modern Resume"
emoji: "📄"
description: "现代极简简历, A4 单页, 适合打印或导出 PDF"
description: "Modern minimal resume, single A4 page, ready for print or PDF export."
zh_description: "现代极简简历, A4 单页, 适合打印或导出 PDF"
en_description: "Modern minimal resume, single A4 page, ready for print or PDF export."
category: resume
scenario: personal
aspect_hint: "A4 (210×297mm)"
@ -26,7 +28,9 @@ od:
reload: debounce-100
design_system:
requires: false
example_prompt: "用「极简简历」模板把我的内容做成一份「现代极简简历, A4 单页, 适合打印或导出 PDF」。保持模板的视觉签名使用真实内容和数据避免 lorem ipsum 和占位图片。"
example_prompt: "Use the Modern Resume template to turn my content into a modern minimal single-page A4 resume ready for print or PDF export. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images."
example_prompt_i18n:
zh-CN: "用「极简简历」模板把我的内容做成一份「现代极简简历, A4 单页, 适合打印或导出 PDF」。保持模板的视觉签名使用真实内容和数据避免 lorem ipsum 和占位图片。"
---
【模板: 现代极简简历】

View file

@ -3,7 +3,9 @@ name: social-reddit-card
zh_name: "Reddit 帖子卡"
en_name: "Reddit Post Card"
emoji: "🔺"
description: "拟真 Reddit 帖子卡 + 上下投票 + 评论数, 适合视频叠加 / 故事分享"
description: "Realistic Reddit post card with vote rail and comment count, suited to video overlays or story sharing."
zh_description: "拟真 Reddit 帖子卡 + 上下投票 + 评论数, 适合视频叠加 / 故事分享"
en_description: "Realistic Reddit post card with vote rail and comment count, suited to video overlays or story sharing."
category: card
scenario: marketing
aspect_hint: "1280×720 或 800×600"
@ -28,7 +30,9 @@ od:
reload: debounce-100
design_system:
requires: false
example_prompt: "用「Reddit 帖子卡」模板把我的内容做成一份「拟真 Reddit 帖子卡 + 上下投票 + 评论数, 适合视频叠加 / 故事分享」。保持模板的视觉签名,使用真实内容和数据,避免 lorem ipsum 和占位图片。"
example_prompt: "Use the Reddit Post Card template to turn my content into a realistic Reddit post card with vote rail and comment count for a video overlay or story share. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images."
example_prompt_i18n:
zh-CN: "用「Reddit 帖子卡」模板把我的内容做成一份「拟真 Reddit 帖子卡 + 上下投票 + 评论数, 适合视频叠加 / 故事分享」。保持模板的视觉签名,使用真实内容和数据,避免 lorem ipsum 和占位图片。"
---
【模板: Reddit 帖子卡】

View file

@ -3,7 +3,9 @@ name: social-spotify-card
zh_name: "Spotify 正在播放卡"
en_name: "Spotify Now-Playing Card"
emoji: "🎵"
description: "Spotify Now Playing 风格卡: 专辑封面 + 进度条 + 播放控制, 适配视频叠加 / 个人主页"
description: "Spotify Now Playing-style card with album art, progress bar, and playback controls, suited to video overlays or personal homepages."
zh_description: "Spotify Now Playing 风格卡: 专辑封面 + 进度条 + 播放控制, 适配视频叠加 / 个人主页"
en_description: "Spotify Now Playing-style card with album art, progress bar, and playback controls, suited to video overlays or personal homepages."
category: card
scenario: personal
aspect_hint: "1280×720 或 600×200"
@ -28,7 +30,9 @@ od:
reload: debounce-100
design_system:
requires: false
example_prompt: "用「Spotify 正在播放卡」模板把我的内容做成一份「Spotify Now Playing 风格卡: 专辑封面 + 进度条 + 播放控制, 适配视频叠加 / 个人主页」。保持模板的视觉签名,使用真实内容和数据,避免 lorem ipsum 和占位图片。"
example_prompt: "Use the Spotify Now-Playing Card template to turn my content into a Spotify Now Playing-style card with album art, progress bar, and playback controls for a video overlay or personal homepage. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images."
example_prompt_i18n:
zh-CN: "用「Spotify 正在播放卡」模板把我的内容做成一份「Spotify Now Playing 风格卡: 专辑封面 + 进度条 + 播放控制, 适配视频叠加 / 个人主页」。保持模板的视觉签名,使用真实内容和数据,避免 lorem ipsum 和占位图片。"
---
【模板: Spotify Now-Playing 卡】

View file

@ -3,7 +3,9 @@ name: social-x-post-card
zh_name: "X (Twitter) 帖子卡"
en_name: "X / Twitter Post Card"
emoji: "𝕏"
description: "拟真 X 推文卡片 + 互动数据 (likes/reposts/views), 适配视频叠加或图卡分享"
description: "Realistic X post card with engagement metrics (likes, reposts, views), suited to video overlays or shareable image cards."
zh_description: "拟真 X 推文卡片 + 互动数据 (likes/reposts/views), 适配视频叠加或图卡分享"
en_description: "Realistic X post card with engagement metrics (likes, reposts, views), suited to video overlays or shareable image cards."
category: card
scenario: marketing
aspect_hint: "1280×720 或 1080×1080"
@ -28,7 +30,9 @@ od:
reload: debounce-100
design_system:
requires: false
example_prompt: "用「X (Twitter) 帖子卡」模板把我的内容做成一份「拟真 X 推文卡片 + 互动数据 (likes/reposts/views), 适配视频叠加或图卡分享」。保持模板的视觉签名,使用真实内容和数据,避免 lorem ipsum 和占位图片。"
example_prompt: "Use the X / Twitter Post Card template to turn my content into a realistic X post card with engagement metrics for a video overlay or shareable image card. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images."
example_prompt_i18n:
zh-CN: "用「X (Twitter) 帖子卡」模板把我的内容做成一份「拟真 X 推文卡片 + 互动数据 (likes/reposts/views), 适配视频叠加或图卡分享」。保持模板的视觉签名,使用真实内容和数据,避免 lorem ipsum 和占位图片。"
---
【模板: X (Twitter) 帖子卡】

View file

@ -3,7 +3,9 @@ name: vfx-text-cursor
zh_name: "VFX 文字光标"
en_name: "VFX Text Cursor"
emoji: "✨"
description: "光标拖光 + 彩色像散射线 + 定向光斑, 适合视频片头逐字揭示金句"
description: "Cursor light trail, chromatic rays, and directional flares for word-by-word quote reveals in video intros."
zh_description: "光标拖光 + 彩色像散射线 + 定向光斑, 适合视频片头逐字揭示金句"
en_description: "Cursor light trail, chromatic rays, and directional flares for word-by-word quote reveals in video intros."
category: video
scenario: video
aspect_hint: "1920×1080 (16:9)"
@ -29,7 +31,9 @@ od:
reload: debounce-100
design_system:
requires: false
example_prompt: "用「VFX 文字光标」模板把我的内容做成一段「光标拖光 + 彩色像散射线 + 定向光斑, 适合视频片头逐字揭示金句」。保持模板的视觉签名,使用真实内容和数据,避免 lorem ipsum 和占位图片。"
example_prompt: "Use the VFX Text Cursor template to turn my content into a video-intro quote reveal with cursor light trails, chromatic rays, and directional flares. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images."
example_prompt_i18n:
zh-CN: "用「VFX 文字光标」模板把我的内容做成一段「光标拖光 + 彩色像散射线 + 定向光斑, 适合视频片头逐字揭示金句」。保持模板的视觉签名,使用真实内容和数据,避免 lorem ipsum 和占位图片。"
---
【模板: VFX 文字光标 (Text Cursor)】

View file

@ -3,7 +3,9 @@ name: video-hyperframes
zh_name: "Hyperframes 视频脚本"
en_name: "Hyperframes Video"
emoji: "🎞️"
description: "Hyperframes / Remotion 兼容的连续帧动画, 可自动播放"
description: "Hyperframes / Remotion-compatible continuous frame animation with autoplay support."
zh_description: "Hyperframes / Remotion 兼容的连续帧动画, 可自动播放"
en_description: "Hyperframes / Remotion-compatible continuous frame animation with autoplay support."
category: video
scenario: video
aspect_hint: "1920×1080 (16:9)"
@ -28,7 +30,9 @@ od:
reload: debounce-100
design_system:
requires: false
example_prompt: "用「Hyperframes 视频脚本」模板把我的内容做成一段「Hyperframes / Remotion 兼容的连续帧动画, 可自动播放」。保持模板的视觉签名,使用真实内容和数据,避免 lorem ipsum 和占位图片。"
example_prompt: "Use the Hyperframes Video template to turn my content into a Hyperframes / Remotion-compatible continuous frame animation with autoplay support. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images."
example_prompt_i18n:
zh-CN: "用「Hyperframes 视频脚本」模板把我的内容做成一段「Hyperframes / Remotion 兼容的连续帧动画, 可自动播放」。保持模板的视觉签名,使用真实内容和数据,避免 lorem ipsum 和占位图片。"
---
【模板: Hyperframes 视频帧】