本文へ移動
cccskills
無料GitHub で公開

ui-concept-implement

選択済みのUI画像案を既存アプリへ実装し、実画面と参照を比較して漏れや表示崩れを修正する。

インストール方法を見る

含まれるファイル(3)

  • SKILL.md5.8 KB
  • agents/openai.yaml366 B
  • references/review-agent-prompt.md2.6 KB

SKILL.md(原文)

インストールする前に、エージェントに与えられる指示の中身を確認できます。

ui-concept-implement

UI画像案を実装可能な画面へ落とし込み、スクリーンショットレビューでHigh/Mediumの漏れがなくなるまで仕上げる。

絶対ルール

  • main Codex が最終判断、実装統合、検証、commit / push / PR を担当する。
  • レビュー用サブエージェントは評価担当に限定し、修正の採否は main Codex が決める。
  • ユーザーが変更・削除を指示した箇所、プロジェクトのデザインシステム、既存UI制約により参照画像と差が出ることは正常差分として扱う。
  • 参照画像をそのまま模写せず、ユーザー指示と実アプリの情報設計を優先する。
  • High/Medium 指摘は原則すべて解消する。解消不能なものは理由を明示して停止する。
  • Low 指摘は最終報告に残してよく、自動修正ループの必須対象にしない。
  • 既存の未コミット変更やユーザー作業を戻さない。

Workflow

1. 入力と根拠を確定する

次を確認してから実装に入る。

  • 実装対象のUI画像。例: docs/DESIGN/**/concept_03_*.png
  • 同じフォルダに prompts.md があれば、画像生成時の意図、参照UI、制約を読む。ない場合は提供画像と依頼から判断し、ファイルの不在だけで止めない。
  • ユーザーの追加指示。削除対象、文言変更、優先順位、実装範囲を明確にする。
  • AGENTS.md、既存UI、package.json、使用中のUIライブラリ、テーマ、ルーティング、状態管理。
  • 既存画面がある場合はBrowserで現在UIを確認する。

不足情報がローカル調査で解決できない場合だけ、ユーザーへ短く確認する。

2. 実装方針を短く固定する

実装前に、以下を2〜6行で整理してから作業する。

  • 参照画像から採用する構造
  • ユーザー指示により変える/消す要素
  • 既存デザインシステムに合わせて置き換える要素
  • 触るファイルと検証コマンド

大きな作業では利用可能な計画機能または既存PLANで、実装・検証・修正の進捗を管理する。

3. 実装する

  • 既存コンポーネント、状態管理、ルーティング、デザイントークンを優先する。
  • HeroUI / HeroUI Pro を使うプロジェクトでは、そのプロジェクトの既存 import と compound component 作法に合わせる。
  • Tailwind は既存の色・余白・角丸・タイポグラフィの傾向に合わせる。
  • UI画像の装飾を盲目的に再現せず、実アプリで操作可能な状態、空状態、読み込み、レスポンシブを必要範囲で作る。
  • ユーザーが削除指示したUIや文言は残さない。
  • 実装後、対象に応じた smallest relevant checks を実行する。通常は typecheck / build / 既存テスト。

4. Browserで撮影する

実装対象画面をBrowserで開き、少なくとも次を確認・撮影する。

  • プロジェクトが対応するviewport。レスポンシブ画面ではdesktopとmobile、対象端末が限定される画面ではその範囲
  • ユーザーが指定した重要状態や詳細URL
  • 横スクロール、重なり、テキスト切れ、主要CTAや操作部品の表示

スクリーンショットは一時ファイルでもよい。最終報告に必要なら保存先を示す。

5. レビュー用サブエージェントを起動する

references/review-agent-prompt.md を読み、次を含むpromptでサブエージェントを起動する。

  • 対象プロジェクトの絶対パス
  • 参照UI画像の絶対パス
  • 実装後スクリーンショットの絶対パス、またはBrowser確認結果
  • ユーザー追加指示の要約
  • プロジェクトルールの要約。例: AGENTS.md、HeroUI、Tailwind、既存UI制約
  • 指摘は High / Medium / Low に分類すること
  • ユーザー指示やデザインシステム適用により当然変わる差分は指摘しないこと
  • 修正は依頼せず、レビュー結果だけ返すこと

レビューのためにサブエージェントを使える場合は使う。使えない場合は main Codex が同じ基準で自己レビューし、その旨を報告する。

6. High/Medium修正ループを回す

  1. サブエージェントの指摘を main Codex が検収する。
  2. 妥当な High/Medium を修正対象にする。
  3. Low は原則メモに残し、必須修正にしない。
  4. 修正で影響した検証を再実行する。
  5. 影響した画面・状態をBrowserで再撮影する。
  6. 指摘箇所と修正が影響する範囲を再レビューし、前提が変わらない確認結果は引き継ぐ。
  7. High/Medium が0件になるまで繰り返す。

以下の場合はループを停止し、残存理由を明示する。

  • ユーザー指示同士が矛盾している
  • 参照画像と実アプリ要件の両立ができない
  • 必須の外部データや認証を取得できず、または必要なAPI実装が許可範囲外で、受け入れ条件を確認できない
  • 修正が当初スコープを大きく超える

許可範囲内のAPI実装、ローカル起動、表示不良の修正は続行する。合意済みの正常差分を再び欠陥へ戻さず、新しい根拠のない全面レビューを繰り返さない。

7. 最終報告する

最終報告には次だけを簡潔に含める。

  • 実装した内容
  • High/Medium が残っていないこと、または残した理由
  • 実行した検証コマンド
  • Browser確認したURLとviewport
  • 主要変更ファイル
  • Low 指摘が残る場合は短く列挙

レビュー

まだレビューはありません。使ってみた感想をお寄せください。

同じリポジトリのスキル

概要と使いどころ

Rebuild a degraded AI image to remove crunchy textures and repeated-edit artifacts while preserving identity, style, and composition. Use for clean remakes, not ordinary retouching or upscaling.

日本語の概要は準備中です。原文の説明を表示しています。

ryryo/dot-claude-dev32026年10月10日 更新

analyze-seminar-video

無料日本語概要

セミナー・講義・ウェビナー・研修・実演動画をローカルで文字起こしし、内容を分析して、必要なスライド画像や動画クリップ付きのHTML/Markdown資料を作る。動画から学習資料・実践ガイドを作りたい場合に使う。映像作品の再現設計やCanvas生成は対象外。

ryryo/dot-claude-dev32026年10月10日 更新

architecture-refactor-loop

無料日本語概要

責務・依存方向・状態や副作用の境界を監査し、既存挙動を保って段階的にリファクタリングする。read-only監査にも対応する。

ryryo/dot-claude-dev32026年10月10日 更新

astra-rules-refactor

無料日本語概要

AGENTS.mdや既存スキルをGPT-6 Astra向けに監査・整理するときに使う。契約と意図的な他モデル委譲を保ち、重複、過剰な手順、曖昧な停止条件を修正する。

ryryo/dot-claude-dev32026年10月10日 更新

character-sheet-imagegen

無料日本語概要

人物の参照写真から、同一性を保った複数アングルのキャラクターシートを生成・修正する。指定された身だしなみや撮影表現も整える。

ryryo/dot-claude-dev32026年10月10日 更新

character-to-codex-pet

無料日本語概要

既存キャラクター画像を、承認制でピクセルアートの正準画像へ変換し、3状態パイロット、クロマ前処理、状態間ジオメトリ検証、9状態生成、遷移QA、仮配置、アプリ内確認、ロールバック可能な正式配置まで行う。キャラクターからCodexペットを作る依頼に加え、ジャンプで小さくなる、状態ごとに身長が変わる、足元が跳ねる、クロマ縁が出る、アニメーションを修復したい依頼で使用する。

ryryo/dot-claude-dev32026年10月10日 更新

ryryo のスキルをすべて見る

このスキルの問題を報告する