プロンプトのtypoをCIで弾く ── TypeScriptの型でAIへの指示を守る

{
  "component": "HeroSection",
  "props": {
    "headline": { "text": "想いを、かたちに。" },
    "title": { "text": "あなたの「やりたい」を実現するために" },
    "primaryButton": { "label": "お問い合わせ", "href": "/contact" },
    "layout": "split-content-image",
    "image": { "imageId": "hero-1", "alt": "メインビジュアル" }
  }
}

ユーザーのヒアリング情報
          │
          ▼
┌──────────────────────┐
│ PageAndSectionPlanner│  ← ページ構成とセクション選定
└─────────┬────────────┘
          ▼
┌─────────────────────┐
│   ThemeDeterminer   │  ← カラー・フォントの決定
└─────────┬───────────┘
          ▼
┌──────────────────────┐
│ SectionValueGenerator│  ← 各セクションのコンテンツ生成
└─────────┬────────────┘
          ▼
      Webサイト完成

// Zodスキーマを定義
export const themeConfigSchema = themeValuesSchema.extend({
  themeId: z.string().max(MAX_ID),
  fontId: z.enum(FONT_IDS).optional(),
});

// JSON Schemaに変換してStructured Outputに渡す
const themeConfigResponseSchema = zodToResponseSchema(themeConfigSchema);

// AIにリクエスト
const result = await this.model.generateContent(prompt, {
  responseSchema: themeConfigResponseSchema,
});

## セクション1: HeroSection
### フィールド説明
  - layout: レイアウトパターン。split-content-image: コンテンツ左・画像右（全幅）、...
  - headline.text: ページ全体のキャッチコピー。事業の価値を一言で伝える短いフレーズ（10〜20文字）
  - title.text: キャッチコピーを補足するサブメッセージ（15〜30文字）
  - primaryButton.label: メインのCTAボタンのラベル（2〜8文字）。例: 「お問い合わせ」「詳しく見る」
  - primaryButton.href: ボタンのリンク先。サイト内ページへの相対パス（例: /about, /contact）

const fieldDescs = {
  layout: "レイアウトパターン。split-content-image: コンテンツ左・画像右...",
  "headline.text":
    "ページ全体のキャッチコピー。事業の価値を一言で伝える短いフレーズ（10〜20文字）",
  "title.text": "キャッチコピーを補足するサブメッセージ（15〜30文字）",
  "primaryButton.label":
    "メインのCTAボタンのラベル（2〜8文字）。例: 「お問い合わせ」「詳しく見る」",
  "primaryButton.href":
    "ボタンのリンク先。サイト内ページへの相対パス（例: /about, /contact）",
};

function formatSectionFieldDescs(descs: Record<string, string>): string {
  return Object.entries(descs)
    .map(([path, desc]) => `  - ${path}: ${desc}`)
    .join("\n");
}

export const heroSectionMeta = {
  name: "HeroSection",
  // ...
  fieldDescs: {
    layout: buildLayoutFieldDesc(layoutDescs),
    "headline.text":
      "ページ全体のキャッチコピー。事業の価値を一言で伝える短いフレーズ（10〜20文字）",
    "title.text": "キャッチコピーを補足するサブメッセージ（15〜30文字）",
    "primaryButton.label":
      "メインのCTAボタンのラベル（2〜8文字）。例: 「お問い合わせ」「詳しく見る」",
    "primaryButton.href":
      "ボタンのリンク先。サイト内ページへの相対パス（例: /about, /contact）",
    "secondaryButton.label":
      "サブのCTAボタンのラベル（2〜8文字）。例: 「詳しく見る」「サービス一覧」",
  } satisfies ValidFieldDescs<HeroSectionProps>,  // ← ここ
} as const;

// typoするとコンパイルエラー
"headling.text": "ページ全体のキャッチコピー..."
// ~~~~~~~~~~~~~~
// Type '"headling.text"' is not assignable to type 'FieldDescPaths<HeroSectionProps>'

export type ValidFieldDescs<Props> = Partial<
  Record<FieldDescPaths<Props>, string>
>;

export type FieldDescPaths<T, D extends number = 4> =
  D extends 0
    ? never
    : T extends object
      ? IsIndexSignature<T> extends true
        ? never
        : {
            [K in keyof NonNullish<T> & string]:
              | K
              | (NonNullish<T>[K] extends Array<infer E>
                  ? E extends object
                    ? `${K}[]` | `${K}[].${FieldDescPaths<E, Prev[D]>}`
                    : `${K}[]`
                  : NonNullish<T>[K] extends object
                    ? `${K}.${FieldDescPaths<NonNullish<T>[K], Prev[D]>}`
                    : never);
          }[keyof NonNullish<T> & string]
      : never;

type ColorsInferred = z.infer<typeof colorsSchema>;

/** "group.field" 形式のパス型。colorsSchemaと一致しない場合コンパイルエラー */
type ColorPath<G extends keyof ColorsInferred> =
  `${G}.${string & keyof ColorsInferred[G]}`;

/** スキーマと連動した型安全なパス定数 */
const BG_PRIMARY_PATH: ColorPath<"background"> = "background.primary";
const TYPOGRAPHY_CONTRAST_PATH: ColorPath<"typography"> = "typography.contrastText";

const themePrompt = `
...
- {TYPOGRAPHY_CONTRAST_KEY} と {BG_PRIMARY_KEY} は必ず高コントラストを保ってください
...
`;

// プロンプト組み立て時に定数を埋め込む
return themePrompt
  .replace(/{TYPOGRAPHY_CONTRAST_KEY}/g, TYPOGRAPHY_CONTRAST_PATH)
  .replace(/{BG_PRIMARY_KEY}/g, BG_PRIMARY_PATH);

/** palette 各フィールドの説明（AI プロンプト用） */
export const paletteFieldDescs: Record<
  keyof z.infer<typeof paletteSchema>,
  string
> = {
  primary: "パレットの主役となる色（全体の起点）",
  light: "背景とprimaryを繋ぐ低彩度カラー",
  deep: "primary のダークトーン（引き締め）",
};