Design & Motion · dominikmartn/nothing-design-skill

nothing-design

Name: nothing-design
Author: dominikmartn/nothing-design-skill

This skill should be used when the user explicitly says "Nothing style", "Nothing design", "/nothing-design", or directly asks to use/apply the Nothing design system. NEVER trigger automatically for generic UI or design tasks.

L3 Networked · Declare domain & key scopeV1 Commit-PinnedNetwork AccessDual-pass Audit

Control levels describe skill capabilities and suggested control measures; they do not represent quality or safety certifications, nor do they dictate usability. Usage decisions rest entirely with users and administrators. Different agent hosts apply varying constraints; do not assume hosts provide automatic protection. Third-party skill copyrights belong to their original authors. Use at your own risk.

1How It Works & Mechanism

The frontmatter description serves directly as the routing rule: it activates strictly when the user specifically mentions Nothing style or calls it explicitly, while explicitly forbidding automatic triggering on generic UI tasks—this prevents it from polluting daily design sessions.

nothing-design/SKILL.md

description: This skill should be used when the user explicitly says "Nothing style", "Nothing design", "/nothing-design", or directly asks to use/apply the Nothing design system. NEVER trigger automatically for generic UI or design tasks.

What is happening here: The host uses the description as the basis for skill retrieval and invocation, narrowing the trigger surface using uppercase NEVER along with negative examples (generic UI or design tasks); meanwhile, allowed-tools is restricted strictly to Read/Write/Edit/Glob/Grep without Bash or WebFetch, nailing down the capability boundaries directly at the manifest layer.

Translating subjective aesthetics into testable hard constraints: three levels of visual importance plus a squint self-test, forcing the model to verify whether the hierarchy holds before producing output.

nothing-design/SKILL.md

Every screen has exactly **three layers of importance.** Not two, not five. Three.

What is happening here: Transforming 'looking good' into countable rules (exactly three levels) paired with an actionable self-test—the same section requires 'The test: Squint at the screen.', dictating that if primary versus secondary cannot be distinguished while squinting, an element must be shrunk, dimmed, or relocated. This is the core technique of a pure-prompt skill for reproducible styling.

Budget-based typographic discipline: limits per screen to 2 font families / 3 font sizes / 2 font weights, providing an alternative path where 'wanting to increase font size = spacing problem', curbing model improvisation at its source.

nothing-design/SKILL.md

- **2 font families** (Space Grotesk + Space Mono. Doto only for hero moments.)

Immediately adjacent to the original text: '- **3 font sizes** (one large, one medium, one small)' and '- **2 font weights** (Regular + one other — usually Light or Medium, rarely Bold)', accompanied by a decision table on whether to differentiate using font size versus weight/color.

Hardcoded token values: hex colors, px font scales, em tracking, and px spacing are all strictly specified so the model never invents arbitrary values, ensuring reproducible and cross-session consistent output.

nothing-design/references/tokens.md

| `--text-display` | `#FFFFFF` | 21:1 | Headlines, hero numbers |

What is happening here: The Palette table in tokens.md provides four columns: Token, Hex, 'Contrast on #000', and Role (e.g., --text-secondary 6.3:1, --text-disabled 4.0:1), turning contrast ratios into a selection criterion; this is followed by a dual Dark/Light comparison table sharing the same token names with mapped values.

Component specification tables assemble tokens into ready-to-copy dimensions: providing background, border, text, radius, letter-spacing, and min-height for each component down to the CSS level.

nothing-design/references/components.md

All buttons: `Space Mono`, 13px, ALL CAPS, letter-spacing 0.06em, padding 12px 24px. Min height 44px.

components.md contains 15 sections (cards, buttons, inputs, lists, tables, nav, tags, segmented control, date nav, toggles, segmented progress, charts, widgets, overlays, state patterns), each containing directly translatable parameter lines; section 11 is labeled 'The signature data visualization'.

Platform mapping translates the same token set into implementation syntaxes for three target outputs: web CSS custom properties, SwiftUI Color extensions, and direct hex codes for design tools.

nothing-design/references/platform-mapping.md

## 3. PAPER (DESIGN TOOL)

platform-mapping.md contains only three sections: HTML/CSS/WEB (providing the full :root variable block), SWIFTUI / iOS (providing extensions such as static let ndBlack = Color(hex: "000000")), and PAPER (design tool). Note that while SKILL.md claims to have a React/Tailwind section, it does not actually exist—see the discrepancy in verification.

Anti-pattern list constrains style via strict prohibitions: hard 'Never' rules eliminating gradients, drop shadows, skeletons, toasts, and emojis, suppressing the model's default 'generic aesthetic' tendencies far better than positive descriptions.

nothing-design/SKILL.md

- No skeleton loading screens. Use `[LOADING...]` text or segmented spinner.

Section 3 ANTI-PATTERNS includes 12 prohibitions, each providing an alternative (e.g., 'No toast popups. Use inline status text: [SAVED], [ERROR: ...]'); these alternatives match implementation specs in components.md §15 STATE PATTERNS, pairing prohibitions directly with blueprints.

Workflow enforces front-loaded interactions: requiring explicit declaration of necessary Google Fonts and asking the user to choose light/dark mode before writing code—turning the two most commonly misassumed variables into explicit confirmations.

nothing-design/SKILL.md

1. **Declare fonts** — tell the user which Google Fonts to load (see `references/tokens.md`)

Section 4 WORKFLOW contains 7 steps (declare fonts -> ask mode -> sketch hierarchy -> compose -> look up tokens -> assemble components -> adapt to platform); steps 5, 6, and 7 designate the three reference files as on-demand lookup targets, representing a classic progressive disclosure design.

2Core Capabilities

01Three-tier visual hierarchy with self-testable criteria (3 levels + squint test + only one exception allowed per screen)

02Monochrome color semantics: grayscale represents hierarchy, red #D71921 indicates 'interruption' rather than decoration, and status colors apply only to values instead of labels

03Comprehensive dual dark/light mode token tables including contrast ratio columns and cross-mode invariant definitions

04Font stack and mandatory font declaration obligations (Doto / Space Grotesk / Space Mono, including fallbacks and boundary rules)

0515 component specifications and signature data visualization: segmented progress bars (discrete blocks, square ends, mandatory numeric readouts)

06Pattern diversification recipes for data-dense screens (7 visualization forms allocated by priority)

07Spacing scale carrying semantic hierarchy (meanings across 4 tiers: 4–8 / 16 / 32–48 / 64–96px) and container strategy priorities

08Multi-platform production outputs (HTML/CSS variables, SwiftUI Color extensions, design tool Paper) specifying value extraction rules per platform

3External Dependencies

Kind	Dependency / Endpoint
network	Google Fonts（产出物字体源：Doto / Space Grotesk / Space Mono）
api	get_font_family_info（Paper 设计环境内的字体信息工具函数；非系统 CLI、非网络 API，需宿主已接入该设计工具）

4Recommended Governance & Evidence

Suggested Controls for Safe Operation

For Agent Runtime

Declare allowed domains and key scope

For Administrators

Least privilege keys, retain request logs

Evidence & Triggers (File Paths & Excerpts)

网络端点: Declared external network access: The skill itself performs zero network calls during runtime: full-repo token scans (http/curl/wget/npm/pip) match only the git clone instruction in README.

Audit Notes: Blue: informational / low-risk. Attack surface consists purely of text instructions and local code artifact writes; zero runtime network access, zero credentials, zero third-party package installations. Rationale: 1) No script execution—the repo contains only 4 markdown files + LICENSE + preview.gif; full-repo token scans (http/curl/wget/npx/npm/pip/bash/python/exec/API_KEY/secret/.env/keychain) yielded zero hits, with the only URL being git clone instructions in README; 2) No credential access—no instructions accessing env/token/key; 3) No outbound runtime network traffic with no endpoints present in source: fonts appear purely as suggested product names on the output side (platform-mapping.md specifies 'Load fonts via Google Fonts `<link>` or `@import`.' and tokens.md specifies Doto/Space Grotesk/Space Mono); whether network requests are actually made to Google Fonts depends entirely on the user running the generated output, and domains are not verifiable within the repo, matching the convention of 'no verifiable endpoints does not escalate to Yellow' (consistent with algorithmic-art / ui-ux-pro-max in the same registry, where hardcoded CDN endpoints in templates remained Blue); get_font_family_info in the Paper section is a host-environment design tool function not included in allowed-tools, not constituting a skill call; 4) Local disk writes occur strictly via host Write/Edit tools at user-directed paths, with no hardcoded write destinations, overwrites, or deletions. Not green because frontmatter explicitly requests Write/Edit permissions (not purely read-only) to write UI code to disk. Not orange because it involves no credentials/cookies/env vars and installs no third-party packages or images, treating fonts and icon sets (Lucide/Phosphor) merely as output-side recommendations.

5Second-Pass Verification

[ok] skill 目录定位（任务提示 nothing-design/SKILL.md） — repo 根下仅一个 skill 目录 nothing-design/，内含 SKILL.md 与 references/；frontmatter name 为 nothing-design。故 skill.path = 'nothing-design'。
[discrepancy] README/SKILL.md 宣称的 React/Tailwind 输出映射 — README.md 'Output as HTML/CSS, SwiftUI, or React/Tailwind'（另有表格行 '| `references/platform-mapping.md` | CSS, SwiftUI, React output mappings |'）与 SKILL.md §5 'HTML/CSS, SwiftUI, React/Tailwind, Paper output conventions' 都宣称有 React/Tailwind 映射，但 platform-mapping.md 实际只有 '## 1. HTML / CSS / WEB'、'## 2. SWIFTUI / iOS'、'## 3. PAPER (DESIGN TOOL)' 三节；全仓 grep 'react|tailwind'（忽略大小写）仅 SKILL.md 该行一处命中。属文档夸大/滞后：按 README 期待 React/Tailwind 专节会落空，模型只能自行把 CSS 变量推广到 Tailwind。
[discrepancy] SKILL.md 声称 tokens.md 覆盖 'grid' — SKILL.md §5 'spacing scale, grid, motion, iconography, dot-matrix motif'；tokens.md 实际章节为 1 TYPOGRAPHY / 2 COLOR SYSTEM / 3 SPACING / 4 MOTION & INTERACTION / 5 ICONOGRAPHY / 6 DOT-MATRIX MOTIF，无独立 GRID 小节（'grid' 仅出现在 §6 的 dot-grid CSS 与 'uniform 12–16px grid' 描述）。属措辞夸大，非缺料（点阵网格确有给出）。
[ok] 无脚本 / 无 CLI / 无网络端点（skill 自身） — 7 个文件全为 markdown/文本 + 一个 GIF；token 扫描无 bash/python/npx/curl/wget 命中，无任何端点域名（Google Fonts 亦只以产品名出现）。SKILL.md 的代码块只是 CSS/Swift 片段与目录树，非可执行脚本。
[ok] Google Fonts 依赖是否真实存在 — references/platform-mapping.md 'Load fonts via Google Fonts `<link>` or `@import`.' 逐字存在；SKILL.md 两处（正文开头注释与工作流第 1 步）要求先声明并加载 Google Fonts，方向一致。该网络行为发生在产出物运行期，非 skill 执行期。
[ok] Paper 的 get_font_family_info 是否构成第三方工具依赖 — references/platform-mapping.md §3 逐字存在该调用指示，但 SKILL.md frontmatter allowed-tools 仅 [Read, Write, Edit, Glob, Grep]，未授予该工具，故为『若宿主具备 Paper 能力则可走』的可选路径，非硬依赖。
[ok] Lucide / Phosphor 图标库是否应计入外部依赖 — tokens.md §5 'Preferred: Lucide (thin), Phosphor (thin). Never filled or multi-color.' 只是产出侧图标选型建议，仓库未安装、未拉取、无引用端点，故不计入 external_deps，改记在 traits/risks。
[ok] 文件写入面 — 指令文本中无写文件路径、无 create/save/append/mkdir/delete 类指令（grep 仅命中文案 `[SAVED]` 与 allowed-tools 行）；写权限仅来自 frontmatter allowed-tools 的 Write/Edit，落盘由宿主与用户指令决定。

6Verdict & Scenarios

Turns aesthetic style into reproducible specifications: all key values are fixed numbers (hex/px/em/ms), making outputs diffable and consistent across sessions without relying on model taste.

Strict prohibitions override default model aesthetics: 12 Never rules (no gradients/shadows/blur/skeletons/toasts/emojis/zebra stripes/spring easings...) each paired with concrete alternatives, leaving minimal room for stylistic drift.

Verifiable visual hierarchy discipline: three levels of importance + squint test + only one exception per screen, transforming 'clear hierarchy' from a vague adjective into concrete operational steps.

Dual modes treated equally with accessibility backing: dark/light values are listed side-by-side with contrast ratios (21:1 / 16.5:1 / 6.3:1 / 4.0:1) while identifying cross-mode invariants.

Progressive disclosure plus multi-platform delivery: SKILL.md outlines methodology in just 177 lines, splitting tokens, components, and target syntaxes into three on-demand references across HTML/CSS, SwiftUI, and Paper.

Best for: Ideal for: users needing to quickly generate Nothing-style or dashboard-like UIs within Claude Code (personal portfolio pages, device status panels, data-dense dashboards, web and iOS targets), especially teams seeking cross-session consistency; also serves as an exemplary prompt-engineering reference for turning subjective aesthetics into rigid specifications—its three-tier separation of tokens/components/platform-mapping can be adapted directly into custom design systems. Installation requires merely copying the nothing-design/ directory into ~/.claude/skills/.

Not for: Not suitable for: 1) projects requiring rich colors, illustrations, soft drop shadows, or generic modern SaaS aesthetics—this skill explicitly bans shadows, gradients, and emojis; 2) scenarios expecting automatic invocation by the model—the description explicitly states NEVER trigger automatically for generic UI or design tasks, requiring the user to explicitly call /nothing-design or say 'Nothing style'; 3) teams expecting a dedicated React/Tailwind mapping section—platform-mapping.md lacks this section in reality (see risk item 1); 4) offline or air-gapped environments—typography relies on Google Fonts, without which the visual tone cannot be reproduced; 5) engineering pipelines expecting built-in scripts or automatic token compliance linters—it contains zero executable code and no linters.

Install Agent-Ready

① Verified Mirror 2026-09-15

Option A · Direct DownloadDownload nothing-design.tar.gz

sha256: 4bf28be565504832…

Option B · Copy Guide for Agent

install.json

Agents automatically download and verify mirrors from this JSON guide.

② Upstream GitHub

GitHub Repo ↗

Pinned to commit 74affbb786.