今週はShopTalk ShowにBrad FrostとIan Frostが出演し、AIがデザインシステムのワークフローをどのように変えているかを議論することから始まりました。Bradは、AIセッションを自身のEddie Design… 開発ですぐ活用できるよう整理しました。
domContentLoadedとloadのタイミング、Web Vitals、オリジンごとの接続分析、そしてペインごとのヘッダー差分をハイライトするソート可能なウォーターフォールリクエストテーブルを提供します。新しいsnippet storeではコミュニティのCSSおよびJSスニペットを閲覧してワンクリックでインストールでき、ライブCSSプレビュー機能が復活し、編集内容がすべてのペインに即座に反映されます。outlineパネルにはカスタムセレクター概要機能が追加され、[aria-live]やbutton, [role="button"]などのCSSセレクターでアクセシビリティ監査用のカラーコードオーバーレイを確認できます。Polypane Peekは子ノードの整列を含むgridおよびflexレイアウトを可視化し、ElementsパネルのA11yタブではaria-describedbyの値とlabelledby要素への参照リンクが確認できます。macOSパスキーキーチェーン統合とChromium 148ベースの更新も含まれています。
CSSの@property登録を検証し、入力中に互換性のないvar()の使用を即座に検出します。たとえば--surface-primaryがcolorタイプで登録されているのに、開発者（またはコーディングエージェント）が誤ってgap: var(--surface-primary)と書いた場合、ブラウザは静かに初期値にフォールバックします。この拡張機能はその不一致をネイティブな診断の波線として即座に表示します。registryFiles設定によりワークスペースレベルのレジストリファイルをサポートし、一度定義されたトークンはすべてのファイルで検証されます。v1の制限として、プレーンCSSファイルのみ対応（SCSS、Less、Vue、Svelte、JSX非対応）、自動修正なし、WebベースのVSCodeホスト非対応があります。ZedExtension、Stylelintアダプター、Biome統合がロードマップに含まれています。
CLAUDE.mdやプロセスリポジトリに保存することが、セッション間で安定した出力を生むと指摘しています。CLAUDE.mdやプロセスリポジトリに保存することが、セッション間で安定した出力を生むと指摘しています。domContentLoadedとloadのタイミング、Web Vitals、オリジンごとの接続分析、そしてペインごとのヘッダー差分をハイライトするソート可能なウォーターフォールリクエストテーブルを提供します。新しいsnippet storeではコミュニティのCSSおよびJSスニペットを閲覧してワンクリックでインストールでき、ライブCSSプレビュー機能が復活し、編集内容がすべてのペインに即座に反映されます。outlineパネルにはカスタムセレクター概要機能が追加され、[aria-live]やbutton, [role="button"]などのCSSセレクターでアクセシビリティ監査用のカラーコードオーバーレイを確認できます。Polypane Peekは子ノードの整列を含むgridおよびflexレイアウトを可視化し、ElementsパネルのA11yタブではaria-describedbyの値とlabelledby要素への参照リンクが確認できます。macOSパスキーキーチェーン統合とChromium 148ベースの更新も含まれています。CSSの@property登録を検証し、入力中に互換性のないvar()の使用を即座に検出します。たとえば--surface-primaryがcolorタイプで登録されているのに、開発者（またはコーディングエージェント）が誤ってgap: var(--surface-primary)と書いた場合、ブラウザは静かに初期値にフォールバックします。この拡張機能はその不一致をネイティブな診断の波線として即座に表示します。registryFiles設定によりワークスペースレベルのレジストリファイルをサポートし、一度定義されたトークンはすべてのファイルで検証されます。v1の制限として、プレーンCSSファイルのみ対応（SCSS、Less、Vue、Svelte、JSX非対応）、自動修正なし、WebベースのVSCodeホスト非対応があります。ZedExtension、Stylelintアダプター、Biome統合がロードマップに含まれています。今週はShopTalk ShowにBrad FrostとIan Frostが出演し、AIがデザインシステムのワークフローをどのように変えているかを議論することから始まりました。Bradは、AIセッションを自身のEddie Design Systemにリンクしたspecマークダウンファイル（コアコンポーネント、デザイントークン、レシピ、Nuxt/Eleventyボイラープレートを含む）に固定することが、AIが本物のシステムを活用せず近似値を生成するという根本問題への実践的な解決策だと説明しました。StorybookのstoriesとTJ Pitre作成のFigma console MCPが忠実度強化ツールとして挙げられ、デザインシステムの決定事項は一時的なコンテキストウィンドウではなくCLAUDE.mdやプロセスリポジトリに保存することが、セッション間で安定した出力を生むと強調されました。
デザイントークンワークフローの空白を埋める2本のツーリング記事も注目されました。1本はトークンlintingルールを3つのティアに体系化しています。コミットをブロックするcriticalルール（壊れた参照、循環依存、型と値の不一致）、警告を表示するqualityルール（コンポーネントトークンレベルでのWCAGコントラスト、ダークモードの網羅性、命名規則）、長期的な健全性のためのnice-to-haveルールです。W3C DTCGのドル接頭辞トークン形式と一般的なツールチェーン形式の違いも解説されています。もう1本では、CSSの@property登録を検証し、互換性のないvar()の使用——例えば--surface-primaryがcolorタイプで登録されているのにgap: var(--surface-primary)と書いた場合——を即座に検出する新しいVSCode拡張機能が発表され、ワークスペースレベルのregistryFilesサポートも備えています。
アクセシビリティ関連のコンプライアンスニュースも重要なトピックでした。米国HHSがSection 504のデジタルアクセシビリティ期限を1年延長し、従業員15名以上の組織は2027年5月11日までにWCAG 2.1レベルA/AAに準拠する必要があります。VPAT 2.5の評価ベストプラクティスを解説した記事では、INTエディションが米国とEU双方の調達要件を満たすこと、監査は12〜18か月以内であること、axeやLighthouseなどの自動化ツールは問題の約57%しか検出できないためNVDA・JAWS・VoiceOverによる手動スクリーンリーダーテストが依然必須であることが強調されました。