
プレビューギャラリー
類似の Skill
すべての Skill を見る手に入るもの
- 架空の Commonfold Collective を題材にした 20 ルートの作例:4 つのプロジェクトページ、3 つのメンバーページ、3 本の Journal 記事、Contact、Privacy、Accessibility、デザインされた 404。
- 動作するパーツ:1 つだけ開く原則アコーディオン、検索・並べ替え・空状態付きの作品フィルター、通常料金とコミュニティ料金の切り替え、FAQ、入力検証付きフォーム、リンクコピーのトースト。
- Newsreader と Figtree を埋め込んだ 1 つの自己完結ファイルに加え、スタイルガイド、画像プラン、サンプル名の残りを検出する組み込みチェック。
向いている人
- 実際のケーススタディに裏打ちされた、手作り感のある遊び心ある存在感を求めるデザインスタジオ、コレクティブ、市民参加型デザインのチーム。
- クラス、講師、プロジェクトを同じページ構成に当てはめられる版画スタジオ、スクール、小規模事務所。
- 角丸カードやストックフォトではなく、コラージュ画像、ちぎれた縁、テープを使いたいチーム。
向いていない人
- 落ち着いたミニマルな見た目が必要な企業ブランド。このデザインは鮮やかなカラーブロックと紙の質感が主役です。
- リアルタイムの予約や決済。フォームはページ内で完了を表示するだけで、バックエンドを接続するまで何も送信しません。
- 紫やバイオレットの面を軸にしたブランド。ライラックは小さなアクセントとしてのみ使われます。
ブランディング・ビジュアルシステムWeb デザイン・デジタル体験ホームページ作成エージェンシーサイト作成スタイル固定編集可能な出力エディトリアルセリフカラーブロックアコーディオン切り抜きポートレート集ペイントペーパーの風景ちぎり紙コラージュ
この Skill について

スタジオの概要、原則、プロジェクト、メンバーを Skill に伝えると、コラージュ風の Web サイトを丸ごと構築します。黒地に小さく中央寄せした Hero と描かれた切り絵の丘、温かみのあるクリーム色のページ、フラットなカラーブロック、白黒の切り抜きポートレートで構成されます。作例は架空の市民デザインスタジオ Commonfold Collective で、相互につながった 20 のルートを備えています。デフォルトの成果物は、どのブラウザでもオフラインで開ける 1 つの自己完結ファイルです。

手に入るもの
- Hero、原則のアコーディオン、引用帯、チームのストーリー、数値、プロジェクトのコラージュ、パートナーのコメント、Journal を備えた Home
- 中身のある下層ページ:詳細画像と数値付きのケーススタディ、メンバーページ、長文記事、定型メニュー付きのサービス、問い合わせと FAQ
- ちぎれた縁、テープ、ホバーでまっすぐに戻るわずかな傾き。控えめな表示アニメーションは、「視差効果を減らす」設定ではオフになります
- Newsreader と Figtree をファイルに埋め込み済みのため、ネットワークから読み込むものはありません

使い方
- 名前、一行の説明、3〜5 つの原則、プロジェクト、チーム、記事、連絡先を共有します。
- エージェントがすべてのコンテンツスロットを埋め、同じスタイルで新しいコラージュ画像を生成し、組み込みのチェックを実行します。
- デスクトップとスマホで全ページを確認し、変更したい点を普段の言葉で依頼します。

新しいコラージュ画像の生成には、お使いの画像ツールの利用料金がかかる場合があります。ブリーフにない内容はプレースホルダーのコピーとして下書きし、確認用に一覧にします。
始める前に必要なもの
- 用意するもの
- スタジオ名、一行の説明、それぞれに例を添えた 3〜5 つの原則 · 各ページに必要な情報を添えたプロジェクト、役割と短い経歴付きのチームメンバー · 記事やお知らせ、提供メニューと料金、住所、メールアドレス、営業時間
- 依存関係
- エージェントのマシン上の Node.js 18 以降。単一のオフラインファイルを構築する同梱スクリプトの実行に使用 · ファイル作成時のインターネット接続(フォントを一度ダウンロードして埋め込むため) · 新しいコラージュ画像を生成するための、エージェントの画像生成ツール
- 外部コスト
- エージェントの画像ツールでコラージュ画像を生成すると、そのツールの利用料金がかかる場合があります。同梱のニュートラルな素材の一部(Hero の丘、手、Journal 用の画像 2 点)は無料で再利用できます。
- 最終検証
- v1.0.2 — Claude Code / Claude Desktop / Cowork / Codex / ChatGPT
ユーザーレビュー
レビューを読み込み中…









