> ## Documentation Index
> Fetch the complete documentation index at: https://docs.replit.com/llms.txt
> Use this file to discover all available pages before exploring further.

# 既存のアプリにデザインシステムを適用する

> 既存のアーティファクトにデザインシステムを適用する方法 — Canvasからでもコンポーザーからでも — と、時間とクレジットに関する警告の意味を解説します。

デザインシステムは新規の作業だけのものではありません。既存のアーティファクトに適用することができ、Agentがそのシステムの下でアーティファクトの見た目を再構築します。

<Steps>
  <Step title="対象を選ぶ">
    再スタイルしたいアーティファクトがあるプロジェクトを開きます。
  </Step>

  <Step title="システムを適用する">
    Canvasから：対象のフレームを選択し、その\*\*⋯**メニューを開いて**Apply design system\*\*を選びます。あるいはコンポーザーで依頼します（Agentによる再構築）：*「このアプリに自分のデザインシステムを適用して」*。

    <Frame>
      <img src="https://mintcdn.com/replit/9Q_lVrxG2Dh35jz1/images/design/replit-design/ds-apply-menu.png?fit=max&auto=format&n=9Q_lVrxG2Dh35jz1&q=85&s=ff9f762ff7fcfbb4f43500d0f662d71d" alt="Apply design systemがハイライトされたフレームの三点メニュー" width="400" height="180" data-path="images/design/replit-design/ds-apply-menu.png" />
    </Frame>
  </Step>

  <Step title="再構築を確認する">
    既存の作業にシステムを適用するのは実際の再構築であり、開始前に**時間とクレジットに関する警告**が表示されます。これは想定通りです。Agentはスタイルシートを差し替えているのではなく、アーティファクトのスタイリングレイヤーを再生成しています。
  </Step>

  <Step title="結果を確認する">
    主要な画面をシステムと照らし合わせて確認します。以降の編集も引き続きそのシステムを使用します — もし古いスタイリングへの逆戻りに気づいたら、チャットで指摘してください。
  </Step>
</Steps>
