Claude Design へのデザイン依頼プロンプト

Claude Design へのデザイン依頼プロンプト。コードブロック右上のコピーボタンで全文をコピーし、Claude Design にそのまま貼り付ける。依頼の実行と成果物の受領はユーザーが行い、受領したデザインの反映は子 issue として起票する。

(2026-09-03 更新: 方向転換 #47 に合わせてプロンプトを全面的に書き直した。旧方針版は編集履歴を参照)

````text
# Tatami のデザイン依頼

## プロダクト概要

Tatami は macOS ネイティブの開発用タイル型ブラウザです。tmux と同じ「prefix キー + 1 打鍵」の操作体系で、ウィンドウ内を上下左右にペイン分割し、各ペインに独立した Web ページを表示します。畳 (tatami) = 部屋をタイリングするもの、のメタファーです。

位置づけは「複数並列開発のコックピット」。普段使いのブラウザは Chrome のまま、Tatami は開発中の GitHub まわり (issue・PR・Actions) の移動・閲覧に特化します。GitHub 上の PR をクリックすると、ターミナルが開いて tmux の該当作業スペース (リポジトリの session・ブランチの window) へジャンプするのが固有の機能です。収益化はせず、作者の手元のツールとして作り、後から OSS として公開する可能性があります。

差別化の核は分割表示そのものではなく、tmux ユーザーが指の記憶のまま操作できること。設定は `~/.config/tatami/tatami.conf` というテキストファイルで、`.tmux.conf` 風の文法です。パスワードマネージャーなどの一般ブラウザ機能は持ちません (ログイン状態は Cookie の永続化で維持)。

## 対象ユーザー

tmux を日常的に使い、複数プロダクトを並列開発する開発者 (まずは作者本人)。マウスよりキーボードを好み、画面上の装飾より情報密度と一貫性を重視します。

## トーン

- 「和」と「畳」を静かに感じさせる。畳の緑 (#7C8B5A 前後) と生成りの紙色 (#F6F3EA 前後) を基調にし、彩度は低く。派手なグラデーションやネオンは使わない
- ターミナルの延長として違和感がないこと。等幅フォントと細い境界線、余白は tmux の status line 程度に詰める
- ブラウザの chrome (UI 部品) は最小限。Web コンテンツが主役で、Tatami の UI はペインの境界・status line・一時的に出るプロンプトだけ

## 主要画面 (すべて macOS ウィンドウ、ライト / ダーク両方)

1. メインウィンドウ: GitHub の PR 一覧・PR 詳細・Actions を 3 ペインに分割して表示した状態。フォーカス中のペインは境界色で示す。各ペインの上端に細いアドレスバー (URL とタイトル、読み込み進捗)。画面下部に tmux 風の status line (`[session] 0:pulls 1:issue-47* 2:actions` と右端に prefix の状態表示 `prefix: C-b`)
2. prefix 待ち状態: prefix を押した直後、status line に待ち状態が出ている
3. PR ジャンプの進行表示: PR リンクのクリック直後、status line に「作業スペースへジャンプ: bannzai/tatami#57」→「ジャンプ: tatami への tmux window (issue-49)」が出る。tmux session が無いリポジトリでは「tmux session がない: <リポジトリ>」の案内
4. コマンドプロンプト (`prefix + :`): status line の位置に 1 行の入力欄が出て、`:open https://...` を入力中。候補のポップアップは出さない
5. アドレス入力 (`prefix + /`): フォーカス中ペインのアドレスバーが編集状態になり、履歴・ブックマークの候補が下にコンパクトに並ぶ
6. ページ内検索 (`prefix + [`): status line の位置に検索入力、ページ内のヒットがハイライトされた状態
7. ウィンドウ一覧 (`prefix + w`) とセッション一覧 (`prefix + s`): tmux の chooser のようなリスト
8. 設定 / About: tatami.conf のパス (prefix・home・search-engine・terminal-app の設定例)、利用規約・プライバシーポリシーへのリンク、バージョン

## 成果物

- 上記 8 画面のモックアップ (ライト / ダーク)
- 色・タイポグラフィ・境界線・余白のデザイントークン一覧 (SwiftUI で実装するため、値は具体的に)
- アプリアイコン案 (畳の目地をモチーフにした、macOS 26 の角丸スクエア)
- 紹介ページ (https://bannzai.github.io/tatami/) 用の OGP 画像案 (1200x630)

## 制約

- macOS 26 の標準 UI (SwiftUI + AppKit) で実装できる範囲にする。独自のウィンドウ装飾は作らない
- Web コンテンツ領域には手を加えない (ページ側のデザインは各サイトのもの)
- 文言は日本語。短い UI 文言では句読点を使わない
````

## セッション再開

```sh
cd /Users/bannzai/ghq/github.com/bannzai/tatami
claude --resume 5e2c4049-7c18-4855-8f89-bd5dae9c2182
```

Start with the design brief in issue #22 and resume the referenced Claude Design session. Create the eight light and dark mockups, concrete SwiftUI design tokens, an app icon concept, and a 1200x630 OGP concept while following the listed macOS and Japanese UI constraints. The work is done when all requested design deliverables are received; implementation belongs in a child issue.

Written by the indexing model from the issue text.