Open Design Skill System
Open Design provides 118 skills + 146 brand design systems. Each skill is an independent SKILL.md file containing trigger keywords, use cases, and output specifications.
📊 Presentations/Demos (54 skills)
Core Presentations (13)
| Skill | Trigger Keywords | Description |
|---|
| html-ppt | ppt, deck, slides | HTML presentation studio, multi-style/layout/animation, foundation for all presentations |
| html-ppt-pitch-deck | pitch deck, fundraising | 10-page investor pitch deck, white background + blue-purple gradient hero + traction chart |
| guizang-ppt | ppt, deck, slides | Guizang magazine × e-ink style PPT-WebGL fluid background + horizontal page turning |
| simple-deck | deck, slides, ppt | Simplest horizontal sliding HTML presentation, basic seed template |
| html-ppt-presenter-mode-reveal | presenter mode, presenter mode | Presenter mode, 5 themes with T-key toggle + transcript examples |
| html-ppt-product-launch | product launch, keynote | Product launch keynote, dark hero + light content + warm orange→peach accent |
| html-ppt-tech-sharing | tech sharing, tech talk | Tech sharing presentation, GitHub-dark + JetBrains Mono + terminal code blocks |
| html-ppt-weekly-report | weekly report, weekly report | Team weekly report presentation, 8-cell KPI grid + shipped list + 8-week bar chart |
| html-ppt-course-module | course module, workshop | Online course/workshop, Playfair serif + left-side learning objectives navigation |
| html-ppt-xhs-post | Xiaohongshu, xhs | Xiaohongshu/Instagram 9-page 3:4 vertical image-text posts (810×1080) |
| html-ppt-xhs-pastel-card | pastel, macaron | Soft macaron slow living, cream background + soft glow blob + Playfair italic |
| html-ppt-xhs-white-editorial | white-background magazine, magazine style | White-background magazine style, pure white + 10-color rainbow bar + purple-blue-green-orange-pink gradient |
| html-ppt-dir-key-nav-minimal | minimal keynote, minimalist | 8-page minimalist arrow-key keynote, each page in a single distinct color (indigo/cream/crimson/jade/gray/purple/white/charcoal) |
Scenario Presentations (9)
| Skill | Trigger Keywords | Description |
|---|
| html-ppt-taste-editorial | , | Editorial minimalism, warm cream + serif display + hairline rules |
| html-ppt-taste-brutalist | , | Tactical telemetry/CRT, charcoal slides + monospace + hard rectangles |
| html-ppt-graphify-dark-graph | knowledge graph, graph deck | Dark-background knowledge graph, late-night gradients + blur orbs + SVG force-directed graph |
| html-ppt-knowledge-arch-blueprint | architecture, blueprint | Cream blueprint architecture, cream paper #F0EAE0 + rust red #B5392A + blueprint grid |
| html-ppt-hermes-cyber-terminal | terminal review, cli review | Dark-terminal honest-review, cyber grid + CRT vignette + scanlines |
| html-ppt-obsidian-claude-gradient | github dark, developer tutorial | GitHub dark-purple gradient, #0d1117 + purple-blue radial ambient light |
| html-ppt-testing-safety-alert | safety alert, incident | Red-amber alert, hazard stripes + red strikethrough + L1/L2/L3 tier |
| weekly-update | weekly update, team update | Team status updates, shipped/in flight/blocked/metrics/asks |
| replit-deck | replit deck, replit slides | Replit Slides style, 8 distinct visual directions to choose from |
Design Templates (4)
| Skill | Trigger Keywords | Description |
|---|
| editorial-burgundy-principles-template | editorial burgundy, studio salon | Burgundy/pink/matte gold, high-end studio manifesto presentation |
| after-hours-editorial-template | after hours, dark fashion | Dark editorial, haute couture three-page cinematic storyboard |
| open-design-landing-deck | slide deck, presentation | Atelier Zero-warm-paper + italic-serif emphasis |
| kami-deck | kami deck, paper deck | Print-grade paper, warm parchment + ink-blue accent |
Zhangzara Style Series (28)
Each is an independent visual style. Trigger: "Use zhangzara-[style name] to make a presentation"
| Style | Trigger keyword | Visual characteristics | Use cases |
|---|
| 8-Bit Orbit | 8-bit-orbit | Pixel neon arcade + deep navy | Gaming, tech |
| Biennale Yellow | biennale-yellow | Sun yellow + parchment + deep indigo serif | Art exhibitions |
| BlockFrame | block-frame | Neo-brutalist + pastel color blocks + thick black borders | Bold impact |
| Blue Professional | blue-professional | Cream paper + electric cobalt blue | Business professional |
| Bold Poster | bold-poster | Shrikhand display type + fiery red accent | Event promotion |
| Broadside | broadside | Dark canvas + flame orange + bilingual typography | In-depth, serious |
| Capsule | capsule | Pill-shaped cards + pastel palette | Young and lively |
| Cartesian | cartesian | Warm neutrals + Playfair serifs | Academic, quiet |
| Cobalt Grid | cobalt-grid | Cobalt blue italics + graph paper + glitch decorations | Technical engineering |
| Coral | coral | Cream coral + near-black + Bebas Neue | Bold graphics |
| Creative Mode | creative-mode | Cream paper + multicolor (green, pink, orange, yellow) + Archivo Black | Creative, versatile |
| Daisy Days | daisy-days | Hand-drawn daisies/stars/rainbows | Warm and friendly |
| Editorial Tri-Tone | editorial-tri-tone | Tri-tone (pink/mustard/burgundy) + Bricolage | High-end brands |
| Grove | grove | Forest green + cream typography + Playfair | Natural, organic |
| Long Table | long-table | Cream and rust red + grotesk headings + candlestick typography | Dining and social |
| Mat | mat | Deep sage + bone paper + burnt-orange | Mid-century modern |
| Monochrome | monochrome | Ivory paper + all black + Lora serif | Minimal, high-end |
| Neo-Grid Bold | neo-grid-bold | Neo-brutalist + neon yellow accent | Avant-garde impact |
| People's Platform | peoples-platform | Campaign poster (blue/orange/red) + Alfa Slab | Social causes |
| Pin & Paper | pin-and-paper | Yellow paper + safety pin illustrations + Caveat handwriting | DIY crafts |
| Pink Script | pink-script | Black background + hot pink + pearl cream + Instrument Serif | Evening luxury |
| Playful | playful | Warm peach + Syne display | Independent brands |
| Raw Grid | raw-grid | Neo-brutalist + thick borders + offset shadows | Raw personality |
| Retro Windows | retro-windows | Win95 chrome + MS Sans Serif + pixel typography | Nostalgic tech |
| Retro Zine | retro-zine | Beige paper + green + riso print style | Independent publishing |
| Sakura Chroma | sakura-chroma | Japanese retro cassette packaging + rainbow ribbons | Japanese retro |
| Scatterbrain | scatterbrain | Post-it notes + Caveat handwriting | Brainstorming |
| Signal | signal | Navy blue + bone paper + matte gold | Institutional authority |
| Soft Editorial | soft-editorial | Cormorant Garamond + sage/pink/lemon | Gentle elegance |
| Stencil & Tablet | stencil-tablet | Stencil-cut headings + six earth tones | Archaeology and history |
| Studio | studio | Black background + electric yellow typography | High-voltage energy |
| Vellum | vellum | Navy blue + warm yellow Cormorant italic + dusty teal | Academic, classic |
🌐 Web/Landing Page Category (12 skills)
| Skill | Trigger Keywords | Description |
|---|
| web-prototype | prototype, mockup, landing | General-purpose desktop web prototype, single-file HTML + seed template |
| saas-landing | saas landing, marketing page | SaaS landing page, hero + features + social proof + pricing + CTA |
| pricing-page | pricing, pricing page | Pricing page, header + plan tiers + comparison table + FAQ |
| waitlist-page | waitlist page, coming soon | Pre-launch landing page, email capture + brand logo |
| open-design-landing | landing page, landing page | Atelier Zero editorial-style landing page, Monocle/Apartments visual |
| kami-landing | kami, paper | Paper-textured, print-grade single page, warm parchment + serif accents |
| dating-web | dating app, matchmaking | Dating/matchmaking website, left rail + ticker bar + community signals |
| web-prototype-taste-brutalist | , | Swiss industrial printing, newsprint + monolithic black grotesque |
| web-prototype-taste-editorial | , | Editorial minimalism, serif display + grotesque body + 1px hairline |
| web-prototype-taste-soft | , | Apple-level softness, silver/cream + squircle radii + subtle shadows |
| social-carousel | social carousel, instagram | Social media carousel, 1080×1080 three-card cinematic panels |
| live-artifact | live artifact, live dashboard | Refreshable/auditable artifact-connector/local data backed |
📊 Dashboard Category (9 Skills)
| Skill | Trigger Keywords | Description |
|---|
| dashboard | dashboard, admin panel | Admin/analytics dashboard, fixed left sidebar + top bar + KPI grid |
| kanban-board | kanban, task board | Kanban/task board, To do / In progress / In review / Done |
| live-dashboard | team dashboard, notion dashboard | Notion-style team dashboard, KPIs + activity + team members |
| social-media-dashboard | social media dashboard | Creator social analytics, platform switching (X/LinkedIn/YouTube/TikTok) |
| github-dashboard | github dashboard, repo dashboard | GitHub repository analytics, stars/forks/contributors/issues/PRs |
| flowai-live-dashboard-template | flowai dashboard | FlowAI team management, three tabs (Members/Details/Activity) |
| trading-analysis-dashboard-template | trading analysis dashboard | Professional trading analysis, light/dark toggle + market panel + charts |
| social-media-matrix-tracker-template | social media matrix | Social media matrix data tracking, cinematic data-driven UI |
| dating-web | dating app, matchmaking | Dating/matchmaking dashboard, left rail + ticker bar |
📱 Mobile Apps (2 skills)
| Skill | Trigger Keywords | Description |
|---|
| mobile-app | mobile app, ios app | iPhone 15 Pro pixel-perfect frame, copies seed app files |
| mobile-onboarding | mobile onboarding | Multi-screen onboarding, splash → value-prop → sign-in |
🎨 Visual/Animation/Multimedia (7 skills)
| Skill | Trigger Keywords | Description |
|---|
| hyperframes | hyperframes, html video | Video compositing, animation/title cards/subtitles/voice/audio-reactive |
| motion-frames | motion design, animated hero | CSS animation design, rotating text ring/animated globe/bouncing counters |
| audio-jingle | music, jingle, bed | Audio generation, jingles/sound effects/voiceovers (Suno V5/Udio/Stable Audio) |
| video-shortform | video, clip, shortform | Short-form video, 3-10 second product showcases/teasers/ambient loops |
| image-poster | poster, key art, illustration | Single-image poster, gpt-image-2 by default, supports multiple providers |
| sprite-animation | sprite animation, pixel art | Pixel sprite animation, cream stage + bold year + pixel character |
| hatch-pet | hatch a pet, codex pet | Animated pet sprite sheet, create/repair/validate/package |
🔍 Review/Audit Category (2 skills)
| Skill | Trigger Keywords | Description |
|---|
| critique | critique, design review, 5-dimension review | 5-dimension design review: philosophy/hierarchy/detail/functionality/innovation (0-10 points) + radar chart |
| pptx-html-fidelity-audit | pptx fidelity, ppt layout drift | PPTX vs HTML audit: layout/content drift detection + repair guide |
📝 Documentation/Template Category (10 skills)
| Skill | Trigger Keywords | Description |
|---|
| docs-page | docs, documentation | Documentation page: inline-start nav + scrollable article + inline-end TOC |
| blog-post | blog, blog post, article | Long-form blog post: masthead + hero + article body + pull quotes |
| meeting-notes | meeting notes, minutes | Meeting notes: title bar + attendees + agenda + decisions + action items |
| hr-onboarding | onboarding, new hire | New hire onboarding: first week + buddy + manager + learning track |
| email-marketing | email, newsletter | Brand product launch email: masthead + wordmark + hero + CTA |
| eng-runbook | runbook, ops doc | Engineering runbook: service overview + alerts + copy-paste commands |
| design-brief | design brief, ilang brief | Design brief analysis: I-Lang protocol → concrete design spec |
| digital-eguide | e-guide, digital guide | Digital e-guide: cover + what's inside stats + table of contents |
| pm-spec | prd, spec, product spec | Product specification/PRD: problem + metrics + scope + user stories + rollout |
| invoice | invoice, bill | Printable invoice: sender/recipient + line items + tax + totals |
💰 Finance/Business (5 skills)
| Skill | Trigger Keywords | Description |
|---|
| dcf-valuation | dcf, discounted cash flow | DCF valuation, cash flow forecasting + intrinsic value analysis |
| finance-report | financial report, quarterly report | Financial reports, KPIs + revenue/burn charts + P&L summary |
| ib-pitch-book | ib pitch book, investment banking | Investment banking strategy pitch book, trading comps + precedent transactions + football field |
| team-okrs | okr, okrs, key results | OKR tracking, quarter banner + objectives + progress bars + owners |
| clinical-case-report | case report, soap note | Medical case reports, SOAP format + clinical rounds standards |
🔗 Orbit Information Digest Category (5 Skills)
| Skill | Trigger Keywords | Description |
|---|
| orbit-general | orbit, daily digest | General daily digest, automatically selected when 2+ connectors are connected |
| orbit-github | github briefing, pr digest | GitHub PR/issue digest, selected when it is the only/preferred connector |
| orbit-gmail | gmail briefing, inbox digest | Gmail inbox digest, selected when it is the only/preferred connector |
| orbit-linear | linear briefing, issue digest | Linear issue digest, selected when it is the only/preferred connector |
| orbit-notion | notion briefing, doc digest | Notion document digest, selected when it is the only/preferred connector |
🛠️ Tools/Utility (4 skills)
| Skill | Trigger keywords | Description |
|---|
| tweaks | tweaks, variants | Real-time parameter control panel, accent color/type scale/density/motion |
| wireframe-sketch | wireframe, sketch | Hand-drawn wireframes, graph-paper + marker/pencil tone + tab labels |
| last30days | last 30 days, recent sentiment | Community trends over the past 30 days, what people are saying now |
| x-research | x research, twitter sentiment | X/Twitter sentiment research, market/company/product/community discourse |
🎮 Games/Interactive (1 skill)
| Skill | Trigger Keywords | Description |
|---|
| gamified-app | gamified app, habit tracker | Gamified mobile app, three phone frames on dark showcase stage |
🏢 Enterprise Collaboration/Other (2 skills)
| Skill | Trigger Keywords | Description |
|---|
| swiss-user-research-video-template | swiss user research | Swiss-style user research, warm-paper editorial aesthetics |
| magazine-poster | magazine poster, editorial poster | Editorial-style poster, newsprint + dateline + oversized serif headline |
Usage
Natural Language Triggering
Simply describe your request:
Help me put together a seed round pitch deck
Make a SaaS landing page, in brutalist style
Review the design from just now
Make a brand introduction presentation in zhangzara-studio style
Specifying a Design Style
146 brand design systems:
| Type | Examples |
|---|
| Technology Brands | Apple, Vercel, Stripe, Linear, Figma, Cursor |
| Media Brands | Monocle, WIRED, Kinfolk |
| Design Styles | Burgundy Editorial, Atelier Zero, Kami (Paper) |
Make a landing page in Stripe style
Make a pitch deck in Apple style
Workflow
1. Generate → "Make me a seed round pitch deck"
2. Review → "critique / 5-dimension review"
3. Revise → Iterate based on review feedback
4. Loop → until satisfied
Example Use Cases
Scenario 1: Quickly Find a Skill
You need to create a pitch deck but are not sure which skill to use. Use the categorized catalog to quickly locate html-ppt-pitch-deck or simple-deck.
Scenario 2: Brand Style Matching
You want to create a landing page with a specific brand style (such as Stripe or Apple). Use the catalog to find the corresponding design system and trigger keywords.
Scenario 3: Using Skill Combinations
You need a workflow that handles presentation creation, review, and revision together. Use the catalog to understand the relationships between skills and recommended combinations.
Reference Resources