デザイン&モーション · nexu-io/html-anything

web-proto-brutalist

スイス・インダストリアルプリント風: 単字グロテスク、巨大数字、ASCII装飾

L1 基本 · ソース登録のみV1 コミット固定Dual-pass Audit
Author nexu-ioGitHub nexu-io/html-anything ↗Stars 8827License Apache-2.0(仓库根 LICENSE 文件;GitHub API license.spdx_id = Apache-2.0)Commit 553ed98c28
管理レベルは Skill の能力と推奨統制措置を示すものであり、品質や安全性の認証、利用可否の判定ではありません。使用の可否はユーザーおよび管理者が決定します。Agent 環境によって制約が異なるため、自動保護を仮定しないでください。第三者製 Skill の著作権は原著作者に帰属し、利用リスクは利用者が負います。

1仕組みと動作原理

本skillは実行可能プログラムではなく、html-anythingの「テンプレート」です。1つのディレクトリ(SKILL.md + example.html[/example.md])として存在し、実行時にloader.tsがディスクをスキャンして読み込みます。新規テンプレートの追加=新規ディレクトリの追加であり、TypeScriptの修正は不要です。

next/src/lib/templates/loader.ts
Adding a template = adding a folder. No TS code change required; the API
SKILLS_DIRはアプリケーションcwd直下のsrc/lib/templates/skillsに固定されています。listSkills()が第1階層のサブディレクトリを走査し、isValidBundledIdでフィルタリングした上でディレクトリごとにSKILL.mdを読み取り、frontmatterをパースするため、「セレクター用メタデータ」と「生成用プロンプト本文」は同一ファイルから生成されます。

frontmatterはセレクター/API向けのメタデータ(zh_name/en_name/emoji/description/category/scenario/aspect_hint/featured/recommended/tags)であり、fmToMeta()によってSkillMetaにマッピングされます。frontmatter以降の本文のみがモデルへの仕様書となります。

next/src/lib/templates/loader.ts
zhName: fm.zh_name ?? fm.name ?? id,
idはディレクトリ名から取得されます。exampleメタデータ(example_id/name/format/tagline/desc/source_url)は、ディレクトリにexample.md/htmlが存在する場合にのみSkillExampleMetaとして生成され、bodyは意図的に一覧APIから除外されます(コメント: Body is excluded so we can return the entire registry in one cheap fetch)。

生成時、本テンプレート本文はプロンプト本文として扱われます。/api/convertがassemblePrompt()を用いて「グローバルデザイン指示+本テンプレート本文+ユーザーコンテンツ」を1本のプロンプトに結合し、ホストのローカルagent CLIに渡し、HTMLをstdoutストリーミング経由でキャプチャします。

next/src/app/api/convert/route.ts
prompt = assemblePrompt({ body: skill.body, content, format });
同一ルートにはeditFromHtml/editFromContentによる「差分最小化編集」の分岐も存在します。このパイプラインにおいてテンプレート本文は単なる文字列であり、評価も実行もされません。

テンプレート本文の前にはグローバル共通指示(SHARED_DESIGN_DIRECTIVES)が前置され、技術およびコンテンツの規律が各テンプレートの前に統一して付与されます。サンプルHTMLに広く見られるCDNやWebフォントの外部リンクはこれに由来します(ホストシェルによる注入であり、テンプレート自体の要求ではありません)。

next/src/lib/templates/shared.ts
通过 CDN 引入 Tailwind v3 Play (https://cdn.tailwindcss.com) 与所需的 Google Fonts。
テンプレート本文はスタイル、レイアウト、コンポーネントのみを担当し、これらの必須要件を重複して記述しません。安全性格付けはテンプレート自身のディレクトリのみを対象とし、当該エンドポイントはホストシェルの挙動としてsecurity.reasonに明記しています。

生成物はstdoutテキストとして返却されます。グローバル指示によりエージェントによるファイルシステム操作は明示的に禁止されており、ディスクへの保存はフロントエンドが担当します。そのため、テンプレートディレクトリにはスクリプトもディスク書き込み能力も存在しません。

next/src/lib/templates/shared.ts
**禁止使用 Write / Edit / MultiEdit / Bash / Create / 任何文件系统工具**。
原文には「HTMLをいかなる.htmlファイルにも書き込んではならない……フロントエンドがstdoutテキストを直接キャプチャし、ファイルのディスク保存はフロントエンドが担当する」と指定されています。生成物は最終的にフロントエンド側でタスク履歴に記録され、エクスポートされます。

example.htmlはパッケージに同梱された事前レンダリング済みのサンプルです。/api/templates/<id>/previewはiframe(セレクター内のインラインプレビュー)向けにtext/html形式のまま返却し、/api/templates/<id>/exampleはexample.mdとexample.htmlをセットで返却します。

next/src/app/api/templates/[id]/preview/route.ts
return new Response(skill.exampleHtml, {
サンプルはプレビューおよびドキュメント用途に限定され、生成プロンプトには関与しません(生成にはSKILL.md本文のみを使用)。したがって、サンプルの外部リンクがテンプレート自身の能力境界に影響を与えることはありません。

本文ではスタイルを検証可能な4つの要素として定義しています。ニュースプリント風キャンバス+ヘアライン格子グリッド区切り、単体ブラックグロテスク見出し、ビューポートからはみ出す巨大数字、ハザードレッド強調色+ASCII装飾です。

next/src/lib/templates/skills/web-proto-brutalist/SKILL.md
- Newsprint canvas + hairline grid dividers
箇条書きの続きには「- Monolithic black grotesque 見出し、viewport-bleeding 巨大数字」「- Hazard-red accent + ASCII装飾 (┌─┘ 等)」「- Sectionsは極限までシンプルな数字ナンバリング」とあり、4項目すべてが形容詞ではなくタイポグラフィレベルの制約となっています。

サンプルではCSS変数を用いてスタイルを一連のトークンとして固定化しています: --paper #F4F4F0(ニュースプリント)、--hazard #E61919、display用にArchivo Black、meta用にJetBrains Mono。

next/src/lib/templates/skills/web-proto-brutalist/example.html
--hazard: #E61919;
「スイス・インダストリアルプリント」の実装可能な変換形であり、紙感のあるニュートラルカラー+単一の警告色+2つの極端なウェイト対比で構成されています。

サンプルのハザードカラーは装飾的なアクセントではなく、構造的な区切り(hr.hazardやmeta-rowの1px上ボーダー)として使用されています。

next/src/lib/templates/skills/web-proto-brutalist/example.html
hr.hazard { border: 0; border-top: 1px solid var(--hazard); margin: 0; }
見出し内の強調も同一の変数(.red { color: var(--hazard); })を使用しており、「強調色は1色のみ」という規律を厳守しています。

サンプルでは本文で例示された罫線文字(┌─┘)の代わりに、角括弧フレーム(.ascii-frame::before content: '[' / ::after content: ']')を用いてASCIIのニュアンスを持つ装飾を実現しています。

next/src/lib/templates/skills/web-proto-brutalist/example.html
.ascii-frame::before { content: '['; color: var(--hazard); }
本文には「ASCII装飾 (┌─┘ 等)」と記載されていますが、サンプルでは [ … ] の角括弧+グリッド線として実装されています。同等のセマンティクスを持つ文字セット違いの実装バリエーションであり、確認表に記録済みです。

CLI側にはキーワードによる直接マッチングルートが存在します。skills-matcher.tsがユーザーコンテンツ内のキーワードを本テンプレートidへ直接マッピングし、ヒットした場合はconfidence=ヒット数×2+3を付与します。しきい値3に達するとローカルルールが適用され、モデルによるテンプレート選択は行われません。

cli/src/skills-matcher.ts
[["brutalist", "工业", "粗野", "swiss", "industrial print"], "web-proto-brutalist"],
brutalist、工业、粗野、swiss、industrial printが本テンプレートに直接マッチし、web-proto-softおよびweb-proto-editorialとdesignシナリオの重み付けを共有します。

CLIのフォールバックマッチングで使用されるしきい値定数: コンテンツの長さが60文字を超えている場合のみAI要約マッチングが有効化され、強シグナルのしきい値は3です。

cli/src/skills-matcher.ts
const MIN_CONTENT_LENGTH_FOR_AI = 60;
さらにSCENARIO_SIGNALSによるシナリオ別のキーワード重み付けや、tags/zhName/descriptionを用いたfallbackMatchのスコアリングがあり、両レイヤーとも不一致の場合にのみエージェントを呼び出して要約マッチングを実行します。

ホストシェルはsandbox="allow-scripts allow-same-origin"のiframeを用いてサンプルや生成物をレンダリングします(スクリプト実行および同一オリジンアクセスを許可)。これは製品シェル側の設計判断であり、リスクとして記載されていますが、本skillの格付けには影響しません。

next/src/components/template-picker.tsx
sandbox="allow-scripts allow-same-origin"
preview-pane.tsxやdeck-viewer.tsxも同様の構成です。サンプルHTML内のインラインJSはブラウザでのプレビュー時のみ実行され、skill自体はいかなるスクリプトも実行しません。

2コア機能

01ニュースプリント風キャンバス + ヘアライン格子グリッド区切り
02単体ブラックグロテスク見出し + ビューポートからはみ出す巨大数字
03ハザードレッド強調色(構造的利用)
04ASCIIニュアンスの装飾フレーム
05Sectionの極小数字ナンバリング
06等幅フォントによるmeta行(8chラベル列)

3外部依存関係

KindDependency / Endpoint
networkGoogle Fonts(Archivo Black / Archivo / JetBrains Mono)
networkGoogle Fonts 静态资源域(preconnect)

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

安全運用のための推奨統制措置
Agent 向け
自動ロード可能
管理者向け
ソースとバージョンの記録
判定根拠(ファイルパスと抜粋)
  • SKILL.md: 純粋なプロンプト指示およびルールテキストのみで構成され、スクリプト実行や外部影響は一切なし
監査ノート: 評価対象=本skillディレクトリ(next/src/lib/templates/skills/web-proto-brutalist/)。ファイルごとの検証結果: スクリプトゼロ、クレデンシャル読み取りゼロ、ディスク書き込みゼロ。ディレクトリ内に登場するエンドポイントはGoogle Fonts(Archivo Black / Archivo / JetBrains Mono)およびGoogle Fontsの静的リソースドメイン(preconnect)に限定されており、これらはすべて「生成物サンプル」であるexample.html内にのみ存在します。SKILL.md本文はレイアウト、スタイル、フォントファミリー名を規定しているだけであり、実行時の外部APIは一切指定していないため、純粋な指示テンプレート=greenと判定されます。ホスト側の補足(格付け対象外): html-anything製品シェルはassemblePrompt()を介して本文をプロンプトに組み込んでローカルagent CLIを起動し、cdn.tailwindcss.comとGoogle Fontsの要件を注入します(next/src/lib/templates/shared.ts)。プレビュー用iframeにはsandbox="allow-scripts allow-same-origin"が適用されています(next/src/components/template-picker.tsx)。

5二重目の独立検証

  • [ok] skill 目录文件清单 — find 得 SKILL.md + example.html,无 scripts/references。
  • [ok] 无脚本执行 — grep -c "<script" example.html = 0。
  • [ok] 外部端点仅字体 — example.html 仅 fonts.googleapis.com css2 与 fonts.gstatic.com preconnect;SKILL.md 正文无 URL。
  • [discrepancy] ASCII 装饰的具体字符 — SKILL.md 写「ASCII 装饰 (┌─┘ 等)」,示例无 ┌/─/┘ 命中,改用 .ascii-frame 的 [ ] 方括号;属实现变体,语义(机械式框架标记)一致。
  • [ok] hazard 色是否真结构性使用 — --hazard 用于 hr.hazard 分隔线、.brand sup、.meta-row b、.ascii-frame 伪元素、.abstract 标签等结构位置,非纯点缀。
  • [ok] CLI 匹配器路由 — cli/src/skills-matcher.ts 存在 [["brutalist", "工业", "粗野", "swiss", "industrial print"], "web-proto-brutalist"] 行。
  • [ok] 判级 green 自证 — 目录零脚本文件、零凭证、零写盘;正文无运行时接口,端点仅见示例 → green。
  • [ok] official_desc 逐字 — meta.official_desc 取自 frontmatter description 原文「Swiss industrial-print 风: 单字 grotesque、巨数字、ASCII 装饰」。

6結論

  • トークン化されたスタイルで再利用コストが低い: レイアウト構造を保ったまま、--hazardや--displayを変更するだけでテーマ変更が可能
  • 優れた強調色規律: ページ全体でハザードレッドを1色のみとし、構造線と強調文字に限定して使用
  • スクリプトフリーかつ完全静的: バッチスクリーンショットやエクスポートの負荷が最小限
  • 徹底されたタイポグラフィのディテール: 8chグリッドに揃えたmeta行、等幅大文字の小サイズフォントなど、明確なインダストリアルプリントの質感を再現
  • 最適な用途: 独自の世界観を持つ製品公式サイト、ポートフォリオ、イベントLP、または「権威性があり、迎合しない」雰囲気が求められるブランドページに最適です。また、3つのスタイルプロトタイプにおける対比用(editorial/softと並列提示)としても適しています。
    不向きな用途: 親しみやすさを最優先とする一般消費者向け製品ページ、子供・教育系、柔らかいグラデーションや角丸を必要とする用途には不向きです。また、カードのドロップシャドウで情報階層を表現する高密度なダッシュボードには適していません。
    Install Agent-Ready
    ① Verified Mirror 2026-09-15
    Option A · Direct DownloadDownload web-proto-brutalist.tar.gz
    sha256: aa6036af392f1c58…
    Option B · Copy Guide for Agent
    install.json
    Agent はこの JSON ガイドから自動的にダウンロードして検証します。
    ② Upstream GitHub
    GitHub Repo ↗
    Pinned to commit 553ed98c28.