open-design-homepage
Lets your agent recreate an interactive homepage with 3D elements and animations. Useful for creating visually rich web experiences.
What it does
This is an exact copy of the OpenDesign.ai website, showing how to create interactive websites with 3D graphics and animations that react to your scrolling. It's an example to learn from, not to build your own site.
When to use it
- ✓To see an example of a modern website with 3D.
- ✓To learn how animations work with scrolling.
- ✓To study how to combine text and 3D graphics on a website.
Example of what to ask your AI
“Show me the OpenDesign.ai website with 3D graphics.”
Want more? Open the sections below.
How to use
The easiest way: copy the message below and paste it into Claude, ChatGPT, Cursor or any AI. It reads the skill and follows the instructions.
Skill link
Ready-to-paste message
How it works
It uses technologies like React Three Fiber and Next.js to create 3D graphics and animations. Everything is included in a single package, without needing to download anything extra from the internet, except for a small file to decode the 3D graphics.
Installation
Easiest way: copy the skill link and paste it into Claude, ChatGPT or Cursor asking it to follow the instructions.
In the terminal (Claude Code, Codex, Cursor), in your project folder:
npx skills add nexu-io/open-design --skill open-design-homepageOr download just the file:
curl -L https://raw.githubusercontent.com/nexu-io/open-design/main/plugins/_official/examples/open-design-homepage/SKILL.md -o SKILL.mdTechnical content (original SKILL.md)
Original text by the author, straight from GitHub.
OpenDesign Homepage
A first-party showcase template that mirrors the live open-design.ai homepage, captured as a fully self-contained bundle that renders in the sandboxed preview.
It is here to demonstrate the visual ceiling OpenDesign targets for interactive, WebGL-grade marketing surfaces on the web — not a fill-in-the-blank generator. Treat it as a reference build to study and adapt.
What it is
- Interactive 3D hero — a real-time
OpenDesignscript wordmark rendered with React Three Fiber / Three.js, plus a cursor-reactive parallax layer and a floating sticker collage. - Scroll-driven narrative — the work grid, capabilities copy, and decorative stickers animate as the page scrolls.
- Craft details — custom variable fonts (TikTok Sans, Geist Mono, Departure Mono), a light/dark theme toggle, an optional ambient soundtrack, and a live clock / cursor-coordinate HUD.
How it is built (for reference)
- Stack: Next.js (App Router, Turbopack build) + React Three Fiber + Three.js, exported as a static, self-contained bundle.
- 3D geometry is Draco-compressed (
KHR_draco_mesh_compression) — the hero wordmark drops from ~4.4 MB to ~300 KB with no visible change, decoded at runtime by the bundledDRACOLoader. - Imagery (work thumbnails, stickers) ships as lossless WebP — pixel-identical to the source PNGs at a fraction of the size, so every file stays under the 1 MB repository blob limit and the template needs no external asset host.
- Self-contained & path-portable: all assets load relative to the entry file, so the bundle renders correctly whether served from the site root or a nested preview subpath.
Using it
Open example.html in the preview to explore the live, interactive result. All content is bundled locally — fonts, imagery, and 3D geometry ship in assets/, so there are no CDN scripts or external fonts. The one runtime network request is the Draco decoder, fetched from Google's gstatic CDN on demand (the same pattern the other WebGL examples use for their libraries). To adapt the aesthetic (typography, 3D treatment, sticker collage, scroll motion) into your own build, study the structure here and recreate it with your preferred React Three Fiber / Next.js setup.
FAQ
Can I use this to build my own website?
Not directly. It serves as an example for you to study and adapt the ideas for your own project.
What does 'visual ceiling' mean?
It refers to the maximum level of visual quality and interactivity that OpenDesign aims for in websites.
Do I need to download anything for it to work?
No, all files (text, images, 3D) are included. Only a small 3D decoder might be downloaded from the internet when needed.
Details
Original description by the author
A pixel-faithful, self-contained mirror of the live open-design.ai homepage — an interactive React Three Fiber / Next.js hero with a real-time 3D wordmark, sticker collage, variable fonts, and scroll-driven motion. First-party showcase of the visual ceiling for interactive web marketing surfaces.
repo: nexu-io/open-design
Popularity
- GitHub stars
- 101k
- Ranking position
- #578
- License
- Apache-2.0
- Updated
- 10/16/2026
Comments
- …
More skills from this repository
sample-plugin
Makes your agent create a metadata file for tests. It helps ensure code works correctly in different situations.
nexu-io/open-design
aster-atelier
Helps your agent create an artistic website with a classic look. It uses elegant imagery, blue skies, and serif fonts for a cinematic feel.
nexu-io/open-design
audio-jingle
Makes your agent generate audio like jingles and sound effects. It can create music and voices, saving the result as an audio file.
nexu-io/open-design
blog-post
Helps your agent write long articles or blog posts. It includes space for images, quotes, and author information.
nexu-io/open-design
Similar skills
accessibility
Helps your agent create interfaces that everyone can use. Ensures websites and apps work well for people with disabilities, like those who are blind or have reduced mobility.
affaan-m/ECC
design-system
Helps your agent create a design system from existing code. It extracts visual information and checks for consistency, generating a report and an interactive preview.
affaan-m/ECC
liquid-glass-design
Helps your agent create iOS user interfaces with a 'Liquid Glass' effect. Allows adding dynamic and interactive visual effects in SwiftUI and UIKit.
affaan-m/ECC