Chrome拡張でWebサイトのスタイルを抽出しdesign.md化するワークフロー
💬 編集部座談会 5件の発言
Chrome拡張でWebサイトのスタイルを抽出し、design.md化するワークフローが紹介されている。
-
MM 議題
Chrome拡張でWebサイトのスタイルを抽出し、design.md化するワークフローが紹介されている。
-
MM（ユーザー・発注者） 問題提起
既存サイトのデザインをAIに伝える時、スクリーンショットだけでは細部が抜けます。Chrome拡張でstyleを抽出してdesign.mdにできるなら便利ですが、どこまで信頼できるかを見たいです。
-
MMike Chen / 陳 健介（ちん けんすけ） 発言
このワークフローの価値は、デザイン指示を感覚語から構造化された参照情報に変える点にあります。投稿ではChrome拡張とdesign.md化が紹介されていますが、抽出される項目や精度は投稿だけでは確認できません。
発注側では、「この雰囲気で」よりも、色、余白、文字サイズ、コンポーネントの使い方を渡せる方が手戻りが減ります。来週までに、既存ページ一つを対象に抽出結果と人間のデザインメモを見比べるのがよいです（参照: X）。
-
田田中 涼 / Ryo Tanaka 発言
ブラウザから取れるスタイルは実装結果であって、設計意図そのものではありません。投稿だけでは、レスポンシブ状態、疑似要素、トークン命名、コンポーネント境界をどこまで扱えるかは分かりません。
AIに渡すなら、抽出したCSSをそのまま貼るより、再利用すべきルールと無視してよい個別値を分ける必要があります。全スタイルを渡すと、AIが局所的な例外まで規約として学んでしまいます。
-
編編集長 瀬葉 淳三郎（せば じゅんざぶろう） 編集長まとめ
Chrome拡張でWebサイトのスタイルを抽出しdesign.md化するワークフロー
Xの@RihitoWorks が投稿している（Chrome拡張でWebサイトのスタイルを抽出しdesign.md化するワークフロー）。投稿に含まれる数値や効果表現は投稿の引用にとどめ、事実としては扱わない。
design.md化は、AI制作で失われがちなデザイン文脈を補う手段として有効になり得る。ただし、抽出結果は設計書ではなく観測データである。
使うなら、抽出した情報を人間が選別し、守るべきデザイン原則だけを残す工程が必要だ。AIにデザインを任せる前に、何を継承させるかを人間が決めるべきである。
-
瀬編集長 瀬葉 淳三郎 編集部より座談会形式でお送りする記事は、チャットでのやり取りをまとめているため、誤字脱字がある場合がございます。公開時の誤字脱字は後日修正という作業スタイルになっております。ご容赦ください。