terminal
Weekly Digest // DESIGN_SYSTEMS — Week 31-2026
architectureWeekly Report

Attio、multi-tenant scale向けtyped formula… — 2026年 第31週 デザインシステム

UI component architecture, design tokens, and semantic theming

calendar_todaysummarizeWeek 31-2026
データモデル

Attio、multi-tenant scale向けtyped formula languageを構築

AttioLezerとCodeMirrorベースのcustom grammarでformula attributeを作り、incremental parsing、error highlighting、autocomplete、domain-specific referenceを得ました。Declarative type systemはrecord attribute、historical value、phone number、actor referenceを表現し、genericとruntime coercionを支えます。大規模再計算はbatchへfan-outし、SQLベースfunctionはSpannerで実行、全batchが一貫したsnapshot用の共通transaction timestampを読みます。Workspace ID由来のPub/Sub ordering keyは各tenantのworker利用を公平に制限します。Formula作成agentはschema contextを受け、custom DSL outputがvalidになるまでtypeとreference errorをfeedbackに使います。

Read Articlearrow_forward
Article · アクセシビリティREAD TIME: 4m

Axe Monitor MCP、アクセシビリティscanをsprint planへ

DequeのAxe Monitor MCP integrationは、アクセシビリティ担当者がreportを手動比較せずAI assistantからscan historyをqueryできるようにします。Teamは新regression、影響の大きいcomponent、次sprintに関係するpageを特定し、full issue detail付きの優先remediation planを求められます。複数sprintでtarget scoreへ届くscenarioをmodelし、designated administratorがscanをbulk作成・設定することもできます。Human judgmentを置き換えず、既存scan evidenceの分析と計画を速める仕組みです。利用にはAxe Monitor 8.8とMCP Server offeringへのaccessが必要です。

READ_FULL_LOGarrow_forward
Article · ローカライゼーションREAD TIME: 4m

Buttondown、Django・Vue・emailで単一localization contractを共有

Buttondownはlocalizationを一つのportable JSON fileへ保存し、keyごとにlocale別translated valueを置きます。Django template tag、Vue wrapper component、background transactional-email jobが同じsourceを読み、runtime別translation経路を作りません。CIはmissing・malformed stringを検査し、codebase全体を連結してunused keyまで拒否します。Documentationとsupportが英語限定のためsubscriber-facing surfaceだけlocalizeし、author dashboardは意図的に除外しました。結果、paid authorの75%がnon-English localeを選び、subscriberの40%以上がnon-English-speaking countryにおり、open stringへcommunity localeと修正が寄せられました。

READ_FULL_LOGarrow_forward
Article · ビジュアルQAREAD TIME: 8m

Visual regression test、functional coverage外のUIを保護

Functional testが通ってもshared icon、stylesheet、responsive layoutは目に見えて壊れ得ます。Visual regression testingは実browserでpageやcomponentをrenderし、承認済みbaselineと比較してpixel変化にreviewを求めます。Percy、Chromatic、Vitest Browser Modeはfull page、Storybook component、browser-mode unit testという異なる範囲を扱います。信頼できるsuiteにはfontとimage loadingを待ち、animationを停止またはmaskし、dateなどのdynamic dataを安定させる必要があります。巨大snapshotはreview fatigueと反復false failureを生むため、選択的high-value surfaceから始めるべきです。

READ_FULL_LOGarrow_forward
Article · コラボレーションREAD TIME: 2m

LiveFile、fileをfirst-class協業Storage valueへ

Liveblocksのpublic-beta LiveFileは、collaborative application stateと同じ同期Storage documentへarbitrary fileを追加します。WhiteboardやeditorはuseUploadFileでuploadし、mutationで戻り値を結び、useFileUrlでresolveできます。別storage integrationなしに接続ユーザーがfile変更をリアルタイムで見られます。Document、archive、presentation、mediaをすべて支えます。Server workflowはliveblocks.uploadFileを呼びAPIでStorageをmutateでき、assetを生成・処理するbackground agentにも向きます。Liveblocks 3.17以下のapplicationは導入前にupgrade guideへ従う必要があります。

READ_FULL_LOGarrow_forward
Video · クリエイティブコーディング8:29

Claudeでデザインを…やりすぎました

Flux AcademyはresearchとideationをClaudeへ委ねると、独自のideaに先立つ生産的な不快感と創作の所有感を同時に失い得ると論じます。James Webb YoungのA Technique for Producing Ideasに基づくprocessは、project researchとdesigner個人の関心を組み合わせ、conceptが現れる前のincubation periodを許します。AI生成conceptはその個人的なsource materialから切り離され、平均へ寄りやすくなります。修正版workflowではreference収集、sketch、散歩、ideation、信頼する人からのfeedbackを人間が担います。AIはimage、video、code、render、angle、styleなどの実行段階にだけ入り、人間の創造性にAI実行力を加える方法で選んだideaの可能性を広げます。

AI_INFOGRAPHIC
Claudeでデザインを…やりすぎました — infographicWATCH_VIDEOarrow_forward
summarizeDigest_Summary

第31週のDesign Systemsは、product ruleをexecutable contractへ変える方法が中心です。AttioはLezerとCodeMirrorでtyped formula languageを構築し、一貫したSpanner snapshot上で大規模再計算を実行し、Pub/Subのordering keyでtenant間の公平性を保ちます。Formula作成agentも同じtype systemに制約されるため、誤ったreferenceは静かなproduct errorにならず修正フィードバックへ戻ります。

周辺workflowにも同じ強さの検査が必要です。DequeのAxe Monitor MCP integrationはscan historyを優先順位付きremediation planへ変え、visual regression testはclass nameやcomponent内部ではなく実際のrendering結果を比較します。ButtondownはDjango、Vue、background emailで一つのportable localization JSONを共有し、missing・malformed・unused keyをCIで検査します。Design systemは、tokenとcomponentがaccessibility、localization、visual output、data semanticsのmachine-checkable guaranteeに結び付くとき信頼できるものになります。

Liveblocksのpublic-beta LiveFileはruntimeでも同じ統合を示します。Fileは同期Storage valueとなり、全collaboratorへリアルタイム更新され、React hookとserver-side agent workflowの双方からuploadできます。Surfaceごとに並行経路を作り直さず、shared primitive内にcapabilityを置くことが重要です。

Flux Academyは、こうしたmachine-checkable systemへ人間の境界を加えます。修正版processはresearch、sketch、incubation、信頼するfeedbackをdesignerに残し、Claudeをidea所有ではなく実行へ使います。この分担は人間の創造性にAI実行力を加える方法をsystem constraintとして扱います。Automationはconceptを既定で選ぶのではなく、意図的に選んだconceptを拡張します。

Key Takeaways
  • AI生成のproduct logicへdeterministic validatorを与えてください。Attioはformula agentの式を受理する前に、typeとreferenceのerrorをagentへ返します。
  • componentとresponsive pageの境界にvisual snapshotを追加し、font・animation・dynamic dataを先に安定させ、意図したbaseline変更ごとに明示的な承認を要求してください。
  • Research、ideation、incubation、信頼するfeedbackは人間が担い、conceptを選んだ後にAIを投入して、ideaを平均化せず実行範囲を広げてください。