npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2026 – Pkg Stats / Ryan Hefner

open-design-templates

v1.1.0

Published

Ready-to-use design systems, skills, and templates for Open Design (nexu-io/open-design). One-click installation for Indian market, startup, and enterprise design artifacts.

Vulnerabilities

Powered byPowered by Snyk
  • 0High
  • 0Medium
  • 0Low

Links

Git

Maintainers

deceivedleapeddeceivedleaped

Keywords

open-designdesign-systemdesign-systemstemplatesskillsclaude-codeopen-design-templates

Readme

Open Design Templates

Ready-to-use design systems, skills, and templates for nexu-io/open-design. One-click installation for Indian market, startup, and enterprise design artifacts.

Repository: Ayush-Mahadik/open-design-templates npm: open-design-templates License: MIT

🚀 Quick Installation

# One-click: install ALL design systems and skills
npx open-design-templates@latest --all --yes

# Install a specific design system
npx open-design-templates@latest --design-system fintech-india --yes

# Install multiple at once
npx open-design-templates@latest --design-system indian-startup --design-system swiggy --skill startup-landing --skill portfolio-site --yes

# List everything available
npx open-design-templates@latest --list

Or install globally:

npm install -g open-design-templates
od-templates --all

What You Get

📦 28 Design Systems

Custom design systems not in the default Open Design bundle. Each is a complete DESIGN.md that Open Design reads as a design collaborator.

Indian Market | Design System | Vibe | |--------------|------| | indian-startup | Indigo + amber, Noto Sans, bold startup energy | | fintech-india | UPI-green trust, PhonePe/Paytm-inspired | | edtech-india | BYJU'S-red, warm parchment, progress bars | | swiggy | Food delivery orange, warm, appetizing | | zomato | Tomato red, restaurant cards, food-hero | | airtel | Corporate red-white, Airtel authority | | gov-in | Ashoka Blue, WCAG AA, Devanagari support | | pharmeasy | Clinical blue, healthcare trust signal |

D2C & Consumer | Design System | Vibe | |--------------|------| | boat-lifestyle | Dark + teal gradient, pill buttons, youth brand | | makemytrip | Travel orange + teal, urgency indicators | | phonepe | Purple UPI, gold cashback accents | | ecommerce-d2c | Serif + warm neutrals, sharp product cards |

Developer & SaaS | Design System | Vibe | |--------------|------| | saas-launchpad | Stripe-purple, B2B conversion flow | | dark-tech | Terminal dark, JetBrains Mono, dense info | | dashboard-pro | GitHub dark, surface elevation, tabular data | | linear-dark | Linear's precision dark UI, keyboard-first | | notion-clone | Warm black, zero chrome, content-first | | isometric-tech | Soft pastels, Plus Jakarta Sans, clean | | portfolio-pro | Dark mode, Newsreader serif, minimal |

Creative & Bold | Design System | Vibe | |--------------|------| | agency-pro | Space Grotesk, oversized type, Pentagram energy | | minimal-luxury | Aesop/Muji, Cormorant Garamond, restraint | | neo-brutalism | Thick borders, hard shadows, flat saturated colors | | glassmorphism | Frosted glass panels over gradients | | retro-wave | 80s synthwave, neon glow, grid horizons | | aura-glow | Ethereal luminous borders, AI product aesthetic | | news-media | Merriweather serif, editorial grid, credibility |

Social | Design System | Vibe | |--------------|------| | tiktok-style | Pink-cyan gradient on black, viral metrics | | linkedin-pro | LinkedIn blue, pill buttons, corporate trust |

🎨 20 Skills

Custom skills extending Open Design's 31 built-in skills.

Web & Marketing | Skill | Generates | |-------|-----------| | startup-landing | High-conversion SaaS landing page | | saas-launchpad | 8-section B2B landing, Stripe-grade | | portfolio-site | Professional portfolio, project grid, contact | | event-landing | Conference/hackathon page with countdown + speakers | | hackathon-page | High-energy hackathon page, prizes + tracks | | investor-deck | 10-12 slide startup pitch deck |

Business & Listings | Skill | Generates | |-------|-----------| | pricing-page | 2-4 tier pricing comparison, feature table | | job-portal | Job listing/detail page, requirements, apply form | | real-estate | Property listing with gallery, amenities, enquiry | | appointment-booking | Calendar booking UI with time slots |

Content & Editorial | Skill | Generates | |-------|-----------| | blog-post | Long-form article with author bio, tags, related | | about-page | Company story, team, values, mission | | email-signup | Newsletter capture landing with social proof | | docs-page | Documentation with sidebar nav and code blocks | | podcast-landing | Podcast page with episode list and subscribe |

E-Commerce & Food | Skill | Generates | |-------|-----------| | restaurant-menu | Menu with categories, dishes, dietary tags | | edtech-course | Course landing with curriculum, instructor, reviews |

Social & Mobile | Skill | Generates | |-------|-----------| | social-media-post | Instagram/LinkedIn/X graphics (1080×1080) | | instagram-story | Vertical story format (1080×1920) with CTA | | mobile-onboarding | 3-5 screen app onboarding flow |

Data & Finance | Skill | Generates | |-------|-----------| | crypto-dashboard | Dark crypto portfolio dashboard, price charts |

How It Works

Open Design reads design systems from its design-systems/ directory and skills from its skills/ directory. This tool copies the right files to the right places automatically.

open-design-templates/
├── design-systems/   → copied to Open Design design-systems/
│   ├── indian-startup/   DESIGN.md
│   ├── fintech-india/    DESIGN.md
│   └── ... (28 total)
├── skills/          → copied to Open Design skills/
│   ├── startup-landing/  SKILL.md
│   ├── portfolio-site/   SKILL.md
│   └── ... (20 total)
└── bin/
    └── od-templates.js  ← the CLI tool

After install, restart Open Design and select your new design system from the top-bar dropdown, or trigger a skill by asking for it in the prompt.

One-Click Install Command Reference

# Install everything
npx open-design-templates@latest --all --yes

# By category — Indian market
npx open-design-templates@latest \
  --design-system fintech-india \
  --design-system edtech-india \
  --design-system indian-startup \
  --yes

# By category — Developer tools
npx open-design-templates@latest \
  --design-system linear-dark \
  --design-system dark-tech \
  --design-system dashboard-pro \
  --skill crypto-dashboard \
  --yes

# By category — Creative
npx open-design-templates@latest \
  --design-system neo-brutalism \
  --design-system glassmorphism \
  --design-system retro-wave \
  --skill social-media-post \
  --skill instagram-story \
  --yes

Design System Deep Dive

Indian Startup (indian-startup)

Bold indigo + amber on violet-tinted white. Noto Sans body, Inter headings. Works for any Indian startup from Series A to pre-seed.

Palette: #4F46E5 indigo + #F59E0B amber

Indian Fintech (fintech-india)

Paytm/PhonePe trust-first. Green on white, UPI-blue (#1A3B6B) for dark sections. Tabular numerals for financial figures.

Palette: #00D09C (PhonePe green)

EdTech India (edtech-india)

BYJU'S/Unacademy energy. Red (#E23744) dominates CTAs. Warm parchment cards. Progress bars everywhere.

Palette: #E23744 red + #F4A261 warm orange + #2A9D8F teal progress

boAt Lifestyle (boat-lifestyle)

Dark surfaces, teal-to-blue gradient CTAs, pill-shaped buttons. The D2C electronics brand aesthetic.

Palette: linear-gradient(135deg, #00D1C6, #0083FF) on #0D0D0D

Neo-Brutalism (neo-brutalism)

3-4px black borders, hard offset shadows (no blur), flat saturated colors. The raw, unpolished opposite of minimal.

Signature: box-shadow: 4px 4px 0px #0A0A0A; border: 3px solid #0A0A0A;

Glassmorphism (glassmorphism)

Translucent panels with backdrop-filter: blur(). Must have gradient background to show the effect.

Signature: backdrop-filter: blur(20px); background: rgba(255,255,255,0.15);

Retro Wave (retro-wave)

80s synthwave: neon glow text shadows, perspective grid, sunset horizon gradient. Orbitron + Rajdhani fonts.

Signature: text-shadow: 0 0 10px #FF2A6D, 0 0 20px #FF2A6D;

Linear Dark (linear-dark)

The Linear app aesthetic. Surface elevation (not shadow) for hierarchy. Left-border active nav items.

Palette: #0D0D0F bg + #5E6AD2 purple accent + surface layers #111113 → #1C1C1F

Resources

| Resource | Link | |----------|------| | Open Design | nexu-io/open-design | | Design System Spec | DESIGN.md Format | | Skills Protocol | Skills Protocol | | npm Package | open-design-templates |

Contributing

PRs welcome! To add a new design system:

  1. Create design-systems/your-system/DESIGN.md following the spec
  2. Add an entry to manifest.json under designSystems
  3. Commit and open a PR

To add a new skill:

  1. Create skills/your-skill/SKILL.md following the skills protocol
  2. Add an entry to manifest.json under skills
  3. Commit and open a PR

Attribution: Design systems are aesthetic inspirations — none are official brand assets. All DESIGN.md files follow the DESIGN.md spec by nexu-io/open-design (Apache-2.0).