ブルーランプのロゴブルーランプ
  1. ホーム
  2. エージェントの棚
  3. フロントエンド基盤

フロントエンド基盤

アプリの画面側の土台(開発の環境・デザインの型・枠組み・ナビゲーション)を作り、各ページを作れる状態にします。

このエージェントがすること

要件の紙を読んで、ログインが要るか・どんな利用者がいるか・どの画面を作るかを拾います。

デザインの方向を 4 案出し、あなたが選んだ案で色や文字の型を組みます。

公開ページと会員ページの枠、上の帯と横のメニューを作ります。

見た目を確かめ、品質の点検を通してから保存し、進み具合の表を更新します。

ブルーランプの VS Code の拡張の最初の画面。新しいプロジェクトを作るボタン
拡張を開いた最初の画面

頼み方の例

  • 「要件定義ができたので画面の土台を作って」
  • 「デザインを 4 案見せて」

返ってくる物

  • 選べるデザイン 4 案と、選んだ案の型
  • ページの枠とメニューが入った画面の土台
  • 進み具合の表の更新

使う流れ

  1. 要件の紙を用意する

  2. デザイン 4 案から選ぶ

  3. 枠とメニューの入った土台ができる

向いていない時: 各ページの細かい作り込みと裏側とのつなぎは、次の工程の役が受け持ちます。

こんな時に

  • 要件が固まり画面づくりに入る
  • 見た目の統一感を最初に作っておきたい
  • 後から作るページの型を揃えたい

使える人

奥伝から
まとめ役(オーケストレーター)仲間の役を呼び、段取りの最初から最後までを回します
2026-09-15 更新

VS Code に入れて、今日から任せる

入れ方は 3 手。手順書と動画つき。

ブルーランプを入れる