AGENT SKILL

frame-liquid-bg-hero

Liquid Background Hero (Open Design) — use only when explicitly invoked, not for general design requests

License 许可
MIT
最近更新
2026-11-14
Stars
★ 1.1k
Forks
104

01 前言 Front Matter

name
frame-liquid-bg-hero
description
Liquid Background Hero (Open Design) — use only when explicitly invoked, not for general design requests

02 资源文件 1

03 SKILL.md 正文

<!-- generated:open-design-agent-kit -->

Use the Open Design skill od:video:frame-liquid-bg-hero (Liquid Background Hero).

Treat the rest of the user's message as the brief. If nothing more specific was given, use: "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."

Call prepare_open_design_brief (the open-design MCP server's tool) with skillId "od:video:frame-liquid-bg-hero" and this brief — call list_open_design_design_systems first if the user names a brand or visual direction, or recommend_open_design_design_systems if they name none and no design system is active. Author the files yourself with your own file-editing tools per the returned instructions, then call register_open_design_artifact.

04 同仓库更多 Skills

feimacode
feimacode/open-design-agent-kit

youtube-clipper

YouTube clip generation and editing with automated workflows — pull source video, slice highlights, add captions, and export.

★ 1.1k
feimacode
feimacode/open-design-agent-kit

writing-guidelines

Review docs/prose for Writing Guidelines compliance. Use when asked to "review my docs", "check writing style", "audit prose", "review docs voice and tone", or "check this page against the writing handbook".

★ 1.1k
feimacode
feimacode/open-design-agent-kit

wpds

WordPress Design System. Apply WordPress's official design tokens, typography, and component patterns to themes and sites.

★ 1.1k
feimacode
feimacode/open-design-agent-kit

weread-year-in-review-video-template

WeRead-inspired HyperFrames video template for vertical annual reading reports, personal reading dashboards, book-note recaps, and shareable year-in-review stories. Use when users want a 9:16 HTML-to-MP4 reading report with warm paper texture, editorial Chinese typography, book-page metaphors, data highlights, and deterministic motion.

★ 1.1k
feimacode
feimacode/open-design-agent-kit

web-design-guidelines

Review UI code for Web Interface Guidelines compliance by the Vercel engineering team. Covers layout, typography, color, motion, and accessibility for product UI.

★ 1.1k
feimacode
feimacode/open-design-agent-kit

web-clone

网站复刻 / 克隆方法论。USE WHEN 用户说 复刻网站、克隆网站、clone website、抄个站、仿站、 照着这个站做一个、reproduce site、还原某个网页效果、把这个站搬下来改成我的、 复刻某个交互/WebGL/Canvas/Three.js 效果。提供「先拿真源码 → 判路径 → 逆向拆解 → 搭工程 → 替换内容」的可移植决策树,覆盖静态站 / React-Vue-Next 内容站 / WebGL-Canvas 重前端站三大分支,并强制核对任何 AI 二手分析里的可执行代码。

★ 1.1k