1仕組みと動作原理
純粋なプロンプトプロトコルファイル(スクリプトなし、85行の単一ファイル)。『Premium Utilitarian Minimalism & Editorial UI』と名付けられ、暖色系モノクロ、エディトリアル階層、bento、ウルトラフラット、ミュートパステルという基本方針を冒頭で提示。
This protocol strictly enforces a high-contrast warm monochrome palette, bespoke typographic hierarchies, meticulous structural macro-whitespace, bento-grid layouts, and an ultra-flat component architecture with deliberate muted pastel accents.
ミニマリズムを損なうデフォルト値をすべて禁止するネガティブ制約リスト:Inter/Roboto、Lucide/Feather/Heroicons、Tailwindの重いシャドウ、広面積の有色背景、グラデーション/ネオン/3Dガラス、大きなコンテナの角丸カプセル、絵文字、プレースホルダー名、AI定型表現。
DO NOT use gradients, neon colors, or 3D glassmorphism (beyond subtle navbar blurs).
3系統のタイポグラフィシステム(UI sans / エディトリアル serif / 等幅 meta)に、フォントファミリー、字間、行高パラメータを個別に指定し、極端なフォントコントラストでエディトリアル感を創出。
Editorial Serif (Hero Headings & Quotes): Target: `font-family: 'Lyon Text', 'Newsreader', 'Playfair Display', 'Instrument Serif', serif`.
数値で厳密に固定されたカラーパレット:暖色系モノクロ(ホワイト/ボーンホワイト/チャコール)+ 構造線 #EAEAEA + 4色のウォッシュパステルアクセント(それぞれ前景テキスト色付き)。色を希少リソースとしてセマンティクスのみに使用。
Canvas / Background: Pure White `#FFFFFF` or Warm Bone/Off-White `#F7F6F3` / `#FBFBFA`.
コンポーネント仕様を個別かつ厳格に定義:1px #EAEAEA ボーダー+角丸上限8/12pxのbentoカード、#111 塗りつぶし・角丸4-6px・シャドウなしのプライマリボタン、枠線なしアコーディオン、kbdキートップ、疑似macOSウィンドウ。
Cards must have exactly `border: 1px solid #EAEAEA`.
「見えない洗練」を追求したモーション:600msのフェードイン登場、カードの 0→2px 8px 超ソフトシャドウ遷移、スタッガーカスケード、低速の環境光ブロップ(不透明度≤0.04、任意)。すべて transform/opacity-only かつ IntersectionObserver に限定。
Scroll Entry: Elements fade in gently as they enter the viewport. Use `translateY(12px)` + `opacity: 0` resolving over `600ms` with `cubic-bezier(0.16, 1, 0.3, 1)`. Use `IntersectionObserver`, never `window.addEventListener('scroll')`.
ホワイトスペース、幅の制約、タイポグラフィとパレット、ボーダー、登場モーション、視覚的奥行きを順次適用し、最終的に「手動調整不要」な成果物を求める7段階の実行プロトコル。
Provide code that reflects this high-end, uncluttered, editorial aesthetic natively without requiring manual adjustments.
2コア機能
3外部依存関係
| Kind | Dependency / Endpoint |
|---|---|
| network | picsum.photos(占位图服务) |
| package | Phosphor Icons / Radix UI Icons |
4推奨統制措置と判定根拠
- SKILL.md: スクリプト実行や外部への影響を伴わない、純粋なプロンプト指示およびルールテキスト
5二重目の独立検証
- [ok] 目录资产面(含隐藏/未跟踪文件) — git ls-files + ls -A 双查:该 skill 目录仅 1 个文件 SKILL.md,无 scripts/references/模板/数据/隐藏文件,无可执行代码。
- [ok] 执行类 token 扫描 — 逐文件扫描 bash/exec/child_process/curl/wget/fetch/axios/process.env/API_KEY/.env/fs./writeFile/.github 等零命中(brutalist 一处 'sans-serifs.' 单词结尾 fs. 为误报,人工复核排除)。
- [ok] 引文逐条 grep -F 字节复核 — 本 JSON 所用全部 quote 均以 grep -F 在 pin commit 工作树中逐条验证存在,无 paraphrase 冒充。
- [ok] 元数据与 pin 核对 — 本地 git HEAD == 任务 pin ccbc15639c97057cbfcf32ecebc38ef716e4bb37(README 显示该提交为 docs/sponsor 修订 #102,2026-08-24);GitHub API 实查 stars=85698、MIT、pushed_at=2026-08-24T15:23:56Z。frontmatter name 与任务给定名一致。
- [ok] 功能声明 vs 实际能力夸大检查 — description 声称均由 SKILL.md 正文纯 prompt 机制兑现,无脚本可调用、无越界承诺(详见本文件 how_it_works 引文)。
- [ok] 『No gradients』vs Section 6/7 的 radial-gradient 是否自相矛盾 — 细读后判定为措辞张力而非矛盾:禁令对象是渐变填充/霓虹色带('DO NOT use gradients, neon colors, or 3D glassmorphism'),而 radial light spots 限 opacity 0.03、ambient blob 限 0.02-0.04 且须 pointer-events-none 固定层——属超低透明氛围例外,语义上不与『视觉渐变』冲突,但模型可能误读,建议页面标注此细微差别。
- [ok] 『no heavy shadows』与 hover 阴影建议是否矛盾 — Section 2 禁的是 Tailwind 默认重阴影(shadow-md/lg/xl);Section 7 hover 用 0 2px 8px rgba(0,0,0,0.04) 超柔阴影——低透明度自洽,无矛盾。
- [ok] bento 网格『flat』与 8/12px 圆角上限的执行一致性 — 正文对所有大容器统一 8/12px 上限并禁 rounded-full(Section 2),唯 tags/badges 用 9999px 药丸(Section 5 Tags),两级圆角策略明确无冲突。
6結論
1878e24d26888079…