vibe-nothing-ui-design
Zero-dependency Nothing-inspired UI design system with monochrome styling, dot-matrix typography, and signal-red accents for web interfaces
来源信息
- 仓库
- reason-machines/design-skills
- 最近来源活动
- 2026年6月19日 12:46
- 检测到的 SKILL.md 语言
- 英语
- 星标
- 4
- 分支
- 0
安装方式
默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。
检查来源文件
决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。
正在显示 SKILL.md
SKILL.md
来源说明 · 只读预览- 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 */
在 GitHub 查看这个 SKILL.md 很大，SkillsMP 这里只预览前一段内容。 在 GitHub 查看
