ホーム / 全スキル / デザイン＆モーション / nothing-design
English (EN)简体中文 (ZH)日本語 (JA)
デザイン＆モーション · dominikmartn/nothing-design-skill

nothing-design

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 ネットワーク · ドメインとキー範囲を宣言V1 コミット固定ネットワーク通信Dual-pass Audit
Author dominikmartnGitHub dominikmartn/nothing-design-skill ↗Stars 2783License MIT（仓库根 LICENSE 文件，Copyright (c) 2026 Dominik Martin；gh api spdx MIT）Commit 74affbb786
管理レベルは Skill の能力と推奨統制措置を示すものであり、品質や安全性の認証、利用可否の判定ではありません。使用の可否はユーザーおよび管理者が決定します。Agent 環境によって制約が異なるため、自動保護を仮定しないでください。第三者製 Skill の著作権は原著作者に帰属し、利用リスクは利用者が負います。

1仕組みと動作原理

frontmatter の description 自体がルーティングルールとして機能：ユーザーが Nothing スタイルを指定した場合や明示的に呼び出した場合にのみトリガーし、汎用的な UI タスクへの自動起動を明確に禁止することで、日常のデザイン会話を汚染しない設計になっています。

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.
ここでの処理内容：ホストは description をスキルの検索・トリガー条件として扱い、大文字の NEVER と反例（generic UI or design tasks）によって発動対象を限定しています。同時に allowed-tools には Read/Write/Edit/Glob/Grep のみを指定し、Bash や WebFetch は含めず、マニフェスト層で機能の境界を厳密に制限しています。

主観的な美意識を判定可能な制約へ変換：3層の重要度階層と目を細めるセルフチェックにより、モデル自身が出力前に階層が成立しているか検証することを強制します。

nothing-design/SKILL.md
Every screen has exactly **three layers of importance.** Not two, not five. Three.
ここでの処理内容：「見栄えの良さ」をカウント可能なルール（厳密に3層）へ変換し、実行可能な自己検証アクションを付与しています。同セクションの 'The test: Squint at the screen.' では、目を細めても主次関係が判別できることを求め、できない場合は要素の縮小、減色、または配置変更を義務付けています。これはプロンプト完結型スキルにおいてスタイル再現性を担保する中核手法です。

予算制タイポグラフィ規律：1画面あたり2フォントファミリー／3フォントサイズ／2ウェイトに制限し、「サイズを増やしたい＝スペーシングの問題」という代替手段を示すことで、モデルの自由な拡大解釈を根本から抑制します。

nothing-design/SKILL.md
- **2 font families** (Space Grotesk + Space Mono. Doto only for hero moments.)
原文に隣接する記述：'- **3 font sizes** (one large, one medium, one small)' および '- **2 font weights** (Regular + one other — usually Light or Medium, rarely Bold)'。また、フォントサイズで区別すべきか、太さ／カラーで区別すべきかの判断テーブルも備えています。

固定トークン値定義：カラー hex、フォントサイズ px、トラッキング em、スペーシング px をすべて固定値で明記し、モデルによる任意の値の創作を防ぎ、セッションを跨いだ出力の再現性を保証します。

nothing-design/references/tokens.md
| `--text-display` | `#FFFFFF` | 21:1 | Headlines, hero numbers |
ここでの処理内容：tokens.md の Palette テーブルには Token / Hex / 'Contrast on #000' / Role の4列（例: --text-secondary 6.3:1、--text-disabled 4.0:1）が示され、コントラスト比もトークン選択の根拠としています。これに Dark/Light の対照表が続き、同一トークン名にそれぞれの値をマッピングしています。

コンポーネント仕様書によるトークンの統合：各パーツの背景、境界線、テキスト、角丸、字間、最小高さを CSS レベルでそのまま使えるパラメータとして規定しています。

nothing-design/references/components.md
All buttons: `Space Mono`, 13px, ALL CAPS, letter-spacing 0.06em, padding 12px 24px. Min height 44px.
components.md は全15セクション（cards, buttons, inputs, lists, tables, nav, tags, segmented control, date nav, toggles, segmented progress, charts, widgets, overlays, state patterns）で構成され、すべて直接コード化可能なパラメータ行となっています。第11節は 'The signature data visualization' として位置づけられています。

プラットフォームマッピングによる実装構文の展開：同一トークンセットを、Web 用 CSS カスタムプロパティ、SwiftUI Color エクステンション、デザインツール用 hex 値の3つのターゲットへ変換します。

nothing-design/references/platform-mapping.md
## 3. PAPER (DESIGN TOOL)
platform-mapping.md は3セクションのみで構成されます：HTML/CSS/WEB（:root 変数ブロック）、SWIFTUI / iOS（static let ndBlack = Color(hex: "000000") 等の拡張）、PAPER（デザインツール）。なお、SKILL.md には React/Tailwind セクションの記載があると宣言されていますが、実際には存在しません（verification の不整合を参照）。

アンチパターンリストによる禁止事項でのスタイル制御：グラデーション、シャドウ、スケルトン、トースト、絵文字などを禁止する厳格な Never リストにより、肯定的な指示よりも効果的にモデルの「汎用的な綺麗さ」への偏りを抑止します。

nothing-design/SKILL.md
- No skeleton loading screens. Use `[LOADING...]` text or segmented spinner.
第3節 ANTI-PATTERNS には12項目の禁止事項があり、それぞれに代替案（例: 'No toast popups. Use inline status text: [SAVED], [ERROR: ...]'）が提示されています。代替案は components.md §15 STATE PATTERNS の実装仕様に対応しており、禁止事項と設計図がセットで提供されています。

事前対話を強制するワークフロー：コード生成前に、必要な Google Fonts の事前宣言とライト/ダークモードの選択をユーザーに求めることで、誤った前提を置きがちな2つの重要変数を明示的に確定させます。

nothing-design/SKILL.md
1. **Declare fonts** — tell the user which Google Fonts to load (see `references/tokens.md`)
第4節 WORKFLOW は7ステップ（フォント宣言 → モード確認 → 階層設計 → 構成 → トークン確認 → コンポーネント構築 → プラットフォーム適応）で構成されます。ステップ5、6、7は3つのリファレンス文書をオンデマンドで参照する設計になっており、典型的な段階的開示（Progressive Disclosure）が採用されています。

2コア機能

013段階の視覚的階層構造とセルフチェック判定基準（3階層＋目を細めるテスト＋1画面につき例外は1箇所のみ）
02モノトーン体系下のカラーセマンティクス：グレースケールによる階層表現、装飾ではなく「中断」を示す赤 #D71921、ラベルではなく数値にのみ適用するステータスカラー
03コントラスト比と「モード間不変要素」の定義を含む完全な dark/light デュアルモードトークン表
04タイポグラフィスタックとフォント宣言義務（Doto / Space Grotesk / Space Mono、フォールバックおよび適用制限を含む）
0515種のコンポーネント仕様と特徴的なデータビジュアライゼーション：セグメント化プログレスバー（離散ブロック、直角エンド、数値表示必須）
06データ高密度画面向けの表示形式バリエーション手法（重要度に応じた7種の視覚化パターンの配分）
07セマンティクスを担うスペーシングスケール（4–8 / 16 / 32–48 / 64–96px の4段階の意味付け）とコンテナ戦略の優先順位
08マルチプラットフォーム向け出力（HTML/CSS 変数、SwiftUI Color 拡張、デザインツール Paper）と各プラットフォームの値抽出規則

3外部依存関係

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

4推奨統制措置と判定根拠

安全運用のための推奨統制措置
Agent 向け
アクセス可能ドメインとキー範囲を宣言
管理者向け
最小権限のキー、リクエストログを保持
判定根拠（ファイルパスと抜粋）
  • 网络端点: 外部ネットワークアクセスの宣言: スキルの実行時におけるネットワーク通信はゼロです。リポジトリ全体のトークンスキャン（http/curl/wget/npm/pip）で検出されたのは、README 内の git clone 説明のみです。
監査ノート： 青色（周知で十分）。接触面＝純粋なプロンプト指示＋ローカルでのコード出力のみ。実行時の外部通信なし、認証情報へのアクセスなし、サードパーティ製ツールのインストールもありません。判定根拠：① スクリプト実行なし——リポジトリ内には4つの markdown ファイルと LICENSE、preview.gif のみ。リポジトリ全体のトークンスキャン（http/curl/wget/npx/npm/pip/bash/python/exec/API_KEY/secret/.env/keychain）でヒットした唯一の URL は README 内の git clone 手順のみです。② 認証情報へのアクセスなし——env/token/key 等を参照する指示は含まれていません。③ 実行時の外部通信なし——ソース内に外部エンドポイントは一切存在しません。フォントは生成コード側の製品名として記載されているのみで（platform-mapping.md の 'Load fonts via Google Fonts `<link>` or `@import`.' および tokens.md の Doto/Space Grotesk/Space Mono）、実際に Google Fonts へリクエストが飛ぶかどうかは生成コードを実行するユーザー側に依存し、ドメインもリポジトリ内で検証対象外であるため「検証可能なエンドポイントなし＝黄色に昇格させない」という同種スキル（algorithmic-art / ui-ux-pro-max 等）と同様の基準で青と判定しています。Paper セクションの get_font_family_info はホスト側のデザイン環境内関数であり、allowed-tools 外かつスキルの直接呼び出しではありません。④ ローカル書き込みはホスト側の Write/Edit ツールを介してユーザー指示のパスにのみ行われ、スキルの固定パスへの書き込みや上書き・削除動作はありません。緑ではない理由：frontmatter で Write/Edit 権限（非読み取り専用）が明示的に付与されており、永続化可能な UI コードの出力を目的としているためです。オレンジではない理由：認証情報、Cookie、環境変数へのアクセスがなく、外部パッケージやコンテナイメージのインストールもなく、フォントやアイコン（Lucide/Phosphor）も出力コード側の単なる選定案に留まるためです。

5二重目の独立検証

  • [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，落盘由宿主与用户指令决定。

6結論

  • スタイルを再現可能な仕様へ形式化：すべての主要値が固定数値（hex/px/em/ms）化されており、モデルの感性に頼らず、セッションを跨いでも差分比較可能な一貫した出力を得られます。
  • 禁止事項リストによるモデルのデフォルト美意識の抑制：12の Never 項目（グラデーション/影/ブラー/スケルトン/トースト/絵文字/ゼブラ縞/バネのイージング等の禁止）に代替案が併記されており、スタイルの逸脱余地が極めて小さくなっています。
  • 客観判定可能な階層規律：3段階の重要度＋目を細めるテスト＋1画面につき例外は1回のみという制約により、「主次の明確化」を抽象表現から実行可能な手順へと落とし込んでいます。
  • アクセシビリティ基準を備えた公平なデュアルモード対応：ダーク/ライト両方の値を対比させ、コントラスト比（21:1 / 16.5:1 / 6.3:1 / 4.0:1）を明記しつつ、モード間で共通の不変項も定義しています。
  • 段階的開示（Progressive Disclosure）とマルチプラットフォーム対応：SKILL.md はわずか177行で原則をまとめ、トークン値・コンポーネント・出力言語の詳細は3つのリファレンスから必要に応じて読み出す構成で、HTML/CSS、SwiftUI、Paper の3つの出力先をカバーしています。
    • 最適な用途： 適しているケース：Claude Code を利用して Nothing スタイルやダッシュボード風 UI を迅速に作成したいユーザー（ポートフォリオ、デバイスステータスパネル、高密度データボード、Web および iOS 向けアプリ）、特にセッション間の一貫性を重視するチーム。また、「感性を厳格な仕様に落とし込む」プロンプトエンジニアリングの手本としても有用で、tokens/components/platform-mapping の3層構成は独自のデザインシステム構築にそのまま流用できます。導入は nothing-design/ ディレクトリを ~/.claude/skills/ にコピーするだけで完了します。
    不向きな用途： 適していないケース：① 多彩なカラー、イラスト、柔らかなドロップシャドウ、一般的なモダン SaaS 風の見た目を必要とするプロジェクト（本スキルはシャドウ、グラデーション、絵文字を完全に禁止します）。② モデルによる自動呼び出しを期待する環境（description で汎用 UI タスクに対する NEVER trigger automatically が明記されており、/nothing-design や 'Nothing style' による明示的な指定が必須です）。③ React/Tailwind 専用のマッピングセクションを期待するチーム（platform-mapping.md には実際には該当セクションが存在しません。リスク事項1を参照）。④ オフラインまたは社内閉塞環境（フォントが Google Fonts に依存しているため、アクセスできないと視覚的再現性が損なわれます）。⑤ スキル自体にスクリプトやトークン適合性チェッカーが含まれることを期待する自動化パイプライン（コード実行機構やバリデータは含まれていません）。
    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
    Agent はこの JSON ガイドから自動的にダウンロードして検証します。
    ② Upstream GitHub
    GitHub Repo ↗
    Pinned to commit 74affbb786.