ai-website-cloner-template でイレブンラボをリバースエンジニアリング
NODE6174// (lab.humbulls.com) のトップページデザインで、 elevenlabs.io のヒーロー / カードグリッド / モーション規範を参考にしているが、 言葉では「イレブンラボっぽくしたい」 を伝えきれない問題があった。 「カード部分ちょっと参考のデザインの動き方と違うのよ」 のような微妙な diff が手掛かりだけ残る。 そこで JCodesMore/ai-website-cloner-template (Next.js 16 + shadcn + Tailwind v4 のフレームワーク + clone-website skill) を `cloner-test/` に丸ごと clone し、 elevenlabs.io/ja を本格的にリバースエンジニアリングして「言葉化されない設計差分」 が抽出できるか検証した。
DESIGN_TOKENS.md / PAGE_TOPOLOGY.md / BEHAVIORS.md の 3 文書として書き出し成功。 重要発見: ElevenLabs は @keyframes 0 個。 transitions のみ、 `cubic-bezier(0.31, 0.325, 0, 0.92)` 0.3s が全ての interactive element に共通の signature curve。 H1 = Waldenburg-ML 48px **weight 300** (light)、 H2/H3 は 16px (body 18px より小さい — eyebrow 用)、 H4 は 14px warm gray。 ページ gutter 64px、 max-width 1280/1144/672。 Hero に 256×256 の <canvas> 1 個 (WebGL 候補)、 chart 用 canvas 2 個。 SVG は 83 個、 customer logo 19 個。
Inter + Geist Mono を Next.js font/google で読み込み、 oklch カラートークン (#FDFCFC bg / 純黒 text / #777169 warm gray) を `:root` に注入。 `--ease-elevenlabs` を `cubic-bezier(0.31, 0.325, 0, 0.92)` で定義し、 全 a/button/role=tab に共通 transition を適用。
SiteHeader / HeroBlock / VoiceCardGrid / LogoBand / PlatformDuo / ApiSection (+ CodeSampleBlock) / Timeline / SafetyPillars / LatestPosts / FinalCTA / SiteFooter を React component として個別作成。 page.tsx で組み立て、 `npm run build` 成功 (Turbopack 46s、 TypeScript strict 6s)。
`npm run dev` で localhost:3001 を起動、 Playwright で full-page screenshot を撮影し、 elevenlabs.io/ja の screenshot と並べた。 構造一致は 11 component すべて 1:1。 残った diff は本物のクローンでは越えられない 5 種類 (下記参照)。
Codex が `src/components/ChannelCard.astro` を、 vanilla canvas の requestAnimationFrame + CSS gradient layer + SVG feTurbulence 2 層 + soft-light texture で再実装。 白い wireframe は削除し、 各 Channel の `--grad-recipes` 〜 `--grad-library` をそのまま入力にして、 カード内部の色だけがガス状にゆっくり流れる表現へ変更した。 同時に cards / detail pages に Making 起点の出所 UI を追加し、 `pnpm typecheck` で Astro/Content Collection の型は通過。
skill が「言葉化されない設計差分」 を 5 つ可視化した = ROI あり。 具体的には (1) Voice card は orb (border-radius:50%) + grain texture が必須、 (2) Platform Duo の gradient block は subdued、 (3) Hero に 256×256 canvas 配置、 (4) Logo band は SVG brand mark、 (5) Latest Posts は real photo cover。 これらは全て Phase 1 の Playwright 計測 + Phase 4 の視覚比較で初めて言語化された。 NODE6174 の ChannelCard は (1)(2) を直接適用すべき (まだ rounded-square のまま)。
- Web Site Clone レシピ (新規作成候補) の verified attempts に「ai-website-cloner-template」 を adopted で登録。 ★★★★ (Visual Reference 抽出ツールとして優秀) - NODE6174 ChannelCard の改修 task が 5 件確定 = (a) border-radius を 50% へ (b) feTurbulence で grain texture 強化 (c) gradient color を more dusty に (d) hover: 一切の transform を排除 (e) cubic-bezier を `--ease-elevenlabs` に統一 - cloner-test/ は捨てない: 別案件で「あの Web サイトの構造分析」 が必要になった時に再利用できる template。 README に位置付けを追記する
「AI で Web サイトをリバースエンジニアリング」 して言語化されないデザイン差分を可視化する skill を運用してみた: ai-website-cloner-template (clone-website skill + Next.js 16 + shadcn) に elevenlabs.io を投入。 Playwright で DOM/CSS を計測 → 3 文書化 → 11 component を 30 分で再構築 → 視覚比較で「カードの形状」 「grain texture」 「canvas」 等の言葉化できない 5 種の差分を抽出できた。 神。
NODE6174// の起源 — Lab から独立メディアブランド誕生まで
humbulls Lab を独立メディアブランド NODE6174// にリブランドし、 Astro + Cloudflare Pages で公開、 5 → 6 Channel に拡張するまでの全プロセス。 進行中、 加筆修正されます。