vibe-nothing-ui-design
Zero-dependency Nothing-inspired UI design system with monochrome styling, dot-matrix typography, and signal-red accents for web interfaces
Quellinformationen
- Repository
- reason-machines/design-skills
- Letzte Quellaktivität
- 19. Juni 2026 um 12:46
- Erkannte Sprache von SKILL.md
- Englisch
- Sterne
- 4
- Forks
- 0
Installationsoptionen
Standardmäßig ist der Prompt ausgewählt, der zuerst die Quelle prüft. Sie können zu einem direkten Befehl wechseln oder eine lokale Kopie herunterladen.
Quelldateien prüfen
Lesen Sie SKILL.md und alle von SkillsMP angezeigten Begleitdateien, bevor Sie sich für eine Installation entscheiden.
SKILL.md wird angezeigt
SKILL.md
Quellanweisungen · Schreibgeschützte Vorschau- name
- vibe-nothing-ui-design
- description
- Zero-dependency Nothing-inspired UI design system with monochrome styling, dot-matrix typography, and signal-red accents for web interfaces
- triggers
- ["add nothing ui components","style with nothing design system","create monochrome interface","use dot matrix typography","implement nothing inspired ui","add vibe nothing components","style with signal red accent","create zero dependency ui"]
# Vibe-Nothing-UI-Design Skill
> Skill by [ara.so](https://ara.so) — Design Skills collection.
## Overview
Vibe-Nothing-UI-Design is a zero-dependency UI component library inspired by Nothing's visual language. It provides ready-to-use HTML/CSS components with:
- **Monochrome surfaces** (black, grey, white hierarchy)
- **Round-dot typography** (Doto font) and iconography
- **Single signal-red accent** (#D71921) for critical states only
- **Dark/light themes** via single attribute
- **No build step** — pure HTML, CSS custom properties, vanilla JS
Perfect for creating distinctive, minimal interfaces without framework dependencies.
## Installation
### Direct Integration
1. **Copy files** into your project:
```
your-project/
├── css/
│ └── nothing-ui.css
├── js/
│ └── nothing-ui.js
└── fonts/
└── open/
├── doto/
├── geist/
├── geist-mono/
└── newsreader/
```
2. **Link in HTML**:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/nothing-ui.css">
</head>
<body data-theme="dark">
<!-- Your components here -->
<script src="js/nothing-ui.js"></script>
</body>
</html>
```
### Theme Control
Set theme on any ancestor element:
```html
<!-- Dark theme (default) -->
<body data-theme="dark">
<!-- Light theme -->
<body data-theme="light">
<!-- Per-section theming -->
<main data-theme="light">
<aside data-theme="dark">...</aside>
</main>
```
Toggle programmatically:
```javascript
// Toggle theme
document.body.dataset.theme =
document.body.dataset.theme === 'dark' ? 'light' : 'dark';
```
## Core Components
### Buttons
```html
<!-- Primary button (white on black) -->
<button class="btn btn-primary">Run Agent</button>
<!-- Secondary button (outlined) -->
<button class="btn btn-secondary">Cancel</button>
<!-- Danger button (signal red - use sparingly) -->
<button class="btn btn-danger">Delete</button>
<!-- Disabled state -->
<button class="btn btn-primary" disabled>Processing...</button>
<!-- Small variant -->
<button class="btn btn-primary btn-sm">Compact</button>
```
### Form Inputs
```html
<!-- Text input -->
<div class="form-group">
<label for="name" class="form-label">Project Name</label>
<input type="text" id="name" class="form-input" placeholder="my-project">
</div>
<!-- Text area -->
<div class="form-group">
<label for="desc" class="form-label">Description</label>
<textarea id="desc" class="form-input" rows="4"></textarea>
</div>
<!-- Select dropdown -->
<div class="form-group">
<label for="model" class="form-label">Model</label>
<select id="model" class="form-select">
<option>GPT-4</option>
<option>Claude 3</option>
<option>Gemini Pro</option>
</select>
</div>
<!-- Checkbox -->
<label class="checkbox">
<input type="checkbox">
<span>Enable monitoring</span>
</label>
<!-- Radio buttons -->
<div class="radio-group">
<label class="radio">
<input type="radio" name="env" value="dev">
<span>Development</span>
</label>
<label class="radio">
<input type="radio" name="env" value="prod">
<span>Production</span>
</label>
</div>
```
### Cards
```html
<!-- Basic card -->
<div class="card">
<div class="card-header">
<h3>Deployment Status</h3>
</div>
<div class="card-body">
<p>Your application is running on 3 instances.</p>
</div>
<div class="card-footer">
<button class="btn btn-secondary btn-sm">View Logs</button>
</div>
</div>
<!-- Card with signal -->
<div class="card">
<div class="card-header">
<h3>Build Pipeline</h3>
<span class="badge badge-danger">Blocked</span>
</div>
<div class="card-body">
<p>Requires manual approval to proceed.</p>
</div>
</div>
```
### Badges & Status Pills
```html
<!-- Status badges -->
<span class="badge badge-success">Active</span>
<span class="badge badge-warning">Pending</span>
<span class="badge badge-danger">Failed</span>
<span class="badge badge-neutral">Idle</span>
<!-- In context -->
<div class="table-cell">
<span class="badge badge-warning">Deploying</span>
</div>
```
### Tables
```html
<table class="table">
<thead>
<tr>
<th>Agent</th>
<th>Status</th>
<th>Last Run</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>content-generator</td>
<td><span class="badge badge-success">Active</span></td>
<td><code>2m ago</code></td>
<td>
<button class="btn btn-sm btn-secondary">Logs</button>
</td>
</tr>
<tr>
<td>image-processor</td>
<td><span class="badge badge-danger">Blocked</span></td>
<td><code>14m ago</code></td>
<td>
<button class="btn btn-sm btn-danger">Review</button>
</td>
</tr>
</tbody>
</table>
```
### Alerts
```html
<!-- Info alert (neutral) -->
<div class="alert alert-info">
<strong>Note:</strong> Deployment will begin in 5 minutes.
</div>
<!-- Success alert -->
<div class="alert alert-success">
<strong>Deployed:</strong> Version 2.1.0 is now live.
</div>
<!-- Warning alert (signal red) -->
<div class="alert alert-warning">
<strong>Action Required:</strong> API key expires in 3 days.
</div>
<!-- Error alert (signal red) -->
<div class="alert alert-error">
<strong>Build Failed:</strong> Check logs for details.
</div>
```
### Navigation
```html
<!-- Sidebar navigation -->
<nav class="nav-sidebar">
<a href="#" class="nav-item active">Dashboard</a>
<a href="#" class="nav-item">Agents</a>
<a href="#" class="nav-item">Deployments</a>
<a href="#" class="nav-item">Settings</a>
</nav>
<!-- Breadcrumb -->
<nav class="breadcrumb">
<a href="#">Projects</a>
<span class="breadcrumb-separator">/</span>
<a href="#">my-agent</a>
<span class="breadcrumb-separator">/</span>
<span>Runs</span>
</nav>
<!-- Tabs -->
<div class="tabs">
<button class="tab active">Overview</button>
<button class="tab">Logs</button>
<button class="tab">Metrics</button>
</div>
```
### Modal Dialog
```html
<div class="modal" id="confirm-dialog">
<div class="modal-overlay"></div>
<div class="modal-content">
<div class="modal-header">
<h2>Confirm Deletion</h2>
<button class="modal-close" aria-label="Close">×</button>
</div>
<div class="modal-body">
<p>This action cannot be undone. Delete agent "content-gen"?</p>
</div>
<div class="modal-footer">
<button class="btn btn-secondary">Cancel</button>
<button class="btn btn-danger">Delete</button>
</div>
</div>
</div>
<script>
// Show modal
document.getElementById('confirm-dialog').classList.add('active');
// Hide modal
document.getElementById('confirm-dialog').classList.remove('active');
</script>
```
### Code Blocks
```html
<!-- Inline code -->
<p>Run <code>npm start</code> to begin.</p>
<!-- Code block -->
<pre class="code-block"><code>{
"model": "gpt-4",
"temperature": 0.7,
"max_tokens": 2000
}</code></pre>
```
## Typography System
### Heading Hierarchy
```html
<h1 class="heading-1">Main Title</h1>
<h2 class="heading-2">Section Title</h2>
<h3 class="heading-3">Subsection</h3>
<h4 class="heading-4">Component Title</h4>
```
### Font Families
```html
<!-- Display (Doto - round dots) -->
<h1 style="font-family: var(--font-display)">Dashboard</h1>
<!-- UI text (Geist) -->
<p style="font-family: var(--font-ui)">Interface copy</p>
<!-- Monospace (Geist Mono) -->
<code style="font-family: var(--font-mono)">API_KEY=xyz</code>
<!-- Editorial (Newsreader Italic) - sparingly -->
<p style="font-family: var(--font-editorial); font-style: italic;">
A more personal, conversational tone.
</p>
```
## CSS Custom Properties
### Colors
```css
/* Access theme colors */
Auf GitHub ansehenDiese SKILL.md ist sehr gross, daher zeigt SkillsMP hier nur den ersten Abschnitt. Auf GitHub ansehen
