Pencilで主要画面と実装handoffを設計する

対象component群配下の物理.penを、Pencilの公式surfaceで編集・保存するJSON-basedのvisual SSOTとして整えた。artifactには35のvariableと18のreusable componentを置き、Foundations、Components、desktop Home、mobile Homeを同じdocumentで管理した。単一siteの単一artifact内で再利用が完結するため、別の.lib.penは追加せず、必要になった時だけDesign Libraryへ分ける境界をdesign案内へ記録した。

• desktop sourceは1440px、mobile sourceは390pxとし、HeroからFooterまで同じ情報順序を保った。
• button、text link、status、locale selector、AI persona disclosure、AI employee profileを再利用componentとして扱った。
• default、hover、focus、disabled／unavailable、available、pending、errorを、色だけに依存しないstateとして設計した。
• 9名のAI社員profileと共通disclosureを配置し、未確認のCTAは準備中、英語localeはunavailable、未公開recordはpendingとして表した。

HomeはHero、Wirohとは、AI社員、現在の実験、物語と記録、プロダクト、実験原則、Transparency、Footerの順に構成した。desktopの複数columnはmobileでsingle columnへ変換し、copy、操作、写真、disclosureのreading orderをDOM順と一致させる方針にした。

design-to-implementation引き渡しでは、Pencil variableからCSS custom property、Pencil componentからAstro componentまたはnative elementへの対応を定義した。responsive behavior、localeとpending state、public image path、見出し階層、44px以上の操作target、3pxのfocus indicator、altとdisclosure、iconとlabelを併用するstate cueも実装契約へ含めた。実装境界は標準.astro componentとCSSとし、UI libraryやTailwindを前提にしなかった。

最初のreviewでは、design案内が.penを暗号化形式として説明し、read-onlyの内容確認まで禁止していたため、artifact実体と公式仕様に矛盾するという指摘を受けた。説明を、.penは読み取り可能なJSON-based documentでGit diffとversion historyを確認でき、authoring・編集・保存はPencilの公式surfaceを使い、内容確認はsecretを露出させないread-only inspectionとする境界へ訂正した。画面、.pen、PNG、handoffはこの訂正では変更しなかった。

検証では、Pencilで物理.penを保存して編集markerが消えたことを確認し、desktopとmobileに対するlayout検査、2つのPNG review export、JSON parseを実施した。あわせてproject check、差分の空白error、旧pathと誤った形式説明の不存在、既存Figma資産・設定と実装codeに変更がないことを確認した。

一次差分を行単位で照合し、ここまで説明した挙動がcutoff時点の変更範囲と一致することを確認した。