Dzero Design To Code

---
name: dzero-design-to-code
description: デザインデータ（Figma などのデザインカンプ）を参照してコーディングするときの解釈原則とアセットの扱い。Figma の URL・MCP・デザイン画像・カンプをもとに実装や修正をするときに必ず使う。
license: CC-BY-NC-SA-4.0
---

# デザインカンプ解釈

> 実装レイヤー選定（`dzero-tech-selection`）を経ていない場合は先にそちらを読むこと。

## 原則: デザインデータの数値は「結果」であって「仕様」ではない

デザインデータから読み取るべきは意図（可変か固定か、何に整列しているか、余白は何との関係か）であり、表示されている数値そのものではない。

- 要素の `width` / `height` をデザインの数値のまま固定値で書かない。可変を前提にレスポンシブに落とし込む
- デザイン上の X/Y 座標を `top` / `left`（`inset-*`）にそのまま変換しない
- 値を書くときは何を基準にした値なのかを計算式で明示する（`dzero-css` の値のルールに従う）
- 行高が絶対値（例: `24px`）で指定されていても、そのまま `line-height: 24px` と書かず `font-size` との比率（例: `calc(24 / 16)` = `1.5`）に変換する
  <!-- 暫定ルール: stylelint（declaration-property-unit-disallowed-list）による line-height の px 禁止を linters に提案中。導入されたらこの項目は削除する -->

## デザインに描かれていない状態も実装対象

デザインカンプは通常デフォルト状態の静止画しかない。描かれていなくても以下は実装する。

- インタラクティブ要素の `:hover` と `:focus-visible`（キーボード操作時のフォーカス表示。詳細は `dzero-a11y`）
- エラー・空・長文（折り返し・はみ出し）などの状態はデザインに定義がなければユーザーに確認する

## デザイントークンへの対応付け

- 色などの値はプロジェクトのカスタムプロパティ（`__assets/_libs/style/base/root.css` の `:root` に定義。Figma のバリアブルもここに定義される）に対応付けて使う
- デザイン側でバリアブル・スタイルが設定されていない値でも、直接書かずに対応するトークンがないか先に探す
  <!-- 暫定ルール: stylelint（declaration-strict-value 系）によるトークン強制を linters に提案中。導入されたらこの項目は削除する -->

## アセット（画像等）の扱い

- **画像の書き出し・変換は自分で行わず、ユーザーに依頼する**（エージェントが行うと著しく遅いため。作業分担のルール）
- 配置されたファイルの命名は `[種類]-[修飾語・詳細]-[連番]@[解像度].[拡張子]`（`[種類]` と `[拡張子]` は必須）。種類は `bg` / `pict` / `thumb` / `hero` / `banner` / `text` / `logo` / `icon` / `obj` から選ぶ（[メディア: 画像](https://guidelines.d-zero.co.jp/media/image.html)）
- フォーマットは可能であれば AVIF・WebP を採用する。ベクターデータがあるものは SVG を採用する
- 画像をページやコンポーネントごとのサブディレクトリに分けない（共通で使い回すか将来わからないため）