zinch/vibe-nothing-ui-design
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Point links to renamed repo; add in-source instructions for the two demo GIFs

Browse Source
This commit is contained in:
秉寒 2026-06-11 18:55:46 +08:00
parent e782383d8a
commit c09f7bb84e
3 changed files with 39 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.github/ISSUE_TEMPLATE/config.yml vendored
View File

@ -1,5 +1,5 @@
blank_issues_enabled: false
contact_links:
- name: Security report
url: https://github.com/wangbh030722/nothing-ui-design-system/security/advisories/new
url: https://github.com/wangbh030722/vibe-nothing-ui-design/security/advisories/new
about: Report vulnerabilities privately

14
README.md
View File

@ -4,13 +4,13 @@
[![MIT License](https://img.shields.io/badge/license-MIT-white.svg)](LICENSE)
[![Zero dependencies](https://img.shields.io/badge/dependencies-0-D71921.svg)](#quick-start)
[![Live demo](https://img.shields.io/badge/demo-GitHub%20Pages-black.svg)](https://wangbh030722.github.io/nothing-ui-design-system/)
[![Live demo](https://img.shields.io/badge/demo-GitHub%20Pages-black.svg)](https://wangbh030722.github.io/vibe-nothing-ui-design/)
**A Nothing-inspired UI design system for the web.**
Monochrome surfaces · round-dot type & icons · a single signal-red accent · a sparse dot field that inverts against whatever sits behind it. Zero dependencies — pure HTML, CSS custom properties, and a little vanilla JavaScript. No framework, no build step.
**[Live demo](https://wangbh030722.github.io/nothing-ui-design-system/demo.html)** · **[All components](https://wangbh030722.github.io/nothing-ui-design-system/)** · **[SPEC.md](SPEC.md)** · **[DESIGN.md](DESIGN.md)**
**[Live demo](https://wangbh030722.github.io/vibe-nothing-ui-design/demo.html)** · **[All components](https://wangbh030722.github.io/vibe-nothing-ui-design/)** · **[SPEC.md](SPEC.md)** · **[DESIGN.md](DESIGN.md)**
</div>
@ -22,10 +22,20 @@ Monochrome surfaces · round-dot type & icons · a single signal-red accent · a
*Drag the divider — same content, default AI styling on the left, this system on the right.*
<!-- ▼▼▼ GIF #1 — PASTE YOUR RECORDING HERE ▼▼▼
Save your file at EXACTLY: docs/demo-compare.gif
Record demo.html Stage 1 (the AI-vs-Vibe-Nothing-UI split): let it auto-sweep once,
then drag the divider left↔right a couple of times. ~1000–1200px wide, 5–8s loop, ≤8MB.
Once the file exists this image renders automatically — nothing else to edit.
See docs/_HOW-TO-ADD-GIFS.md for full steps; delete that file when done. ▲▲▲ -->
<img src="docs/demo-compare.gif" alt="Dragging between a generic AI dashboard and the Vibe-Nothing-UI version" width="900">
### Dark ⟷ Light — one attribute
<!-- ▼▼▼ GIF #2 — PASTE YOUR RECORDING HERE ▼▼▼
Save your file at EXACTLY: docs/demo-theme.gif
Record demo.html Stage 2 (dark↔light): drag the divider across, with the dashboard motion running.
~1000–1200px wide, 5–8s loop, ≤8MB. ▲▲▲ -->
<img src="docs/demo-theme.gif" alt="Dragging between dark and light themes of the same console" width="900">
</div>

26
docs/_HOW-TO-ADD-GIFS.md Normal file
View File

@ -0,0 +1,26 @@
# How to add the two demo GIFs (then delete this file)
The README shows two animated demos. The image files are not in the repo yet — add them here, in `docs/`, with these **exact filenames**:
| File (exact path) | What to record | Specs |
|---|---|---|
| `docs/demo-compare.gif` | `demo.html` **Stage 1** — the split between generic AI output and Vibe-Nothing-UI. Let the auto-sweep run once, then drag the divider left↔right a couple of times. | ~1000–1200px wide · 5–8s loop · ≤8MB |
| `docs/demo-theme.gif` | `demo.html` **Stage 2** — Dark ⟷ Light. Drag the divider across while the dashboard motion runs. | ~1000–1200px wide · 5–8s loop · ≤8MB |
## Recording (macOS)
1. Open the live demo or the local file: `demo.html`.
2. `⌘⇧5` → record a small region around the console → stop. (Or use [Kap](https://getkap.co), which exports GIF directly.)
3. Convert the `.mov` to GIF with [Gifski](https://gif.ski) (drag the clip in, set width ~1100px, export).
4. Save the result as `docs/demo-compare.gif` / `docs/demo-theme.gif` (overwrite — these exact names).
## Publish
```sh
git add docs/demo-compare.gif docs/demo-theme.gif
git rm docs/_HOW-TO-ADD-GIFS.md # delete this helper once both GIFs are in
git commit -m "Add demo GIFs to README"
git push
```
That's it — the README `<img>` tags already point at these paths, so the GIFs appear automatically. Until both files exist, those two images render as broken on the README.