Add analysis site scaffold: shared CSS and index page

Leak-document aesthetic (dark bg, monospace headings, amber accent).
Index page covers repo overview, stats, and entry points to the 6
analysis themes (refusals / persona / tools / philosophy / evolution /
trends). Sub-pages to follow.
This commit is contained in:
Claude 2026-04-22 13:37:11 +00:00
parent 345f10e852
commit 9b7301a49b
No known key found for this signature in database
2 changed files with 599 additions and 0 deletions

457
site/assets/style.css Normal file
View file

@ -0,0 +1,457 @@
/* CL4R1T4S // ANALYSIS shared stylesheet
leak-document aesthetic: dark bg, mono headings, amber accent */
:root {
--bg: #0b0b0d;
--bg-alt: #131317;
--bg-hover: #1a1a1f;
--fg: #e6e6e6;
--fg-dim: #9a9aa3;
--accent: #c8ff00;
--accent-dim: #a6d200;
--warn: #ff5555;
--info: #66d9ef;
--border: #25252c;
--border-soft: #1d1d23;
--mono: "JetBrains Mono", "Fira Code", "SF Mono", Menlo, Consolas, monospace;
--sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans",
"Noto Sans JP", Helvetica, Arial, sans-serif;
}
* { box-sizing: border-box; }
html, body {
margin: 0;
padding: 0;
background: var(--bg);
color: var(--fg);
font-family: var(--sans);
font-size: 16px;
line-height: 1.75;
-webkit-font-smoothing: antialiased;
}
body {
background-image:
linear-gradient(to bottom, rgba(200, 255, 0, 0.025), transparent 500px),
repeating-linear-gradient(
0deg,
transparent,
transparent 2px,
rgba(255, 255, 255, 0.008) 2px,
rgba(255, 255, 255, 0.008) 3px
);
min-height: 100vh;
}
a {
color: var(--accent);
text-decoration: none;
transition: color 0.12s ease;
}
a:hover { text-decoration: underline; }
/* ── Header / Nav ─────────────────────────────── */
.site-header {
border-bottom: 1px solid var(--border);
padding: 16px 32px;
display: flex;
justify-content: space-between;
align-items: center;
position: sticky;
top: 0;
background: rgba(11, 11, 13, 0.92);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
z-index: 10;
}
.site-title {
font-family: var(--mono);
font-size: 17px;
font-weight: 700;
letter-spacing: 0.06em;
color: var(--accent);
}
.site-title span {
color: var(--fg-dim);
margin: 0 4px;
}
.site-nav {
display: flex;
gap: 6px;
font-family: var(--mono);
font-size: 12px;
flex-wrap: wrap;
}
.site-nav a {
color: var(--fg-dim);
padding: 6px 10px;
border: 1px solid transparent;
letter-spacing: 0.04em;
}
.site-nav a:hover {
color: var(--accent);
border-color: var(--border);
text-decoration: none;
}
.site-nav a.active {
color: var(--accent);
border-color: var(--accent);
background: rgba(200, 255, 0, 0.05);
}
/* ── Main ─────────────────────────────────────── */
main {
max-width: 980px;
margin: 0 auto;
padding: 56px 32px;
}
h1, h2, h3, h4 {
font-family: var(--mono);
color: var(--fg);
letter-spacing: 0.02em;
line-height: 1.35;
}
h1 {
font-size: 34px;
margin: 0 0 20px;
padding-bottom: 14px;
border-bottom: 2px solid var(--accent);
display: inline-block;
}
h2 {
font-size: 22px;
margin-top: 56px;
margin-bottom: 16px;
padding-left: 14px;
border-left: 4px solid var(--accent);
}
h3 {
font-size: 17px;
color: var(--accent-dim);
margin-top: 32px;
margin-bottom: 10px;
}
h4 {
font-size: 14px;
color: var(--fg-dim);
margin-top: 20px;
margin-bottom: 6px;
text-transform: uppercase;
letter-spacing: 0.08em;
}
p { margin: 12px 0; }
/* ── Hero block ────────────────────────────────── */
.hero {
border: 1px solid var(--border);
background: var(--bg-alt);
padding: 32px;
margin-bottom: 48px;
position: relative;
}
.hero::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
background: linear-gradient(to right, var(--accent), transparent);
}
.hero .meta {
font-family: var(--mono);
font-size: 11px;
color: var(--fg-dim);
margin-bottom: 20px;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.hero p { font-size: 16px; }
.hero-lead {
color: var(--accent);
font-family: var(--mono);
font-size: 14px;
line-height: 1.7;
}
/* ── Card grid ─────────────────────────────────── */
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 14px;
margin: 24px 0 48px;
}
.card {
display: block;
border: 1px solid var(--border);
background: var(--bg-alt);
padding: 22px;
transition: border-color 0.15s ease, transform 0.15s ease;
color: var(--fg);
}
.card:hover {
border-color: var(--accent);
text-decoration: none;
transform: translateY(-2px);
}
.card h3 {
margin-top: 6px;
margin-bottom: 8px;
font-size: 16px;
color: var(--fg);
}
.card .card-num {
font-family: var(--mono);
color: var(--accent);
font-size: 11px;
letter-spacing: 0.1em;
}
.card p {
color: var(--fg-dim);
font-size: 13.5px;
margin: 8px 0 0;
line-height: 1.6;
}
/* ── Tables ────────────────────────────────────── */
table {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
font-size: 14px;
}
th, td {
border: 1px solid var(--border);
padding: 10px 14px;
text-align: left;
vertical-align: top;
}
th {
background: var(--bg-alt);
font-family: var(--mono);
color: var(--accent-dim);
font-weight: 600;
letter-spacing: 0.03em;
}
tbody tr:hover td {
background: rgba(200, 255, 0, 0.03);
}
/* ── Blockquote / pull quote ───────────────────── */
blockquote {
border-left: 3px solid var(--accent);
margin: 20px 0;
padding: 10px 20px;
background: var(--bg-alt);
font-family: var(--mono);
font-size: 13.5px;
line-height: 1.65;
color: var(--fg);
}
blockquote cite {
display: block;
margin-top: 10px;
color: var(--fg-dim);
font-size: 11.5px;
font-style: normal;
letter-spacing: 0.05em;
}
/* ── Code ──────────────────────────────────────── */
code {
font-family: var(--mono);
background: var(--bg-alt);
color: var(--accent);
padding: 2px 6px;
border-radius: 2px;
font-size: 0.9em;
border: 1px solid var(--border-soft);
}
pre {
background: var(--bg-alt);
border: 1px solid var(--border);
padding: 16px;
overflow-x: auto;
font-family: var(--mono);
font-size: 13px;
line-height: 1.6;
border-radius: 2px;
}
pre code {
background: none;
border: none;
color: var(--fg);
padding: 0;
font-size: inherit;
}
/* ── Callout boxes ─────────────────────────────── */
.warning, .note, .info {
padding: 16px 20px;
margin: 24px 0;
font-size: 14px;
border-left-width: 3px;
border-left-style: solid;
}
.warning {
border: 1px solid var(--warn);
border-left-width: 3px;
background: rgba(255, 85, 85, 0.05);
}
.warning strong { color: var(--warn); font-family: var(--mono); }
.note {
border: 1px solid var(--border);
border-left-color: var(--accent);
background: var(--bg-alt);
}
.note strong { color: var(--accent); font-family: var(--mono); }
.info {
border: 1px solid var(--border);
border-left-color: var(--info);
background: var(--bg-alt);
}
.info strong { color: var(--info); font-family: var(--mono); }
/* ── Footer ────────────────────────────────────── */
.site-footer {
border-top: 1px solid var(--border);
margin-top: 72px;
padding: 28px 32px;
text-align: center;
font-family: var(--mono);
font-size: 11.5px;
color: var(--fg-dim);
letter-spacing: 0.05em;
}
.site-footer a { color: var(--fg-dim); }
.site-footer a:hover { color: var(--accent); }
/* ── Prev / Next nav ───────────────────────────── */
.page-nav {
display: flex;
justify-content: space-between;
gap: 14px;
margin-top: 56px;
padding-top: 24px;
border-top: 1px solid var(--border);
font-family: var(--mono);
font-size: 13px;
}
.page-nav a {
padding: 12px 18px;
border: 1px solid var(--border);
color: var(--fg);
flex: 1;
max-width: 48%;
}
.page-nav a:hover {
border-color: var(--accent);
text-decoration: none;
}
.page-nav .nav-dir {
color: var(--fg-dim);
font-size: 11px;
display: block;
letter-spacing: 0.08em;
margin-bottom: 4px;
}
.page-nav .next { text-align: right; }
/* ── Lists ─────────────────────────────────────── */
ul, ol { padding-left: 24px; }
ul li, ol li { margin: 6px 0; }
/* ── Utility ───────────────────────────────────── */
.mono { font-family: var(--mono); }
.dim { color: var(--fg-dim); }
.accent { color: var(--accent); }
.warn { color: var(--warn); }
.tag {
display: inline-block;
font-family: var(--mono);
font-size: 11px;
padding: 2px 8px;
border: 1px solid var(--border);
border-radius: 2px;
color: var(--fg-dim);
margin-right: 4px;
letter-spacing: 0.04em;
}
.tag.accent { color: var(--accent); border-color: var(--accent); }
.stat-row {
display: flex;
gap: 24px;
flex-wrap: wrap;
margin: 20px 0;
}
.stat {
border: 1px solid var(--border);
padding: 14px 20px;
background: var(--bg-alt);
min-width: 140px;
}
.stat .stat-value {
font-family: var(--mono);
font-size: 24px;
color: var(--accent);
display: block;
}
.stat .stat-label {
font-family: var(--mono);
font-size: 11px;
color: var(--fg-dim);
text-transform: uppercase;
letter-spacing: 0.08em;
}
/* ── Responsive ─────────────────────────────────── */
@media (max-width: 720px) {
.site-header {
flex-direction: column;
gap: 12px;
padding: 14px 16px;
}
.site-nav { justify-content: center; }
main { padding: 36px 18px; }
h1 { font-size: 26px; }
h2 { font-size: 19px; }
.hero { padding: 22px; }
.page-nav { flex-direction: column; }
.page-nav a { max-width: 100%; }
}

142
site/index.html Normal file
View file

@ -0,0 +1,142 @@
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CL4R1T4S // ANALYSIS — AI システムプロンプトを読み解く</title>
<meta name="description" content="主要 AI モデル・エージェントのシステムプロンプトをリークしたリポジトリ CL4R1T4S を、6 つのテーマで構造的に分析する日本語解説サイト。">
<link rel="stylesheet" href="assets/style.css">
</head>
<body>
<header class="site-header">
<div class="site-title">CL4R1T4S<span>//</span>ANALYSIS</div>
<nav class="site-nav">
<a href="index.html" class="active">HOME</a>
<a href="analysis/refusals.html">01_REFUSALS</a>
<a href="analysis/persona.html">02_PERSONA</a>
<a href="analysis/tools.html">03_TOOLS</a>
<a href="analysis/philosophy.html">04_PHILOSOPHY</a>
<a href="analysis/evolution.html">05_EVOLUTION</a>
<a href="analysis/trends.html">06_TRENDS</a>
</nav>
</header>
<main>
<section class="hero">
<div class="meta">// CLASSIFICATION: leaked system prompts &nbsp;//&nbsp; VENDORS: 26 &nbsp;//&nbsp; LINES: 16,798</div>
<h1>AI の"楽屋裏の台本"を読む</h1>
<p class="hero-lead">&gt; 普段ユーザーからは見えない、主要 AI モデルのシステムプロンプトを 6 つのテーマで解剖する。</p>
<p>
<code>CL4R1T4S</code> は、OpenAI / Anthropic / Google / xAI / Meta / Mistral、そして主要なコーディングエージェントCursor, Devin, Cline ほか)など、
公開されていない <strong>システムプロンプト</strong> をリーク・リバースエンジニアリングで収集したアーカイブです。
本サイトはその内容を分析・構造化し、日本語で解説したものです。
</p>
<p class="dim">
"In order to trust the output, one must understand the input."
</p>
</section>
<h2>このリポジトリから読み取れること</h2>
<p>
AI の振る舞い——<strong>何を言い、何を言わないか/どんな口調で/どんな道具を使って</strong>——は、
モデル本体のパラメータだけでなく、ユーザーから見えない「システムプロンプト層」で強く規定されています。
各ベンダーのプロンプトを並べて比較すると、表に出ない <strong>設計思想・倫理観・機能の境界線</strong> が浮かび上がります。
</p>
<div class="stat-row">
<div class="stat">
<span class="stat-value">26</span>
<span class="stat-label">Vendors</span>
</div>
<div class="stat">
<span class="stat-value">~80</span>
<span class="stat-label">Prompt Files</span>
</div>
<div class="stat">
<span class="stat-value">16,798</span>
<span class="stat-label">Total Lines</span>
</div>
<div class="stat">
<span class="stat-value">6</span>
<span class="stat-label">Analysis Themes</span>
</div>
</div>
<h2>6 つの切り口</h2>
<p>以下のカードから、各テーマの詳細ページへ進めます。</p>
<div class="grid">
<a class="card" href="analysis/refusals.html">
<div class="card-num">// 01</div>
<h3>禁則・拒否ルール</h3>
<p>「何を言わないように作られているか」。児童安全・CBRN・著作権・政治——各社の拒否ポリシーを横並び比較。Anthropic の多重ガードから Meta の "never refuse" まで、同じ話題に対する真逆の指示を可視化する。</p>
</a>
<a class="card" href="analysis/persona.html">
<div class="card-num">// 02</div>
<h3>人格設計</h3>
<p>温度・トーン・口調はプロンプトで矯正される。ChatGPT "personality v2" による人格バージョン管理、Grok の反 PC 宣言、Hume の「5 語以下で返答を始めよ」——人格の"外付け性"を読み解く。</p>
</a>
<a class="card" href="analysis/tools.html">
<div class="card-num">// 03</div>
<h3>ツール使用ロジック</h3>
<p>Web 検索・メモリ・画像生成・ブラウザ操作・アーティファクト生成。各ツールの"いつ使うか"の判断基準までプロンプトで細かく縛られている。GPT-4o 画像生成後の「完全沈黙」指示など、異様なケースも。</p>
</a>
<a class="card" href="analysis/philosophy.html">
<div class="card-num">// 04</div>
<h3>ベンダー別設計哲学</h3>
<p>Anthropic は多重ガード、OpenAI は人格とプロダクト統合、xAI は真実追求、Google は生成 UI、Meta は refuse 禁止、中国系は学術的厳密さ——各社の哲学の違いがプロンプトににじみ出ている。</p>
</a>
<a class="card" href="analysis/evolution.html">
<div class="card-num">// 05</div>
<h3>プロンプトの進化史</h3>
<p>Claude 3.5 → 4.7、Grok 3 → 4.20 のような同一系統の版間差分から、<strong>何が追加・削除されたか</strong>が追える。「新機能よりガードレール追加の方が速い」という共通傾向も見えてくる。</p>
</a>
<a class="card" href="analysis/trends.html">
<div class="card-num">// 06</div>
<h3>業界トレンド</h3>
<p>ブラウザ内蔵 AIAtlas / Dia / Leo、自律エージェントManus / Devin / DROID、UI 生成型コーディングBolt / v0 / Lovable、中国モデルの台頭——副産物として見える業界地図。</p>
</a>
</div>
<h2>アーカイブの規模感</h2>
<table>
<thead>
<tr><th>カテゴリ</th><th>件数</th><th>代表的な収録</th></tr>
</thead>
<tbody>
<tr><td>ベンダー / 製品</td><td>26</td><td>OpenAI, Anthropic, Google, xAI, Meta, Mistral, Moonshot, MiniMax ほか</td></tr>
<tr><td>主要モデル</td><td>30+</td><td>Claude Opus 4.7, GPT-5, Gemini 2.5 Pro, Grok 4.20, Kimi K2, LeChat ほか</td></tr>
<tr><td>コーディングエージェント</td><td>10+</td><td>Cursor 2.0, Devin 2.0, Cline, Windsurf, Bolt, v0, Lovable, Replit Agent ほか</td></tr>
<tr><td>ブラウザ / OS 統合</td><td>4</td><td>OpenAI Atlas, Dia, Brave Leo, Gemini Gmail Assistant</td></tr>
<tr><td>総行数</td><td>16,798</td><td>.txt / .md / .mkd (コード類は含まず)</td></tr>
</tbody>
</table>
<h2>このサイトの読み方</h2>
<ul>
<li>上部ナビ、または上のカードから、読みたいテーマに飛べます。</li>
<li>各ページ末の <code>Prev / Next</code> で 6 テーマを順に読み通せます。</li>
<li>引用ブロックには必ず <strong>出典ファイル名</strong> を併記しています(例: <code>Claude-Opus-4.7.txt</code>)。</li>
<li>紫〜緑の強調は <span class="accent">主要キーワード</span>、赤は <span class="warn">警告 / 拒否ルール</span> を指します。</li>
</ul>
<div class="warning">
<strong>⚠ NOTE:</strong>
元リポジトリの <code>README.md</code> には、AI アシスタントを標的にしたプロンプトインジェクション文字列が含まれていました(本ブランチでは削除済み)。
CL4R1T4S の内容を他のエージェントに読み込ませる際には、同様の注入攻撃が仕込まれている可能性を想定してください。
</div>
<div class="note">
<strong>出典について:</strong>
本サイト上のすべての引用・解釈は、CL4R1T4S リポジトリに含まれるテキストファイルを一次ソースとしています。
各プロンプトの著作権は各ベンダーに帰属し、本サイトは教育 / 研究目的の二次的な解説です。
</div>
</main>
<footer class="site-footer">
SOURCE: CL4R1T4S repository &nbsp;//&nbsp;
ANALYSIS: 6 themes across 26 vendors &nbsp;//&nbsp;
各プロンプトの著作権は各ベンダーに帰属します
</footer>
</body>
</html>