AIで作ったページのナビバーに「動き」を付ける設計図（無料サンプル：Slide Pill）
- Digital0 JPY
AIでページは作れた。 でも、ナビバーの動きをどう指示すればいいか分からない。 そんな方が、「設計図をAIに渡して実装する」という使い方を無料で試すためのサンプルです。 有料版「ナビバー全6モーション設計図」に収録している6種類のうち、01 Slide Pill を1モーション分、そのまま試せます。
無料で試せる動き
01 Slide Pill 選択項目を変えると、ガラス風のピルが滑りながら移動して、選択状態を連れて行くナビゲーションです。
ダウンロード内容
・無料版 style-nav.md 01 Slide Pill の完全仕様＋再現に必要な共通仕様 ・無料用サンプルHTML 実際の動きを確認するための見本 ・README AIへの渡し方・使い方
使い方
無料版 style-nav.md をAIコーディングツールに読み込ませる 「この設計図の動きを、現在のナビバーに適用して」と依頼する AIが生成・変更した画面を確認する Claude Code / ChatGPT / Cursorなど、Markdownの内容を参照してコード生成・編集できるAI環境での利用を想定しています。 ※AIサービスやモデル、既存コードの構成によって、実装結果が異なる場合があります。
「設計図」には何が書いてある？
「滑らかに動かす」といった感覚的な説明だけではなく、 ・色 ・大きさ ・位置 ・アニメーション時間 ・イージング ・状態ごとの変化 などを、AIが実装時に参照できる形で仕様化しています。
再現テスト済み
この設計図は、元の実装を見せず、設計図ファイルだけを別のAIに渡して再現するテストを行い、サンプルとの差分ゼロを確認済みです。 これは、すべてのAI・すべての既存ページで同一結果になることを保証するものではありません。 「設計図だけから、基準となる見本を再現できるだけの情報が入っているか」を確認するための検証です。
無料版と有料版の違い
無料版 ¥0 01 Slide Pill のみ 有料版 全6モーションを収録 ・01 Slide Pill ・02 Expand Label ・03 Center Action ・04 Glass Player ・05 Dock Hop ・06 Liquid Tab 「まず設計図の使い方を確認したい」という方は、先にこの無料版をお試しください。 残り5種類も使いたい場合は、有料版「そのナビバー、素のままで損してます。AIに渡すだけで再現できる、ナビバー全6モーション設計図」をご覧ください。 有料版URL： https://ugokilab.booth.pm/items/9070833 同じ無料サンプルは、LINE公式アカウント「ウゴキラボ」でも配布しています。