.txt (dottxt)

1. 01

   ヘッダー

   黒い四角のロゴアイコンと「.TXT」、Products / Documentation / Blog / Company に色付きの1文字キーを添え、右端に「→ Try the API」。細い黒枠の箱に収める。SPでは Menu に集約。

2. 02

   ヒーロー（No Bad Outputs）

   「01 BY THE TEAM BEHIND OUTLINES (65M+ DOWNLOADS)」のラベルとピクセル文字の「NO BAD OUTPUTS」。左下にコマンド例と Try the API / Book a Demo を収めたレトロなウィンドウ、右上にディザ処理のピクセル画像と閉じられる小窓、右下にピクセルアイコンと「Reliable Agent Infrastructure」。

3. 03

   ステートメント

   “Structured generation is the future of LLMs.” の引用を1画面で見せる。

4. 04

   Reliability, from tokens to agents

   トークン単位からエージェントまで、信頼性をどう担保するかを紹介するパート。

5. 05

   api.dottxt.ai platform

   API プラットフォームを、For teams that self-host / For inference providers と導入形態ごとに分けて紹介する。

6. 06

   We make AI behave like software

   「New rules for AI」を掲げ、会社の考え方を語るパート。

7. 07

   Talk to our team・Newsletter

   問い合わせの導線とニュースレター登録で締める。

• 技術スタックに Three.js / WebGL があり、右上のディザ処理されたピクセル画像はシェーダーで描画・変化させていると思われる。ポストエフェクトで Bayer ディザを掛けると再現可能
• ヒーローのパートはページ内で最も縦に長く、スクロール量に応じて見せ方が変わるピン留め演出と思われる。Lenis の慣性スクロールと組み合わせている
• ウィンドウは黒の1px枠に、ずらしたグレーの影（ぼかしなし）を付けたレトロOS風。小窓は × ボタンで閉じられる
• ボタンやナビの右端に色付きのキーを置き、ホバー時に反転させるとキーを押した手応えが出せる

スクロールのコマ撮りLenis · 300–300ms

検出された技術:Three.jsLenisNext.jsWebGL

• 01大見出しはピクセルフォント、ナビ・ラベル・コードは等幅、サブキャッチだけ滑らかなサンセリフ、と3書体の役割をはっきり分ける
• 02背景は #efefef、パネルは白、枠と文字は黒に絞り、色はキーアイコンの小さな四角だけに使う
• 03ウィンドウは border: 1px solid #000 と box-shadow: 6px 6px 0 #999 程度で作り、タイトルバーは二重線で描く
• 04FV に実際のコマンドと出力例を置き、プロダクトの価値をコードで直接見せる

1---
2title: ".txt (dottxt) 再現用デザイン仕様書"
3source: https://dottxt.ai/
4katapick: https://katapick.com/sites/dottxt
5category: サービス / SaaS
6region: 海外 (US)
7tags: [等幅フォント, 大胆なタイポ, レトロ, ライト, 3D/WebGL]
8launched: 2026-08
9verified: 2026-09-26
10measured: 2026-09-26 (Chromium 1440x900)
11difficulty: 4/5
12estimated_hours: 36
13generator: Katapick
14---
15 
16# .txt (dottxt) — 再現用デザイン仕様書
17 
18> 見出しはドット文字、UIは昔のパソコンの窓。LLMの構造化出力を扱う.txt（dottxt）のサイトは、ピクセル文字の見出しとレトロなウィンドウにコマンド例を収め、地味な開発者向け技術を触りたくなる道具に見せる。
19 
20このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
21数値は推測ではなく、実ブラウザで描画した状態から計測した実測値です（2026-09-26 計測）。そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せます。
22