ノート

Claudeデザインワークフロー:アセットからエクスポートまで

フリーのプロンプト百科事典 Wikiprompt より

Ruben Hassid

2026年5月8日

Claudeデザインワークフロー:アセットからエクスポートまで Claudeでのデザインに関するステップバイステップガイド。セットアップ、デザインシステムの作成、効果的なプロンプティング、反復、検証、エクスポートをカバーします。

プロンプト内容保存

🌐
1. claude.ai/designを開く(専用URLがあります)。 2. 形式:ワイヤーフレーム、スライド、テンプレート、またはフリーフォーム。 3. ProまたはMaxプランでサインインする。 4. 私の完全なセットアップガイドを使用:https://t.co/ZY8Fg5D2ea。 プロンプトを実行する前に、DESIGN .mdを取得する: 1. すべてのブランドアセットをCoworkフォルダにドロップする。プロンプト:「デザインシステムをDESIGN .mdとして保存」 2. または、getdesign.mdから30秒で盗用する(Airbnb、Ferrari、Pepsi、任意のブランド)。 その後、ピクセルの説明はやめて、代わりにこれを貼り付ける: 「価格ページを構築。3つのティア、月次/年次トグル、モバイルでは固定CTA。ホームページのトーンに合わせる。」 良いプロンプトには、目標、レイアウト、コンテンツ、制約がある。DESIGN .mdを読み込んでページを構築する。 ピッチデッキの場合、スライドを直接依頼しないこと。 まず30秒のアニメーションビデオを生成し、同じチャット内で:「ビデオをスライドピッチデッキに変換」。 2つの場所で反復する: チャットでの構造変更:「3つの異なるレイアウトを提示。」 キャンバスでのピクセル変更。編集をクリックすると、緑色に光る。 エクスポート前に必ず検証する: 「WCAG 2.1 AA違反を修正案付きでリスト化。」 「デスクトップ、タブレット、モバイル版を生成。」 「ヒーローセクションのA/Bバリエーションを2つ提案。」 右上 → エクスポート。PPTX、PDF、スタンドアロンHTML、またはClaude Code形式のバンドルで。

ログインして完全なプロンプトを表示

次で続行:

ログインすると、次に同意したことになります: 利用規約 プライバシーポリシー

使い方

このプロンプトは productivity 向けに設計されています。上の内容をコピーして、お好みの AI ツールに貼り付けてください。

最良の結果を得るには、プレースホルダー(角括弧や大文字で示された部分)を具体的な要件に置き換えてください。

参考資料

カテゴリ:productivity| twitter| claude-design| design-workflow

ノート