設計トークンの色を使い、回転台に載せたスピーカーの3Dプロダクト画像を生成します。旋盤加工のような断面形状から組み立て、スタジオ照明で見せます。
- スピーカーの商品画像を3Dで作りたいとき
- 回転台に載せたプロダクトを見せたいとき
- デザイントークンの色で3D画像を作りたいとき
feimacode/open-design-agent-kit1,0232026年10月31日 更新
無料GitHub で公開日本語紹介
wireframe-mobile-flow
モバイルアプリの画面遷移を、横に並べた3〜4枚のスマートフォン枠で可視化するスキル。灰色の仮配置、操作を示す矢印、注釈で利用の流れを整理します。
原文原文の説明を見る
A lo-fi multi-screen MOBILE flow wireframe — three or four phone frames laid out in a row on a board, showing a connected user flow (Onboarding → Home feed → Item detail → Confirm). Grey-box content inside each device, dashed connector arrows + numbered step labels between screens, and a couple of annotation callouts. Reads like an app flow pinned to a whiteboard before any pixels are committed. Use when the brief asks for "mobile wireframe", "app flow", "user flow wireframe", "lo-fi mobile", "low fidelity", "线框图", "移动端线框", or "App 流程".
feimacode/open-design-agent-kitスター 1,023(GitHub 1,023 + cccskills 0)
実行スコア 未検証
インストール方法を見るこんなときに便利
- 導入からホームまでの流れを整理したいとき
- 商品詳細から確認までの導線を見たいとき
- デザイン前に画面遷移を検討したいとき
- 操作名と注釈付きでフローを共有したいとき
日本語での紹介
できること
モバイルアプリの利用の流れを、3〜4枚のスマートフォン画面を横に並べた一枚のボードにします。ワイヤーフレームという、画面の構成を簡略化した図を使い、画像や文章は灰色のブロックで表します。画面間には破線の矢印と番号付きの操作名を置き、1〜2個の注釈で設計上の意図を添えます。
こんなときに便利
導入画面からホーム、商品詳細、確認画面までのつながりを検討する場面に向いています。色や装飾を作り込む前に、各画面の役割と次に進む操作を確認したいときに使えます。画面内の構成を簡潔に保ちながら、矢印や付箋風の注釈で流れを示します。
使い方の例
「Onboarding、Home feed、Item detailの3画面を横に並べ、操作名付きの矢印と注釈を2個入れて」 「商品詳細からカート追加、確認までの流れを、灰色の仮配置で図にして」
注意点
出力はCSSを内包した単一のHTMLです。外部JavaScriptや外部画像は使わず、画像部分はCSSやSVGの仮配置で表します。書体にはGoogle Fontsを使う指定があります。完成版のUIではなく、画面構成と遷移の確認を目的とした出力です。
この紹介文は、公開されている SKILL.md をもとに AI（OpenAI Codex）が作成しました。正確な仕様は下の原文を確認してください。
含まれるファイル（1）
- SKILL.md4.2 KB
SKILL.md（原文）
インストールする前に、エージェントに与えられる指示の中身を確認できます。
レビュー
まだレビューはありません。使ってみた感想をお寄せください。
コメント
ログインなしで書き込めます。使ってみた感想、質問、動かなかった環境などを気軽にどうぞ。
まだコメントはありません。最初のコメントを書いてみませんか。
同じリポジトリのスキル
形状やロゴから3Dオブジェクトを作り、スタジオ風の光で見せます。静止画、背景透過画像、回転動画として書き出せます。
- 商品紹介用の3D画像を作りたいとき
- ロゴを立体的に見せたいとき
- 3Dモデルを回転動画にしたいとき
feimacode/open-design-agent-kit1,0232026年10月31日 更新
`.glb`形式の3Dモデルを読み込み、中央に配置して見やすい大きさに整え、柔らかな地面の影を添えた商品画像として描画します。
- `.glb`モデルから商品画像風の表示を作りたいとき
- ボトルの3Dモデルを見やすくプレビューしたいとき
- モデルを中央配置し、柔らかな影を加えたいとき
feimacode/open-design-agent-kit1,0232026年10月31日 更新
ブランドのSVGロゴを金属の立体表現に仕上げ、ブラッシュドゴールドと面取りを施してゆっくり回転する映像にするスキルです。
- SVGロゴを立体化したいとき
- 金色の回転ロゴを作りたいとき
- ブランドマークを映像で見せたいとき
feimacode/open-design-agent-kit1,0232026年10月31日 更新
部屋や中庭など複数の物体がある小さな3D空間を計画して制作します。空の光と無料のCC0素材で仕上げ、静止画やカメラの移動動画として見せられます。
- 小さな部屋や中庭を3Dで作りたいとき
- ミニチュア風のビジュアルを作りたいとき
- 3D空間の静止画や移動動画を作りたいとき
feimacode/open-design-agent-kit1,0232026年10月31日 更新
夕暮れの石造りの中庭を、空や石畳、壁、真鍮のランタン、木製プランターと10秒のカメラ移動で表現した3Dシーンの作例です。
- 夕暮れの中庭の3D作例を見たいとき
- 石造りの空間表現を参考にしたいとき
- カメラ移動の短い映像を確認したいとき
feimacode/open-design-agent-kit1,0232026年10月31日 更新