Agent skill · design visual · aradotso
nothing-design-skill
nothing-design-skill — an agent skill for coding agents.
Why this skill is useful
Generates reusable design rules and specific UI components in the Nothing design language that the AI wouldn't reliably create on its own.
What it needs
Requires git installed locally. About 7k tokens when loaded. Last updated 2026-07-09. 70 stars on the source repository.
What this skill does
sh git clone https://github.com/dominikmartn/nothing-design-skill.git cp -r nothing-design-skill/nothing-design ~/.claude/skills/ css / Dark mode (default) / :root[data-theme="dark"] { --bg-primary: #0A0A0A; --bg-secondary: #111111; --bg-elevated: #1A1A1A; --bg-overlay: #222222; --border-default: #2A2A2A; --border-subtle: #1E1E1E; --border-strong: #3A3A3A; --text-primary: #F5F5F5; --text-secondary: #999999; --text-disabled: #444444; --text-inverse: #0A0A0A; --accent: #F5F5F5; --accent-inverse: #0A0A0A; --signal-error: #FF3B30; --signal-warn: #FF9500; --signal-ok: #30D158; } / Light mode / :root[data-theme="light"] { --bg-primary: #F5F5F5; --bg-secondary: #EBEBEB; --bg-elevated: #FFFFFF; --bg-overlay: #E0E0E0; --border-default: #D0D0D0; --border-subtle: #DEDEDE; --border-strong: #BEBEBE; --text-primary: #0A0A0A; --text-secondary: #666666; --text-disabled: #BBBBBB; --text-inverse: #F5F5F5; --accent: #0A0A0A; --accent-inverse: #F5F5F5; } css / Import / @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Space+Mono:wght@400;700&family=Doto:wght@100;200;300;400&display=swap'); :root { / Display — Doto for numerics, Space Mono fallback / --font-display: 'Doto', 'Space Mono', monospace; --font-body: 'Space Grotesk', system-ui, sans-serif; --font-meta: 'Space Mono', monospace; / Scale / --text-display-xl: 96px; --text-display-lg: 64px; --text-display-md: 48px; --text-display-sm: 32px; --text-body-lg: 18px; --text-body-md: 16px; --text-body-sm: 14px; --text-meta-md: 12px; --text-meta-sm: 10px; / Tracking — tight for display, wide for meta / --tracking-display: -0.04em; --tracking-body: -0.01em; --tracking-meta: 0.08em; / Line height / --leading-display: 0.95; --leading-body: 1.5; --leading-meta: 1.4; } css :root { / 4px base grid / --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; / Radius — sharp by default …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills aradotso/nothing-design-skill