Filed under Design · Intelligence Apache-2.0 · Made on Earth
Open Source Claude Design

Templates.

Agent-built artifacts you can fork and ship — prototypes, slides, image and video templates. Run them on your own keys with the local agent; the prompts, posters, and example HTML are all under Apache-2.0.

Total · 254
Critique preview prototype
@open-design Open Design
Read full prompt →

Critique

Run a 5-dimension expert design review on any HTML artifact in the project — Philosophy / Visual hierarchy / Detail / Functionality / Innovation, each scored 0–10. Outputs a single self-contained HTML report with a radar chart, evidence-backed scores, and three lists: Keep / Fix / Quick-wins. Use when the brief asks for a "design review", "design critique", "5 维度评审", "design audit", or "what's wrong with my design".

Flowai Live Dashboard Template preview prototype
@open-design Open Design
Read full prompt →

Flowai Live Dashboard Template

Team-management dashboard skill in the FlowAI aesthetic — three tabs (Team Members, Team Details, Activity Log), KPI stat row, member table, role distribution bar chart, online presence and activity sparklines, and a top-contributors panel, all in a single self-contained HTML file with light/dark theming, hoverable chart tooltips, click-to-zoom panels, and CSV export. Use when the brief asks for a team / workspace admin dashboard, an interactive admin dashboard with charts, or names FlowAI.

Game Screenshot - Anime Fighting Game: Captain Ryuuga vs Kaze Renshin preview image
@open-design-contributors Open Design
Read full prompt →

Game Screenshot - Anime Fighting Game: Captain Ryuuga vs Kaze Renshin

An in-game fighting game key visual / combat screenshot in the style of Street Fighter 6 or Tekken 8 intro art. Two anime-style male warriors square off in the center of a dramatic nighttime Chinese temple courtyard — a shirtless straw-hat pirate with a warm orange-red fire aura on the left, and a spiky-haired martial artist in an orange gi charging a massive crackling blue lightning energy sphere on the right. Ships with a complete fighting-game HUD (dual health bars, round timer, P1/P2 portrait panels with named fighters and emblems, per-side combo counters and max gauges). Warm-orange vs cool-blue split color grading matches the rival-fighter convention of the genre. Tuned for gpt-image-2 at 16:9.

Game Screenshot - Three Kingdoms ARPG: Guan Yu Slaying Yan Liang preview image
@open-design-contributors Open Design
Read full prompt →

Game Screenshot - Three Kingdoms ARPG: Guan Yu Slaying Yan Liang

An in-game action-RPG screenshot of the iconic Three Kingdoms scene where Guan Yu rides his Red Hare warhorse through a torrential-rain battlefield and charges toward the enemy general Yan Liang. Rendered in the cinematic photoreal style of Black Myth: Wukong, Unreal Engine 5, third-person tracking camera from behind-and-left of the mounted hero. Full boss-fight HUD (portrait, minimap with dense enemy dots, skill hotbar with a finisher prompt, floating boss HP bar on the enemy general) turns the scene into a AAA ARPG combat moment. Tuned for gpt-image-2 at 16:9.

Game Screenshot - Three Kingdoms ARPG: Lü Bu's Yuanmen Archery preview image
@open-design-contributors Open Design
Read full prompt →

Game Screenshot - Three Kingdoms ARPG: Lü Bu's Yuanmen Archery

An in-game action-RPG screenshot of the famous Three Kingdoms scene where Lü Bu shoots down a distant halberd at the camp gate to stop a battle. Rendered in the cinematic photoreal style of Black Myth: Wukong, Unreal Engine 5 Nanite/Lumen, third-person over-the-shoulder gameplay camera. Full in-game HUD overlay (HP + qi bars, minimap, skill hotbar, lock-on target marker with distance readout to the far halberd) makes it read as a real next-gen ARPG capture rather than a cutscene. Tuned for gpt-image-2 at 16:9.

Game Screenshot - Three Kingdoms ARPG: Zhao Yun's Cradle Escape at Changbanpo preview image
@open-design-contributors Open Design
Read full prompt →

Game Screenshot - Three Kingdoms ARPG: Zhao Yun's Cradle Escape at Changbanpo

An in-game action-RPG screenshot of the legendary Three Kingdoms scene where Zhao Yun cradles the infant Liu Chan in one arm and fights his way through enemy lines with a spear in the other at Changbanpo. Rendered in the cinematic photoreal style of Black Myth: Wukong combined with Elden Ring, Unreal Engine 5 with full Nanite, Lumen ray-tracing, and volumetric god-rays. The emotional core — one arm protecting the swaddled baby, one arm fighting for life — is reinforced by a full HUD overlay including a dedicated ESCORT protection bar for the baby, a combo counter, and mid-air damage-number popups on flung enemies. Tuned for gpt-image-2 at 16:9.

Game UI - Ancient China Open-World MMO HUD preview image
@open-design-contributors Open Design
Read full prompt →

Game UI - Ancient China Open-World MMO HUD

Generates an in-game HUD screenshot mockup for a AAA ancient-China open-world MMO, in the cinematic photoreal style of Black Myth: Wukong. A beautiful female swordswoman protagonist anchors the center of the frame in a misty mountain ancient-shrine scene, surrounded by a complete MMO HUD: top-left character portrait with HP/MP/stamina bars and buff icons, bottom-center skill hotbar with Chinese-calligraphy skill icons, top-right minimap with quest markers, right-side quest tracker panel, bottom-left scrolling chat window, floating world-space NPC nameplates and quest exclamation mark. Rendered as a realistic monitor screenshot, 16:9, suitable for pitch decks, gamescom-style key art, and Xiaohongshu/bilibili game teasers.

Gamified App preview prototype
@open-design Open Design
Read full prompt →

Gamified App

A multi-frame gamified mobile-app prototype — three phone frames on a dark showcase stage. Frame 1: cover / poster, Frame 2: today's quests with XP ribbons and a level bar, Frame 3: quest detail. Vivid quest tiles, level ribbon, bottom tab bar. Use when the brief asks for a "gamified app", "habit tracker", "RPG-style life app", "level-up app", "daily quests", "XP / streak app", or "ELI5-style explainer app".

Hatch Pet preview image
@open-design Open Design
Read full prompt →

Hatch Pet

Create, repair, validate, preview, and package Codex-compatible animated pet spritesheets from character art, screenshots, generated images, or visual references. Use when a user wants to hatch a Codex pet, create a custom animated pet, or build a built-in pet asset with an 8x9 atlas, transparent unused cells, row-by-row animation prompts, QA contact sheets, preview videos, and pet.json packaging. This skill composes the installed $imagegen system skill for visual generation and uses bundled scripts for deterministic spritesheet assembly.

Html Ppt preview deck
@open-design Open Design
Read full prompt →

Html Ppt

HTML PPT Studio — author professional static HTML presentations in many styles, layouts, and animations, all driven by templates. Use when the user asks for a presentation, PPT, slides, keynote, deck, slideshow, "幻灯片", "演讲稿", "做一份 PPT", "做一份 slides", a reveal-style HTML deck, a 小红书 图文, or any kind of multi-slide pitch/report/sharing document that should look tasteful and be usable with keyboard navigation. Triggers include keywords like "presentation", "ppt", "slides", "deck", "keynote", "reveal", "slideshow", "幻灯片", "演讲稿", "分享稿", "小红书图文", "talk slides", "pitch deck", "tech sharing", "technical presentation".

Html Ppt Zhangzara Sakura Chroma preview deck
@open-design Open Design
Read full prompt →

Html Ppt Zhangzara Sakura Chroma

Sakura Chroma — Vintage Japanese cassette-package aesthetic: cream paper, diagonal rainbow ribbons, condensed bold type, JIS-style spec checkboxes. Anything that should feel like a vintage Japanese cassette package or a TDK / Sony / Sakura Color product catalogue: indie hardware brand decks, music-label release schedules, analog studio retrospectives, zine and magazine pitches, kawaii-tech product launches, creative-studio annual reports.

Hyperframes preview video
@open-design Open Design
Read full prompt →

Hyperframes

Create video compositions, animations, title cards, overlays, captions, voiceovers, audio-reactive visuals, and scene transitions in HyperFrames HTML. Use when asked to build any HTML-based video content, add captions or subtitles synced to audio, generate text-to-speech narration, create audio-reactive animation (beat sync, glow, pulse driven by music), add animated text highlighting (marker sweeps, hand-drawn circles, burst lines, scribble, sketchout), or add transitions between scenes (crossfades, wipes, reveals, shader transitions). Covers composition authoring, timing, media, and the full video production workflow. For CLI commands (init, lint, preview, render, transcribe, tts) see the hyperframes-cli skill.

Ib Pitch Book preview deck
@open-design Open Design
Read full prompt →

Ib Pitch Book

Investment-banking pitch book for strategic alternatives — trading comps, precedent transactions, valuation football field, DCF sensitivity, strategic-options matrix, process recommendation. Built by adapting `assets/template.html` so IB-specific chrome, disclosure bands, and source labels are preserved. Use for Board / sell-side discussion materials. Not a VC fundraising deck (see html-ppt-pitch-deck). Workflow adapted from Anthropic financial-services Pitch Agent (Apache-2.0).

Illustration - Crayon Kid-Drawing Rework preview image
@open-design-contributors Open Design
Read full prompt →

Illustration - Crayon Kid-Drawing Rework

A style-transfer prompt that reworks any reference image (product shot, screenshot, portrait, UI mockup) into a hand-drawn crayon illustration that feels like it was made by a 10-year-old. Replaces the original palette with bright playful crayon colors on clean white paper, and sprinkles childlike whimsy — castles, candy, stars, clouds, rainbows — to amplify the innocent storybook vibe. Works as an image-to-image edit in GPT-image-2 (requires uploading a reference image alongside the prompt); well-suited to website screenshots, brand key art, product photos, and portraits.

Infographic - Otaku Dance Choreography Breakdown (Gokuraku Jodo, 16 Panels) preview image
@open-design-contributors Open Design
Read full prompt →

Infographic - Otaku Dance Choreography Breakdown (Gokuraku Jodo, 16 Panels)

A single vertical 2:3 poster composed as a 4×4 grid of 16 connected square panels, forming a full choreography breakdown chart for the famous Japanese otaku dance song 極楽浄土 (Gokuraku Jodo). Each panel shows the same cute half-realistic anime idol girl (pink twin-tails, sailor-collar school-idol uniform) performing one signature pose from the dance, full-body, on a pastel-pink background with a small Japanese caption strip at the bottom and a numbered circle at the top-left. Explicitly engineered as a POSE REFERENCE sheet for AI video generation — every silhouette is crisp and unambiguous, no motion lines or background clutter. Tuned for gpt-image-2, aspect 2:3. Category: Infographic.

Live Dashboard preview prototype
@open-design Open Design
Read full prompt →

Live Dashboard

Notion-style team dashboard rendered as a Live Artifact. A single-page, self-contained HTML dashboard with KPIs, a 7-day sparkline, a real-time activity feed and a linked-database task table — wired to Notion via the Composio connector catalog. Refreshes on demand and when the artifact is opened. Falls back to seeded mock data when no connector is bound, so it works offline / in screenshots / in the picker preview.

Open Design Landing preview prototype
@open-design Open Design
Read full prompt →

Open Design Landing

Produce a world-class single-page editorial landing site in the Atelier Zero visual language (Monocle / Apartamento / Études editorial collage) — the same aesthetic Open Design uses for its own marketing surface. The agent fills a typed `inputs.json` from a brand brief, optionally generates 16 collage assets via gpt-image-2, then runs a pure-function composer that emits a self-contained HTML file; a separate path can mirror the Astro marketing site in `apps/landing-page/`. Drop-in scroll-reveal motion and a Headroom-style sticky nav are wired automatically.

Open Design Landing Deck preview deck
@open-design Open Design
Read full prompt →

Open Design Landing Deck

Produce a single-file slide deck in the Atelier Zero visual language (warm-paper background, italic-serif emphasis spans, coral terminating dots, surreal collage plates) — Open Design's brand deck recipe. The deck uses **horizontal magazine-style swipe pagination** (←/→, wheel, swipe), a per-slide chrome strip with brand mark and slide counter, an ESC overview grid, a coral progress bar, and inherits the canonical stylesheet + 16-slot image library from the sister `open-design-landing` skill.

Orbit General preview prototype
@open-design Open Design
Read full prompt →

Orbit General

Open Orbit briefing skill — selected by the Orbit pipeline when the user has two or more connectors connected. Pulls the past 24 hours of activity from every authenticated connector (GitHub, Linear, Notion, Slack, 飞书, Calendar, Gmail, Drive, Sentry, Vercel, …) and renders a single adaptive bento-grid dashboard at the top of "我的设计". Each connector module picks its own UI form (list, avatar stack, status ring, heatmap, file grid, alert card, …) based on the data shape it returns, so the layout scales as Orbit's connector ecosystem grows. This skill should not be triggered manually — it is invoked by Orbit's daily-digest scheduler against the user's live connector data.

Orbit Github preview prototype
@open-design Open Design
Read full prompt →

Orbit Github

Open Orbit briefing skill — selected by the Orbit pipeline when GitHub is the user's only connected connector, or when the user explicitly scopes their daily digest to GitHub. Pulls the past 24 hours of PRs, review requests, issues, CI runs, and merges from the user's authenticated GitHub connection and renders them in a layout that mirrors GitHub's native Notifications + PR-diff visual language. This skill should not be triggered manually — it is invoked by Orbit's daily-digest scheduler against live GitHub data.

Orbit Gmail preview prototype
@open-design Open Design
Read full prompt →

Orbit Gmail

Open Orbit briefing skill — selected by the Orbit pipeline when Gmail is the user's only connected connector, or when the user explicitly scopes their daily digest to Gmail. Pulls the past 24 hours of inbox activity (replies awaited, mentions, cc, auto- categorized bulk) from the user's authenticated Gmail connection and renders the digest as the Orbit Daily Digest email opened inside Gmail's reading view. This skill should not be triggered manually — it is invoked by Orbit's daily-digest scheduler against live Gmail data.

Orbit Linear preview prototype
@open-design Open Design
Read full prompt →

Orbit Linear

Open Orbit briefing skill — selected by the Orbit pipeline when Linear is the user's only connected connector, or when the user explicitly scopes their daily digest to Linear. Pulls the past 24 hours of issue movement, status changes, assignments, and cycle progress from the user's authenticated Linear connection and renders the digest in Linear's native Inbox + cycle-progress visual language. This skill should not be triggered manually — it is invoked by Orbit's daily-digest scheduler against live Linear data.

Orbit Notion preview prototype
@open-design Open Design
Read full prompt →

Orbit Notion

Open Orbit briefing skill — selected by the Orbit pipeline when Notion is the user's only connected connector, or when the user explicitly scopes their daily digest to Notion. Pulls the past 24 hours of document edits, comments, mentions, and database row changes from the user's authenticated Notion connection and renders the digest as a native Notion page (callout / toggle / database table primitives). This skill should not be triggered manually — it is invoked by Orbit's daily-digest scheduler against live Notion data.

Replit Deck preview deck
@open-design Open Design
Read full prompt →

Replit Deck

Single-file horizontal-swipe HTML deck in the style of Replit Slides's landing-page template gallery. Eight distinct themes (helix, holm, vance, bevel, world-dark, world-mint, atlas, bluehouse) — each a complete visual system (palette + type + accent) captured from replit.com/slides. Pick one theme, do not mix. For pitch decks, board reports, brand memos, campaign reveals — when the user explicitly wants "Replit Slides style".

Social Carousel preview prototype
@open-design Open Design
Read full prompt →

Social Carousel

A three-card social-media carousel laid out as 1080×1080 squares — three cinematic, on-brand panels with display headlines that connect across the series ("onwards." → "to the next one." → "looking ahead."). Each card has a brand mark, a number / total, a caption, and a "loop" affordance. Use when the brief asks for a "carousel post", "social carousel", "Instagram carousel", "LinkedIn series", "X thread cards", or "三连发".

Social Media Dashboard preview prototype
@open-design Open Design
Read full prompt →

Social Media Dashboard

Creator-facing social media analytics dashboard in a single HTML file. A platform switcher (X / LinkedIn / YouTube / Instagram), a row of KPI cards (followers, engagement rate, likes, reposts), a follower-growth chart, a "top post this week" preview, and a trending topics / top comments side panel. Use when the brief mentions a "social media dashboard", "creator analytics", "social analytics", or names specific platforms (X, Twitter, LinkedIn, YouTube, Instagram, TikTok) together with metrics like followers, engagement, likes, reposts.

Social Media Post - Sensational Girl Dance Storyboard (8 Shots) preview image
@open-design-contributors Open Design
Read full prompt →

Social Media Post - Sensational Girl Dance Storyboard (8 Shots)

A full 8-shot storyboard prompt set for generating a coherent frame-by-frame dance sequence of a stylish character. Includes shared global style tokens, a reusable negative prompt, and eight per-shot prompts (opening pose, hip groove, body wave, beat-drop waist twist, side hip sway, hair flick, power stance, finishing pose). Tuned for GPT-Image-2 tier models: concise vocabulary, no sensitive phrasing, consistent framing and lighting language across shots so the frames feel like one continuous choreography.

Sprite Animation preview prototype
@open-design Open Design
Read full prompt →

Sprite Animation

A pixel / sprite-style animated explainer slide — full-bleed cream stage, bold display year, animated pixel-art mascot (e.g. Hanafuda card, mushroom, or 8-bit console), kinetic Japanese display type, ticking timeline ribbon. Reads like a single frame of an educational motion video — looping CSS keyframes, no JS, ready to be screen-recorded into a vertical video. Use when the brief asks for a "sprite animation", "pixel-art video", "8-bit explainer", "history of X explainer", "kinetic typography history", "Nintendo-style", "精灵图动画", "像素动画", or "复古动画".

video
@open-design-contributors Open Design
Read full prompt →

Video - Desk Hologram AR on Real Workspace (Seedance 2.0)

A two-phase Seedance 2.0 workflow for the viral desk-hologram format: first lock a photoreal keyframe on a real developer desk (Open Design UI on the monitor, a cobalt-blue extraterrestrial hunter standing on the keyboard), then animate that still into a ~15s 9:16 image-to-video clip. Tuned for believable AR passthrough — medium-strength VFX, real desk clutter, monitor glow spill on the character, and light physical interactions (open mug, keyboard step, bow draw). Inspired by the desk-hologram Seedance 2.0 trend; no copyrighted character names in the prompt.

video
@open-design-contributors Open Design
Read full prompt →

Video - Three Kingdoms ARPG - Guan Yu Slays Yan Liang (Seedance 2.0)

A ~10s in-engine cinematic action sequence bringing the companion image template game-screenshot-three-kingdoms-guanyu-slaying-yanliang to life. Guan Yu (关羽) rides his Red Hare horse straight into an enemy battle line, raises the Green Dragon Crescent Blade, and executes a single clean cleave of the opposing general Yan Liang. Tuned for Seedance 2.0 — tight camera discipline, one decisive strike, clean horse-and-blade physics, photoreal lighting, absolutely no gore on-screen (the strike is implied by a gold qi flash, not by any blood). Designed as the direct video companion to the matching image template so the still and the clip can be served as a pair. Reference image: the Guan Yu slaying-Yan-Liang screenshot template.

video
@open-design-contributors Open Design
Read full prompt →

Video - Three Kingdoms ARPG - Lyu Bu Yuanmen Archery (Seedance 2.0)

A ~10s in-engine cinematic action sequence bringing the companion image template game-screenshot-three-kingdoms-lyubu-yuanmen-archery to life. Lyu Bu (吕布) stands at the center of a dusty military encampment between two facing armies, draws a red-lacquered longbow, holds a bead-on-draw, then looses a single gold-glowing qi-imbued arrow down the range toward a distant halberd planted in the ground. Tuned for Seedance 2.0 — tight camera discipline, a single decisive beat, crisp HUD-safe framing, clean bow/arrow physics, wind + dust + banner motion, and in-game-screenshot color grading. Designed as the direct video companion to the matching image template so the still and the clip can be served as a pair. Reference image: the Lyu Bu yuanmen-archery screenshot template.

video
@open-design-contributors Open Design
Read full prompt →

Video - Three Kingdoms ARPG - Zhao Yun Cradle Escape (Seedance 2.0)

A ~12s in-engine cinematic action sequence bringing the companion image template game-screenshot-three-kingdoms-zhaoyun-cradle-escape to life. Zhao Yun (赵云) rides his warhorse through a broken Changban battlefield, cradling the infant heir A Dou in the crook of his left arm and wielding his spear in the right, parrying an incoming strike with a single PERFECT DODGE and vaulting past a fallen war-chariot to clear a path. Tuned for Seedance 2.0 — tight camera discipline, single continuous beat, believable one-arm spearwork, clean horse physics, and absolutely no visible harm to the infant. Designed as the direct video companion to the matching image template so the still and the clip can be served as a pair. Reference image: the Zhao Yun cradle-escape screenshot template.

FAQ

What are Open Design templates?

Bundled-plugin templates that ship with Open Design — the open source Claude Design alternative. Each one is a runnable artifact: a prototype, slide deck, image generator, video composition, or HyperFrames motion piece. Your local agent runs the plugin against its prompt and an optional example HTML, and produces a ready-to-share asset on your own machine.

How are templates licensed?

Apache-2.0 across the board. Fork the prompt, adapt the example.html, change the brand tokens — the only ask is that you keep the LICENSE notice when you redistribute.

Can I run them with my own API keys?

Yes. Open Design is BYOK at every layer — your Claude / OpenAI / local-model credentials never leave your machine. The marketing site doesn't proxy any inference; the live previews you see on the catalogue rows come from posters and Cloudflare Stream URLs the templates ship with, not from a hosted runtime.

How do I contribute a template?

Open a PR against nexu-io/open-design/plugins/_official with a new folder containing open-design.json, SKILL.md, and a runnable example.html. The contributor guide in the repo’s CONTRIBUTING.md walks through the manifest fields. Approved contributions land in the public catalogue and surface here automatically on the next deploy.

How is this different from Claude Design Studio?

Claude Design Studio is Anthropic's hosted product. Open Design is the open source Claude Design alternative — every template, prompt, and design system in this catalogue lives in a public repo, runs locally against the keys you choose, and can be extended through plugins anyone can author. We mirror the same artifact taxonomy (prototypes, slides, images, video) so the mental model carries over, but everything down to the agent runtime stays on your machine.

Where do the previews come from?

Each template’s manifest carries a poster URL (Cloudflare CDN) and, for video templates, a Cloudflare Stream MP4. The grid renders the poster as the static thumbnail and swaps in the looping video on hover. Image and prototype templates show their poster directly; clicking through opens the runnable example.html on the detail page.