https://github.com/simplearyan/design-demos
A collection of experimental design concepts, prototypes, and landing pages.
https://github.com/simplearyan/design-demos
Last synced: 5 days ago
JSON representation
A collection of experimental design concepts, prototypes, and landing pages.
- Host: GitHub
- URL: https://github.com/simplearyan/design-demos
- Owner: simplearyan
- Created: 2026-02-14T09:23:41.000Z (5 months ago)
- Default Branch: main
- Last Pushed: 2026-04-14T04:01:57.000Z (3 months ago)
- Last Synced: 2026-04-14T05:12:14.735Z (3 months ago)
- Language: HTML
- Homepage: https://simplearyan.github.io/design-demos/
- Size: 23.9 MB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Design Demos — Aryan's UI Lab
A curated collection of **61+ UI design prototypes** across 10 project domains — video editors, LMS readers, portfolios, data viz tools, and more. Powered by an auto-generating portal with screenshot previews.
## 🌐 Live Site
**[simplearyan.github.io/design-demos](https://simplearyan.github.io/design-demos/)**
---
## 🖼️ Project Previews
### 💣 Brutalism
> Raw, editorial brutalist UI experiments
---
### 🎬 CapCut Clone
> Pro video editor UI clones & variants
| Chart Studio 0.1 | Chart Studio 0.4.1 |
|---|---|
|  |  |
---
### 📊 Flourish Design
> Data viz studio UI inspired by Flourish
| Flourish Clone | Different Font Variant |
|---|---|
|  |  |
---
### 📚 Gemini LMS
> Course reader & LMS UI iterations
| Course Read (v1) | Discord Version | Stats Course |
|---|---|---|
|  |  |  |
---
### 🎨 Kenichi Animation Studio
> Animation studio app design evolution
| v0.2 Home Page | v0.3 Responsive Bottom Bar |
|---|---|
|  |  |
---
### 🌐 Landing Pages
> Marketing & personal landing pages
| Aryan DS | Gemini Notes |
|---|---|
|  |  |
---
### 📝 Personal Notes Site
> Multi-page personal notes & portfolio site
| Index | Course Read | Solutions |
|---|---|---|
|  |  |  |
---
### 🔢 Pol-Math
> Math-focused educational tool iterations
| v4 | v5 | v6 |
|---|---|---|
|  |  |  |
---
### 🌌 Zero Gravity
> Personal portfolio v1 — space theme
| Notes Page | Solutions Page | Devlog |
|---|---|---|
|  |  |  |
---
### ✨ Zero Gravity V2
> Full redesign iteration of Zero Gravity
| Home | Course Read | Notes |
|---|---|---|
|  |  |  |
---
## 📁 Project Structure
```
design-demos/
├── _config.js ← Single source of truth for all project metadata
├── generate-index.js ← Generates index.html from config + screenshots
├── generate-preview.js ← Puppeteer screenshot capture (cached)
├── index.html ← Auto-generated portal (Grid + List view + Search)
├── screenshots/ ← Auto-generated thumbnails (committed to repo)
│
├── brutalism/
├── capcut-clone-deisng/
├── flourish-design/
├── gemini-lms/
├── kenichi-animation-studio/
├── landing-pages/
├── personal-notes-site/
├── pol-math/
├── zero-gravity/
└── zero-gravity-v2/
```
---
## 🛠 Development
### Adding a New Project
1. **Add your HTML file(s)** to an existing subdirectory, or create a new one.
2. **Register it** in `_config.js` (only needed for new directories):
```js
{ id: 'my-new-project', label: 'My New Project', icon: '🚀', desc: 'Short description' }
```
3. **Run the build** — see commands below.
### npm Scripts
| Command | What it does |
| :--- | :--- |
| `npm run index` | Fast — regenerates `index.html` only (no browser needed) |
| `npm run preview` | Captures screenshots for **new** files only, then regenerates index |
| `npm run preview:force` | Re-captures **all** screenshots, then regenerates index |
| `npm run build` | Runs both `index` and `preview` |
```bash
# After adding new HTML files:
npm run preview # takes screenshots of new files, rebuilds index
# To refresh all thumbnails:
npm run preview:force
```
> **Local note:** `npm run preview` uses your system-installed Chrome on Windows/macOS.
> No need to run `npx puppeteer browsers install` locally.
---
## 🚀 Deployment
Pushes to `main` automatically deploy to GitHub Pages via GitHub Actions:
1. Checkout code
2. `npm install`
3. `npx puppeteer browsers install chrome` — installs browser for CI
4. `npm run preview` — captures any new screenshots, regenerates `index.html`
5. Upload & deploy to GitHub Pages
> **Setup:** Go to **Settings → Pages** and set the source to **"GitHub Actions"**.
---
## 🎨 Design Systems
| File | Theme | Used In |
| :--- | :--- | :--- |
| `Capcut_Palette.md` | Dark Studio (`#0a0a0a` + neon cyan) | CapCut Clone, Chart Studio |
| `Flourish_Palette.md` | Light Data-Viz (white + ocean teal) | Flourish Design, Chart Studio |