Penpot、AI搭載デザインワークフロー向けMCPサーバーを実験 — 2026年 第2週 デザインシステム

第2週のデザインシステムを象徴するのは、本当に新しいシグナルです: PenpotがMCPサーバーをLLMとデザインAPIの間のプログラム的な橋渡しとして実験しており、AIがテキスト説明からの生成ではなく実際のデザイン操作を実行できるようにしています。PenpotはデザインをコードとしてPenpotが表現するため、MCPレイヤーは競合ツールが追いつけない粒度を持ちます。これはPenpot Fest 2025でClaude Desktopを使ってライブ実演され、VS Code・Cursor・JetBrains Riderでもテスト済みです。LLM非依存のPython SDKでdesign-to-code・code-to-design・Storybookの生成・アクセシビリティ分析・デザインシステム準拠チェックをサポートします。まだベータ前ですが、このアーキテクチャはデザインツールがエージェント層と統合する方向性を先取りしています。

今週のアクセシビリティのテーマは2つの次元を持ちます。TetraLogicalのEla Gorlaは、チーム全体のアクセシビリティテストを静かに弱体化させる5つの誤解を解体します: 自動化ツールはWCAG要件の20〜40%しか検出できないのに包括的な監査として扱われ、テストはプロジェクト末期のQAまで先送りされ、責任はスペシャリストにのみ委任されます。実際にテストすべきAT/ブラウザ/OSの組み合わせの優先順位付けにはWebAIM Screen Reader User Surveyを推奨しています。またDequeによるADA改革分析では、通知・是正条項が障害者自身が違反を特定・報告して初めて法の保護が適用されるという構造的な問題を指摘しています。求職申請や医療情報アクセスのような時間的制約のあるデジタル場面では特に深刻です。

Dave Rupertのフォーカスリングのためのネストされたcontrast-color()の調査は、CSS機能の合成を極限まで押し進めた注目の事例です。ネストされた呼び出しは理論的に2トークンパターン（--focus-inner-ringと--focus-outer-ring）を単一の--page-bgトークンに縮小しますが、フォーカスリングがページ背景と異なる表面の上に現れると機能しません。不安定なcontrast-color()ブラウザサポートを考えると、light-dark()へのフォールバック推奨は実用的です。Carmen AnsioのFigma Config 2025の発表は、dotLottie/Framer MotionによるReactアニメーションハンドオフパイプラインをドキュメント化して今週を締めくくります。WebAssembly canvasレンダリングのdotLottieはモーション忠実度を、Framer MotionはReactステート駆動のインタラクティビティを担当し、コンポーネントごとに複数のアニメーションがある場合は各々専用の<canvas>要素が必要という重要な実装上の注意があります。