
プレビューギャラリー
類似の Skill
すべての Skill を見る手に入るもの
- シングルフレーム Hero の完全なソースコード。コンポーネントファイルと実行可能な使用例がセットで、そのまま貼り付けて編集できます。
- 文書化されたビジュアル仕様。カラーパレット、文字サイズの体系、角丸、アイコンの線幅、モーションのタイミングをすべてトークンとして 1 か所で編集できます。
- デスクトップからスマートフォンまで、調整済みのレスポンシブブレークポイント。
向いている人
- Hero セクションが必要で、白紙のキャンバスではなく完成したものがほしい場合。
- 画像が配置済みの状態で、最初の画面を表示した瞬間から完成した見た目にしたい場合。
- アップデートを追い続ける依存パッケージではなく、読みやすく編集できるソースコードがほしい場合。
向いていない人
- 成熟したデザインシステムをすでに運用しているチーム。このパレットや文字サイズの体系が既存のものと衝突します。
- バージョン管理された npm パッケージを求める方。提供されるのは自分で保守するソースコードです。
- ナビゲーション、フォーム、認証、決済が必要なプロジェクト。このブロックはいずれも対象外です。
ブランディング・ビジュアルシステムプロダクトローンチ・アプリグロースWeb デザイン・デジタル体験UI ビジュアル作成ホームページ作成LP 作成編集可能な出力洗練されたビジュアル初心者向けウォームニュートラルティールアクセントエディトリアル
この Skill について

ブロックを 1 つ貼り付けるだけで、ページの最上部が完成します。見出し、補足の 1 行、ボタン、アートワークがすでにぴったり収まっています。レイアウト作業も、グレーのまま残る枠もありません。
手に入るもの
- シングルフレーム Hero の完全なソースコード。コンポーネントファイルと実行可能な使用例がセットで、そのまま貼り付けて編集できます。
- 文書化されたビジュアル仕様。カラーパレット、文字サイズの体系、角丸、アイコンの線幅、モーションのタイミングをすべてトークンとして 1 か所で編集できます。
- デスクトップからスマートフォンまで、調整済みのレスポンシブブレークポイント。
使い方
- セクションを置く場所をアシスタントに伝えてください。まずプロジェクトを読み込み、そのプロジェクトの書き方に合わせてブロックを書きます。
- テキストを自分の言葉に差し替えます。文字サイズや余白はそのまま崩れません。
- アクセントカラーを 1 か所で変えれば、ブロック全体が追従します。
- 公開前にスマートフォンで確認してください。もともとスマートフォンでも崩れないように作られています。
始める前に必要なもの
- 最終検証
- v1.0.1 — Claude Code / Claude Desktop / Cowork / Codex / ChatGPT
ユーザーレビュー
レビューを読み込み中…







