「せっかくデザインを細かく調整したのに、AIに別の機能を頼んだら全部消えてしまった」という経験、Rorkを使い始めた方ならほぼ必ずぶつかる壁です。
個人的にも最初は「またやり直しか…」と途方に暮れることが何度もありました。でも、原因の仕組みを理解してプロンプトの書き方を少し変えるだけで、このストレスはかなり減らせます。ここではRork AIによる意図しない上書きが起きるメカニズムを解説したうえで、カスタマイズを守りながら開発を進める実践的な方法をお伝えします。
なぜ追加指示でコードが「リセット」されるのか
Rork AIは、あなたの指示を受け取るたびに「今のコードベース全体を考慮して最善の出力を生成する」という動作をします。追記ではなく、生成しなおすイメージです。
たとえば「ホーム画面に設定ボタンを追加して」と指示すると、AIはホーム画面のコンポーネント全体を再生成します。このとき、あなたが手動で調整したフォントサイズや色、余白などは、AIの学習データ上の「標準的な実装」に戻ってしまうことがあります。
これはバグではなく、生成AIが持つ本質的な性質です。AIは「変更された差分だけ」を出力する専門ツールではなく、「最適と判断したコード全体を生成する」ツールだと理解しておくと、対処の方向性が見えてきます。
特に上書きが起きやすいのは次のような操作です。
- 既存の画面に新しいUI要素（ボタン・カード・モーダルなど）を追加する
- レイアウトの変更を依頼する（カラムからグリッドへの変換など）
- 既存機能の修正と新機能の追加を同時に依頼する
- 「〜を直してください」という曖昧な指示を出す
上書きを防ぐための指示の書き方
もっとも効果的な対策は、プロンプトに「守ってほしい範囲」を明示することです。
悪い例（上書きが起きやすい）:
ホーム画面にプッシュ通知ボタンを追加してください。
この指示ではAIが「ホーム画面全体を最適化した上でボタンを追加する」と解釈し、既存のカスタムスタイルを変えてしまいます。
良い例（守りたい範囲を明示）:
HomeScreen.tsx の既存のスタイル・レイアウト・ロジックは一切変更しないでください。
ヘッダー右上に通知アイコンボタン（TouchableOpacity）を1つだけ追加してください。
追加するのはその要素だけです。他のコードには触れないでください。
ポイントは3つです。
- 変更しないファイル・コンポーネント名を明示する（例:「HomeScreen.tsx は変えないで」）
- 追加する要素の範囲を1つに絞る（複数の変更を一度に頼まない）
- 「他のコードには触れないでください」を末尾に付ける（AIへの強い制約）
どうしても消える場合の「保護コメント」戦略
プロンプトで制約を書いても、AIが上書きしてしまう場合があります。そのときに有効なのが、コード内に「保護コメント」を書く方法です。
// ===== CUSTOM: このブロックは手動で調整済み。変更禁止 =====
const customStyles = {
headerContainer: {
paddingTop: 48, // ステータスバー分の余白（機種ごとに調整済み）
backgroundColor: '#1A1A2E',
},
titleText: {
fontSize: 22, // デザイナー確認済みのサイズ
letterSpacing: -0.5,
fontWeight: '700' as const,
},
};
// ===== CUSTOM END =====このようにコメントで「手動調整済み・変更禁止」と明記しておくと、Rork AIが次の指示を処理する際にそのブロックを温存してくれる確率が上がります。完璧な保証ではありませんが、実際に試してみると上書きを防げるケースが体感的に増えます。
合わせて、修正箇所の近くに「なぜこの値にしたか」のコメントも残しておくと、仮に上書きされたとしても後から再現しやすくなります。
変更が消えた後の復元方法
それでも上書きが起きてしまった場合、いくつかの方法で元の状態に戻せます。
方法1: Rork の履歴機能を使う
Rorkにはプロジェクトの変更履歴を確認できる機能があります。画面上部のバージョン表示（またはHistoryアイコン）から過去の状態に戻すことができます。大きな変更を加える前に「チェックポイント」を意識して作っておくと、ここで活きてきます。
方法2: 消えた箇所を素早く再現するプロンプト
上書きされた内容を覚えていれば、すぐに再現を依頼できます。
先ほどの変更でheaderContainerのpaddingTopが変わってしまいました。
paddingTopを48に、backgroundColorを#1A1A2Eに戻してください。
それ以外のコードには触れないでください。
消えた値を別のメモ（Notionやテキストファイルなど）に控えておく習慣をつけると、このような場面で素早く対応できます。
方法3: Rork Max を使っている場合
Rork Maxではコードの直接編集が可能です。AIによる自動生成に頼らず、変更したい箇所のみをピンポイントで修正できるため、上書き問題そのものを回避しやすい環境です。
長期的に安定した開発を続けるための習慣
上書き問題と長く付き合っていく上で、個人的に効果があると感じている習慣があります。
1. 大きな修正の前にスナップショットを取る
Rorkのバージョン履歴に加えて、重要なカスタマイズが完了したタイミングでコードをコピーしてメモに残しておきます。数十秒の作業ですが、後で助かる場面が何度もありました。
2. 指示は「一度に一つの変更」に絞る
「ボタンを追加して、色も変えて、フォントも直して」という複合指示は上書きのリスクが高まります。一度に一つの変更だけを依頼する方が、AI の動作を予測しやすく安定します。
3. カスタムスタイルはできるだけ分離する
スタイル定義を styles.ts や theme.ts に分離しておくと、AIが画面コンポーネントを再生成してもスタイルファイルはそのまま残ることがあります。完全な保証ではありませんが、影響範囲を減らす効果があります。
Rork AIとのやり取りで起きる問題は、上書き以外にも「同じエラーを繰り返す」という現象があります。そちらについてはRork AI のループから抜け出すトラブルシューティングで詳しく解説していますので、合わせて参考にしてみてください。
全体を振り返って — 今日から試せること
上書き問題の根本は「AIがコードを差分更新ではなく全体再生成している」ことにあります。この前提を知った上でプロンプトを設計することが、一番の解決策です。
まず今日試してほしいのは、次の指示を一回追加するだけのシンプルな対策です。
既存のスタイルやロジックはそのままにして、〇〇だけ追加してください。
他のコードには触れないでください。
この一文を加えるだけで、上書きの発生率がぐっと下がります。ぜひ次の指示から試してみてください。
また、Rorkでのビルドエラーに悩んでいる方はアプリがビルドできない時のトラブルシューティングガイドも参照してみてください。