Menu
Zero-dependency Nothing-inspired UI design system with monochrome styling, dot-matrix typography, and signal-red accents for web interfaces
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
AI-powered fashion visualization and virtual try-on toolkit for consent-based garment editing and creative design workflows
Transform Markdown into paste-ready WeChat Official Account HTML with 6 themes, auto-numbering, keyword highlighting, and compliance validation
Recognizes and warns against piracy/crack tools disguised as legitimate software
Analyze and identify piracy/crack distribution repositories disguised as legitimate software tools
Analyze and understand software activation mechanisms and digital licensing patterns for educational purposes
Unlock and configure Marvelous Designer 13 for 3D garment simulation with API-driven cloth dynamics
| 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"] |
Skill by ara.so — Design Skills collection.
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:
Perfect for creating distinctive, minimal interfaces without framework dependencies.
your-project/
├── css/
│ └── nothing-ui.css
├── js/
│ └── nothing-ui.js
└── fonts/
└── open/
├── doto/
├── geist/
├── geist-mono/
└── newsreader/
<!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>
Set theme on any ancestor element:
<!-- 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:
// Toggle theme
document.body.dataset.theme =
document.body.dataset.theme === 'dark' ? 'light' : 'dark';
<!-- 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>
<!-- 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>
<!-- 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>
<!-- 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>
<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>
<!-- 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>
<!-- 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>
<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>
<!-- 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>
<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>
<!-- 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>
/* Access theme colors */
.custom-element {
background: var(--color-bg);
color: var(--color-text);
border: 1px solid var(--color-border);
}
/* Signal red (use only for critical states) */
.critical {
color: var(--color-accent);
}
/* Available variables:
--color-bg Background
--color-bg-elevated Surface
--color-text Primary text
--color-text-muted Secondary text
--color-border Dividers
--color-accent Signal red (#D71921)
*/
.custom-spacing {
padding: var(--spacing-4); /* 16px */
margin-bottom: var(--spacing-6); /* 24px */
gap: var(--spacing-2); /* 8px */
}
/* Scale:
--spacing-1: 4px
--spacing-2: 8px
--spacing-3: 12px
--spacing-4: 16px
--spacing-5: 20px
--spacing-6: 24px
--spacing-8: 32px
*/
.custom-card {
border-radius: var(--radius-md); /* 8px */
}
/* Scale:
--radius-sm: 4px
--radius-md: 8px
--radius-lg: 12px
--radius-full: 9999px (pills)
*/
<body data-theme="dark">
<div class="app-layout">
<!-- Sidebar -->
<aside class="sidebar">
<div class="sidebar-header">
<h1 class="heading-3">My App</h1>
</div>
<nav class="nav-sidebar">
<a href="#" class="nav-item active">Dashboard</a>
<a href="#" class="nav-item">Agents</a>
<a href="#" class="nav-item">Settings</a>
</nav>
</aside>
<!-- Main content -->
<main class="main-content">
<header class="page-header">
<nav class="breadcrumb">
<a href="#">Home</a>
<span class="breadcrumb-separator">/</span>
<span>Dashboard</span>
</nav>
<div class="search-bar">
<input type="search" class="form-input" placeholder="Search...">
</div>
</header>
<div class="content-area">
<!-- Your content -->
</div>
</main>
</div>
</body>
<div class="card">
<div class="card-header">
<h3>Active Deployments</h3>
<button class="btn btn-primary btn-sm">New Deploy</button>
</div>
<div class="card-body">
<table class="table">
<thead>
<tr>
<th>Service</th>
<th>Status</th>
<th>Version</th>
<th>Updated</th>
</tr>
</thead>
<tbody>
<tr>
<td>api-gateway</td>
<td><span class="badge badge-success">Running</span></td>
<td><code>v2.1.0</code></td>
<td>2 hours ago</td>
</tr>
<tr>
<td>worker-queue</td>
<td><span class="badge badge-warning">Deploying</span></td>
<td><code>v1.8.3</code></td>
<td>5 minutes ago</td>
</tr>
<tr>
<td>analytics</td>
<td><span class="badge badge-danger">Failed</span></td>
<td><code>v3.0.0</code></td>
<td>12 minutes ago</td>
</tr>
</tbody>
</table>
</div>
</div>
<form class="form">
<!-- Valid input -->
<div class="form-group">
<label for="api-key" class="form-label">API Key</label>
<input
type="text"
id="api-key"
class="form-input"
value="sk-..."
readonly
>
<span class="form-help">Key is valid</span>
</div>
<!-- Error state -->
<div class="form-group">
<label for="endpoint" class="form-label">Endpoint URL</label>
<input
type="url"
id="endpoint"
class="form-input is-invalid"
value="invalid-url"
>
<span class="form-error">Must be a valid URL</span>
</div>
<!-- Submit -->
<div class="form-actions">
<button type="submit" class="btn btn-primary">Save Settings</button>
<button type="button" class="btn btn-secondary">Cancel</button>
</div>
</form>
<!-- Button loading -->
<button class="btn btn-primary" disabled>
<span class="spinner"></span>
Deploying...
</button>
<!-- Skeleton loader -->
<div class="card">
<div class="skeleton skeleton-text"></div>
<div class="skeleton skeleton-text" style="width: 70%;"></div>
<div class="skeleton skeleton-rect" style="height: 200px;"></div>
</div>
DO use signal red for:
badge-danger, alert-error)btn-danger)DON'T use signal red for:
<!-- ✅ Correct: Signal for critical action -->
<button class="btn btn-danger">Delete All Data</button>
<span class="badge badge-danger">Requires Approval</span>
<!-- ❌ Incorrect: Primary action should invert -->
<button class="btn btn-danger">Save Changes</button>
Use borders, whitespace, and elevation — never shadows:
/* Elevated surface */
.elevated-card {
background: var(--color-bg-elevated);
border: 1px solid var(--color-border);
padding: var(--spacing-6);
}
/* Frosted glass effect (built-in) */
.glass-panel {
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
}
Ensure the fonts/open/ directory is correctly positioned relative to CSS:
project/
├── css/
│ └── nothing-ui.css ← references ../fonts/open/
└── fonts/
└── open/
├── doto/
├── geist/
└── ...
If fonts are in a different location, update CSS:
@font-face {
font-family: 'Doto';
src: url('/path/to/fonts/open/doto/Doto-Regular.woff2') format('woff2');
}
Ensure data-theme is on an ancestor of all components:
<!-- ✅ Correct -->
<body data-theme="dark">
<div class="card">...</div>
</body>
<!-- ❌ Won't work if card is outside -->
<div data-theme="dark"></div>
<div class="card">...</div>
If everything looks red, you're overusing the signal color. Review:
<!-- ✅ Correct: One signal per view -->
<div class="dashboard">
<div class="card">
<span class="badge badge-success">Active</span>
</div>
<div class="card">
<span class="badge badge-danger">Needs Review</span> ← Only signal
</div>
</div>
<!-- ❌ Too many signals -->
<div class="dashboard">
<button class="btn btn-danger">Save</button>
<div class="alert alert-error">...</div>
<span class="badge badge-danger">Failed</span>
</div>
Extend using CSS custom properties:
.my-custom-widget {
font-family: var(--font-ui);
background: var(--color-bg-elevated);
color: var(--color-text);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
padding: var(--spacing-4);
}
<!-- In your template/layout file -->
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="/assets/css/nothing-ui.css">
</head>
<body data-theme="dark">
{% block content %}{% endblock %}
<script src="/assets/js/nothing-ui.js"></script>
</body>
</html>
// app.js
class App {
constructor() {
this.theme = localStorage.getItem('theme') || 'dark';
this.applyTheme();
}
applyTheme() {
document.body.dataset.theme = this.theme;
}
toggleTheme() {
this.theme = this.theme === 'dark' ? 'light' : 'dark';
localStorage.setItem('theme', this.theme);
this.applyTheme();
}
}
const app = new App();
// Generate table rows dynamically
function renderAgents(agents) {
const tbody = document.querySelector('#agents-table tbody');
tbody.innerHTML = agents.map(agent => `
<tr>
<td>${agent.name}</td>
<td><span class="badge badge-${agent.statusClass}">${agent.status}</span></td>
<td><code>${agent.lastRun}</code></td>
<td>
<button class="btn btn-sm btn-secondary"
onclick="viewLogs('${agent.id}')">
Logs
</button>
</td>
</tr>
`).join('');
}