Liquid Gradient Hero
Layered liquid brand hero. Adapted from a pinned OpenDesign source with a standalone brief workflow, local assets, retained licensing and actual generated evidence.
A little less setup
Make this part of your toolkit.
Give your agent this prompt. You’ll approve access in your browser before it installs a Skill.
Read https://skilly.uk/install/skills/liquid-gradient-hero.md and follow the instructions to install this Skill for my agent.REAL SAMPLE / RELEASED PACKAGE
RELEASED v1.0.0A closer look at the actual output.
Actual output from the included structured brief. Sample brands and stories are fictional; the review report uses intentionally faulty and fixed local fixtures.
THE COMPLETE TEMPLATE
Try it. Make yourself at home.
Scroll inside, explore the pages, and try the controls. Choose Open for downloads, printing, or external links.
1440 × 900 canvas · scaled evenly to fitUse the preview’s own scroll and keyboard controls.
Inside this template
1 sections- Leave space for the unexpected.
A GUIDED LOOK
The whole story, in motion.
A screen recording of this working demo, covering 1 sections. This is a guided preview, not a video exported by the Skill.
In this walkthrough
- Leave space for the unexpected.
- Tested runtime
- Node.js 24.19.0 · macOS arm64 · Chrome 154
- Pinned dependency
- Native HTML/CSS/JavaScript with local fonts
- Checks completed
- Normal and edge briefs, generator safety, narrow/desktop document width, keyboard and motion behavior. See bundled evidence for per-package scope.
Actual generated output, browser checks and independent Codex workflow.
Explicit Codex workflow tested with a new brief. Browser checks use local Chromium and emulated viewports, not real-device or full accessibility certification.
From a good brief to a better result.
Layered liquid brand hero. Adapted from a pinned OpenDesign source with a standalone brief workflow, local assets, retained licensing and actual generated evidence. The published package has its own version, tested environments, and included outputs listed alongside this overview. Any earlier draft samples below retain their original verification scope.
What you bring
- A structured brand, story or review brief
- Your approved content and destinations
What you’ll make
- Four-layer animated gradient hero
- Sans/serif headline composition with a real CTA
- Pause, reduced-motion and local assets
The intended workflow
- Shape the task-specific brief
- Generate into a new folder
- Review the measured behavior and final presentation