設計トークンの色を使い、回転台に載せたスピーカーの3Dプロダクト画像を生成します。旋盤加工のような断面形状から組み立て、スタジオ照明で見せます。
- スピーカーの商品画像を3Dで作りたいとき
- 回転台に載せたプロダクトを見せたいとき
- デザイントークンの色で3D画像を作りたいとき
feimacode/open-design-agent-kit1,0232026年10月31日 更新
無料GitHub で公開日本語紹介
open-design-design-system-from-url
Webサイトの色や書体、余白、ボタンの状態を調べ、DESIGN.mdとtokens.cssにまとめて見比べながら確認します。
原文原文の説明を見る
Make a design system from a website — measure its real colours, fonts, spacing and button states in a browser, write DESIGN.md and tokens.css that agree, and check the result side by side with the site before saving — use whenever the user wants a design system, brand kit, theme or tokens taken from a website or URL ("make a design system from stripe.com", "match our site's look", "extract the brand from this page"), even if they don't mention Open Design
feimacode/open-design-agent-kitスター 1,019(GitHub 1,019 + cccskills 0)
連携ツールPowerPoint
実行スコア 未検証
インストール方法を見るこんなときに便利
- Webサイトの配色や書体を再現したいとき
- ブランドのデザイントークンを整理したいとき
- サイト変更に合わせてスタイルを更新したいとき
日本語での紹介
できること
Webサイトをブラウザーで確認し、色、フォント、余白、ボタンなどの見た目を測って、デザインシステムにまとめます。測定結果をもとにDESIGN.mdとtokens.cssを作成し、両ファイルの値が一致するように整えます。元サイトの画面と、新しい設定を使ったサンプルを並べて確認できるレビュー画面も用意します。複数ページに差がある場合は、その違いを示して確認できます。
こんなときに便利
公開中のサイトに合わせたスタイルを別の制作物で使いたいときや、ブランドの色・書体・部品の見た目を整理したいときに向いています。自社サイトの更新に合わせて既存のデザインシステムを見直す場合にも使えます。参照するサイトが開けない場合は、ブランドガイドやCSS、テンプレート、スクリーンショットなどを材料にできます。
使い方の例
- 「このサイトからデザインシステムを作って」
- 「自社サイトの見た目に合わせてテーマを整理して」
- 「保存済みのスタイルをサイトに合わせて更新して」
注意点
サイトの測定にはブラウザーが必要です。ブラウザーが使えない場合、ページのHTMLやCSSから得られる情報に限られ、色やフォントの確認を求められることがあります。参照サイトのロゴや画像はコピーしません。自己ホストのフォントを取り込む場合はライセンスの確認が必要です。
この紹介文は、公開されている SKILL.md をもとに AI（OpenAI Codex）が作成しました。正確な仕様は下の原文を確認してください。
含まれるファイル（1）
- SKILL.md16.1 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日 更新