Feima Code

シェーダーや3Dシーン、粒子の動きを全画面で描き、見出しを重ねたWebGL表現を制作。外部通信のない単一のHTMLファイルにまとめます。

• Webサイトのヒーロー動画表現
• 見出し付き生成アートの制作
• 3Dシーンや粒子表現の試作

デスクトップ向けランディングページの構成を灰色のボックスで描き、番号付きの注釈と仕様パネルで、配置や実装時の要点を共有するワイヤーフレームを作ります。

• デスクトップ向けLPの構成検討
• 開発担当への仕様メモ共有
• ナビや訴求エリアの配置確認

製品紹介、機能、利用者の声、料金、申し込みへの案内を備えたSaaSの紹介ページを作ります。DESIGN.mdの色や書体、配置に沿って単一のHTMLにまとめます。

• SaaS製品の紹介ページを作りたいとき
• 既存のデザイン方針に合わせたいとき
• 機能・利用者の声・料金をまとめたいとき

商品のお披露目や予告、背景ループに使う3〜10秒の短い動画を生成します。被写体や動き、照明を整理し、指定の長さと縦横比でMP4を保存します。

• 商品のお披露目動画を作りたいとき
• 動きのある短い予告の制作
• 雰囲気を伝える背景ループ作り

文章や知識を、小红书風の複数枚のカードにまとめるスキル。表紙から要点、まとめまでを大きな文字と柔らかな配色で構成し、投稿用にスクリーンショットを撮れます。

• ノウハウを知識カードに整理
• 小红书向けのカルーセル投稿作成
• WeChatの朋友圈向け画像作成

TwitterやXの投稿に添える、引用文やデータの横長カードを作ります。中央の短い文章に著者名やハンドル、ブランドの透かしを添え、画像として共有しやすく整えます。

• 短い引用文を投稿画像にしたいとき
• データをカードで共有したいとき
• 著者情報付きで気づきを共有

ブランドの存在理由や価値観、今後の方向性をパートナーやメディアへ伝える資料を、横スワイプや一覧表示で閲覧できる雑誌風のHTMLスライドに仕上げるスキル。

• パートナーやメディアへのブランド説明
• 創業者の提案資料や登壇資料の作成
• 商品説明・実績・顧客の声の資料化

画面構成を検討するための手描き風ワイヤーフレームをHTMLで作ります。方眼紙、付箋、ラフなグラフ、案を示すタブを使い、設計初期の考えを可視化します。

• ポータルやダッシュボードの初期構成を検討
• 複数案をタブラベルで示したいとき
• 画面の下書きにレビュー用の注釈を付ける

過去24時間のGmailの受信状況を、対応が必要なもの、注目情報、参考情報に整理します。Orbitの日次ダイジェストとして、Gmailのメール閲覧画面風に表示します。

• 過去24時間のGmailを振り返りたいとき
• 対応が必要なメールの確認
• 注目情報と参考メールの仕分け

新機能の課題・目標・対象範囲・成功指標を、一ページの製品要件書に整理します。利用者の要望や段階的な実施計画、未解決の質問もまとめ、HTMLで出力します。

• 新機能の要件書を作成したいとき
• 目標と対象外の範囲を共有したいとき
• 成功指標と測定方法の整理

複数の連携サービスから過去24時間の動きを集め、予定や対応待ち、開発状況を一つのダッシュボードで確認できる朝のブリーフィングを自動作成します。

• 朝に複数ツールの動きを確認したいとき
• 会議と対応待ちをまとめて把握したいとき
• 開発状況やアラートの確認

サービスの料金プラン、機能比較表、よくある質問をまとめたHTMLページを作成。プラン数や推奨表示を整え、契約前に内容を比べられる料金ページを試作するスキル。

• サブスクリプション料金ページの試作
• プラン別の機能を比較したいとき
• 個人向けと法人向けのプラン提示

ブランドの説明をもとに、紙の質感とコラージュを使った雑誌風の縦長ランディングページを作るスキル。画面幅への対応やスクロール時の動きも組み込みます。

• ブランドの紹介ページを作りたいとき
• スタジオのサービスと実績を紹介したいとき
• 仮画像でページ構成を確認したいとき

ランディングページや料金表、ドキュメント一覧などの試作を、付属テンプレートとレイアウトから組み立て、単一のHTMLファイルにまとめるスキル。

• 製品紹介ページを試作したいとき
• 料金プランの比較ページ作成
• ドキュメント一覧の画面設計

機能提案やロードマップ、設計レビューの資料を、意思決定に使う横送りのHTMLスライドに整理します。8種類から一つのテーマを選び、全ページの見た目を統一します。

• 新機能の採用理由を説明したいとき
• ロードマップのレビュー資料作成
• 技術設計の選択肢を判断したいとき

成長や資金消費、事業継続への道筋を経営陣が判断できるよう整理し、既存のデザインルールに沿った横スワイプ式のHTMLスライドにまとめるスキル。

• 経営陣向けの事業レビュー資料を作りたいとき
• 取締役会の意思決定用資料を用意したいとき
• 成長と資金消費をHTMLで説明したいとき

GitHubの直近24時間のPR、レビュー依頼、Issue、CI実行、マージを集約し、要確認事項を通知画面風の日次レポートに整理するスキル。

• 直近24時間のGitHub活動を振り返りたいとき
• レビュー依頼の確認
• CIの失敗を把握したいとき

粒子やフラクタル、データの動きを描く可視化画面を、重い計算をWeb Workerに分け、毎秒60フレームを目指す単一HTMLとして作るスキルです。

• 粒子や物理シミュレーションの試作
• フラクタルを可視化したいとき
• 音声やデータの可視化画面づくり

市場データを密に並べた取引分析ダッシュボードを、単一のHTMLで作成。明暗テーマの切り替えやチャートの詳細表示、コマンドパレットを備えた画面を用意します。

• 金融分析端末の画面を試作したいとき
• 市場情報を密に並べた画面の提示
• チャートの詳細表示や操作感の実演

ピクセルアートのキャラクター、大きな年号、動く文字や年表を組み合わせ、歴史や豆知識を紹介する画面録画向けのアニメーション付きHTMLを作るスキル。

• 歴史解説の一場面を作りたいとき
• 豆知識をピクセルアートで伝えたいとき
• 画面録画用のレトロな動きを作りたいとき

SNS向けの正方形カード3枚を、見出しがつながるシリーズとして作成します。ブランド表記や連番をそろえ、映画のような色調を持つHTMLにまとめます。

• Instagramの3枚投稿を作りたいとき
• LinkedInの連続投稿用デザイン
• Xのスレッド用カード制作

新聞紙風の背景と極太の文字、細い罫線で、スイス印刷物風のWeb試作を作ります。赤を差し色に使い、編集記事やポートフォリオを硬質な見た目にまとめます。

• 新聞風の編集ページを試作したいとき
• 制作会社のポートフォリオ制作
• マニフェストサイトの制作

Markdownやメモを、雑誌のように読みやすく整えた長文HTML記事に仕上げます。大きなタイトルと一列の本文に、引用やコードの専用スタイルを組み合わせます。

• Markdownを雑誌風の記事にしたいとき
• メモからエッセイを整えたいとき
• 長文ニュースレターのデザイン

Linearの過去24時間の課題更新、状態変更、担当割り当て、サイクル進捗を日次ダイジェストに整理するスキル。Orbitから自動実行されます。

• Linearの過去24時間の更新を確認したいとき
• 担当課題や停滞課題の注意点を把握したいとき
• サイクルの進捗と残り期間を確認したいとき