はじめに

生成AIというと「コードを書かせる」使い方が主流だと思いますが、今回は逆に コードは別のAIツール/エディタ支援に任せて、Claudeには「デザイン担当」として入ってもらう という役割分担で、Chrome拡張機能「QiitaSkin」を作ってみました。

QiitaSkinは、閲覧中のどんなWebサイトでも配色・フォント・カードデザインをQiita風に着せ替えてくれる拡張機能です。この記事では、実装そのものではなく、Claudeにどこまで「見た目」を任せられるかという観点でまとめます。

役割分担

担当	誰が(何が)
実装コード(manifest.json / content.js / popup.js)	他のAIツール・エディタ支援
配色・CSS設計	Claude
UI/レイアウトの構成案	Claude
ロゴ・アイコン・バナー画像	Claude
ワイヤーフレーム/モックアップ	Claude

「動かす部分」と「見た目を決める部分」を分けたことで、それぞれのツールが得意な仕事に集中できた感覚があります。

1. 配色・スタイル(CSS)をClaudeに設計してもらう

QiitaSkinの核となるのは qiita-style.css です。ここで使う色のトーン(Qiitaらしい緑、カードの余白、影の付け方など)をClaudeに相談しながら決めていきました。

style.css

:root {
  --qiita-green: #67cb1b;
  --qiita-green-dark: #509e15;
  --qiita-text: #7a7d7d;
  --qiita-card-bg: #ffffff;
  --qiita-border: #e3e6e8;
  --qiita-code-bg: #2b2b2b;
}

html.qiita-style-injected article,
html.qiita-style-injected main,
html.qiita-style-injected .card,
html.qiita-style-injected [class*="card"] {
  background-color: var(--qiita-card-bg) !important;
  border: 1px solid var(--qiita-border) !important;
  border-radius: 8px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06) !important;
  padding: 1.2em !important;
}

「Qiitaらしさ」を言語化するのは意外と難しく、

カード型UIの角丸の半径
ボタンのホバー時の色の落とし方
コードブロックの背景色とテキストの明度差

といった細かいトーン&マナーを、CSS変数として言語化してもらいながら固めていきました。実装(どのセレクタに当てるか)は別ツールに任せ、「値そのものの妥当性」をClaudeにレビューしてもらうという使い方が特に効きました。

2. UI/レイアウトの構成案(ポップアップ画面)

拡張機能のON/OFFを切り替えるポップアップ画面も、まず構成をClaudeと相談しました。

タイトル + トグルスイッチという最小構成にする
状態(ON/OFF)をラベルで明示する
補足説明は1行の注釈にとどめる

という方針が固まり、それをもとに実装したのが以下のポップアップです。

poopup.html

<div class="row">
  <span id="status-label">読み込み中...</span>
  <label class="switch">
    <input type="checkbox" id="toggle" />
    <span class="slider"></span>
  </label>
</div>
<p class="note">オンにすると、全てのサイトの配色・フォント・カードデザインをQiita風に書き換えます。</p>

トグルスイッチの見た目(色・サイズ・アニメーション速度)もCSSの数値レベルまで一緒に詰めています。

3. ロゴ・アイコン・バナー素材

アイコンとストア掲載用バナーは、PythonのPillowで描画するスクリプト(make_icon.py / make_banner.py)を用意し、そこに渡すデザイン仕様をClaudeと決めました。

アイコンのモチーフ:「ブラウザウィンドウ」+「蝶ネクタイ(着せ替えのメタファー)」
Before/Afterが一目でわかるバナー構成(左に地味なサイト、右にQiita風サイト、中央に矢印)
色は本体CSSと同じQiitaグリーンで統一

QIITA_GREEN = (103, 203, 27, 255)
QIITA_GREEN_DARK = (80, 158, 21, 255)

のように、CSSで使った配色をアイコン・バナーにもそのまま流用することで、拡張機能全体の世界観に一貫性を持たせています。ここでもコードそのもの(座標計算や描画処理)は別ツール任せで、Claudeには「何を・どう見せるか」というデザイン仕様の壁打ち相手になってもらいました。

やってみて感じたこと

言葉にしにくい「トーン」を言語化する相棒として優秀。「Qiitaっぽい」「ちょっと硬い」といった曖昧な感覚を、具体的な色コードや余白の数値に翻訳してくれる
実装とデザインを分業すると、後から見返しやすい。CSS変数やデザイン仕様として一箇所にまとまるので、後で色を変えたくなったときの影響範囲が把握しやすい
一方で、実際の見た目はブラウザで確認しながら微調整が必須。Claude側の提案だけで完結せず、都度スクリーンショットを見ながら往復するのがコツ

まとめ

「AIにコードを書かせる」だけでなく、「AIにデザインの言語化・仕様化を手伝ってもらう」という使い方も選択肢としてアリだと感じました。特に配色やトーン&マナーのような、感覚的だけど後から見返すと理由を説明しづらい部分を、Claudeとの対話を通じて仕様として残せたのは大きな収穫でした。