Transcript
00:00:00これは Impeccable です。設計に関する深い知識をハーネスに提供し、
00:00:0537のデザイン・アンチパターンを特定することで、素晴らしいウェブサイトの構築を支援し、
00:00:12AIがよくある平凡なデザインを生成するのを防ぎます。さらに、ブラウザ上で人間が
00:00:17非常に細かなデザイン調整を行う機能も備えています。しかし、これは単に
00:00:22Markdownファイルを生成してトークンを浪費するだけのツールか、それとも実用的か？見ていきましょう。
00:00:28以前、Claudeのコード作成を支援するプラグイン「Superpowers」の動画を公開しましたが、
00:00:36これはそれのデザイン版のようなものです。AIが優れたデザインやサイトを作成できるよう、
00:00:42エージェントの種類を問わず構造化されたワークフローを提供します。開発者は Paul Backhouse 氏で、
00:00:47かつて JQUI を作った独立系製品エンジニアです。懐かしく思う方もいるでしょう。
00:00:53彼は Impeccable の進捗を長期間ツイートし続けており、
00:00:58それが人気の理由の一つだと思います。では試してみましょう。私の映画ツールの
00:01:02ホームページを Impeccable で構築し、頭の中にあるデザインを形にしてみます。
00:01:08うまくいきますかね。主に 4つのサブコマンド（teach, shape, craft, iterate）を使います。
00:01:14iterate は厳密にはサブコマンドではありませんが、動画の後半で説明します。
00:01:19すでに forsales/skill.sh を使って Impeccable をインストールし、
00:01:25コードとデザインファイルを格納する空のディレクトリを作成しました。
00:01:29Claude Code を開き、まず Impeccable の「teach」サブコマンドを実行します。
00:01:34これは製品の対象者を教えるもので、project.md ファイルが作成されます。
00:01:40そこには製品の目的、ブランド、デザイン原則などの重要事項が含まれます。実行すると、
00:01:46ディレクトリが空であると表示され、第1ラウンドの質問が始まります。
00:01:51ここで重要なのは、「ブランド」と「製品」の違いを理解しておくことです。
00:01:55製品のデザインスタイルは、サンセリフ体とセミボールドの階層を用いたもので、
00:02:00実用的なアプリに最適です。一方、ブランドのデザインスタイルはセリフ体や
00:02:05イタリック体を多用し、エディトリアルや雑誌に適しています。
00:02:10詳細は Impeccable のサイトにありますが、今回は「製品」スタイルを選びます。
00:02:153つの質問に答えて実行すると、
00:02:19性格、参考サイト、ターゲット層など、さらにいくつかの質問が表示されます。
00:02:24好みのサイト名やターゲット層など、3つの追加質問に答えました。
00:02:28回答後、Impeccable は product.md を作成し、概要を表示してくれます。
00:02:33次に、design.md を作成するために「document」を実行するか、
00:02:38ホームページのデザイン言語を考案するために「shape」を実行するか尋ねられます。
00:02:43設計書を作る前に、まずはデザインのイメージを固めたいので「shape」を選択します。
00:02:48実行すると、デザイン指示書を作成するための新たな質問が始まります。
00:02:53場合によっては、Impeccable は画像モデルを使用して「プローブ（試作画像）」を
00:02:59作成することがあり、これがデザインをさらに洗練させるのに役立ちます。
00:03:04しかし Claude Code には画像モデルがないため、GPT image 2 を使うように設定してみます。
00:03:08色のスタイル、ページレイアウト、使用する技術スタックについての質問に答えました。
00:03:14シェルに OpenAI のキーがあることを伝え、
00:03:20GPT image 2 でプローブを作成させます。プローブの作成が完了したようです。
00:03:25案A、B、Cから選びましょう。これが案Aで、見た目がとても気に入りました。
00:03:30これが案B。これも良いですが、案Aほどではありません。そして案Cですが、
00:03:35AI画像はよくできていますが、個人的な勝者は間違いなく案Aです。
00:03:40詳細を伝えると、機能概要やユーザーのアクションを含むデザイン指示書が作成されます。
00:03:45最後に提示された質問に答えれば、デザインの生成が始まるはずです。
00:03:50完了しました。次は本来「Impeccable Craft」を実行するステップですが、
00:03:55ツールが代行を提案してくれたので「Yes」を押しました。今、サイトを構築中です。
00:04:00Astro と Tailwind を使用しています。約5分後、
00:04:06コーディングが完了し、Astro ページと Tailwind の設定ファイルが作成されました。
00:04:11実行内容の詳細な要約も表示され、非常に素晴らしい出来栄えです。
00:04:17URLのコピー機能、macOS版の案内、まだ機能しませんがテスト動画の配置、
00:04:23さらに、このエフェクトを使った製品情報セクションもあります。
00:04:28ビフォー・アフターをスライドできるのは素晴らしい。インストールコマンドや、
00:04:33正常に動作するアコーディオン形式の FAQ もあります。ただ、いくつか課題もあります。
00:04:37例えば、この閉じるボタンが非常に小さかったり、コマンドのレイアウトが
00:04:43少し不自然だったりします。修正（iterate）段階に入る前に、design.md を作成し、
00:04:49別セッションでもデザイン情報を保持できるようにします。「Impeccable Document」を
00:04:54実行すると、色、タイポグラフィ、さらには CSS やスタイルまで網羅した
00:04:59設計書が作成されます。ここからデザインをブラッシュアップしていきます。
00:05:06先ほど言った通り、これは単一のコマンドではなく、複数の手法を含みます。
00:05:10例えば「animate」で特定の部分に動きをつけたり、
00:05:15「bolder」で強調したりして、ビフォー・アフターを比較できます。
00:05:20また「refine」セクションの機能を使ったり、自動で仕上げ（polish）を
00:05:25行わせることも可能です。最も良い方法は、変更したい箇所をエージェントに伝え、
00:05:30サブコマンドを個別に指示するのではなく、
00:05:35アルファ版の「Impeccable Live」を使うことです。これは Claude Code で実行できます。
00:05:39実行するとスクリプトがインストールされ、Astro サイトに接続し、
00:05:46ポート8000でサーバーを起動してライブサイトの変更を監視します。ブラウザで見ると、
00:05:52ピンクのオーバーレイが表示されています。例えばテキスト部分をクリックすると、
00:05:58強調や洗練などのオプションが表示され、もちろん指示を
00:06:03直接入力することもできます。「テキストを大きくして」と入力して実行すると、
00:06:09指示が直接エージェントに送られ、ライブサイトのコードが更新されます。
00:06:15変更が必要な箇所を特定した状態で、Claude Code にプロンプトが送信されました。
00:06:20納得がいくまで、サイトの各部分に対してこのような修正を続けられます。
00:06:25例えば、この読みづらいプログラムコードのセクションに指示を出し、
00:06:29バリエーションの数を選択して実行させます。すると、見た目が格段に
00:06:34格段に良くなり、コードが表示されているサイト内の全箇所に自動適用されました。
00:06:39以上、Impeccable、Claude Code、GPT image 2 を使って、
00:06:44ゼロから印象的なサイトを構築する流れでした。正直に言うと、これは
00:06:50「美しいものを作りたいが、細かいデザイン作業には深入りしたくない」人向けです。
00:06:55配置、角丸の半径、その他細部を厳密に制御したい場合は、
00:06:59Pencil のようなツールを使うのが良いでしょう。Pencil について詳しく知りたい方は、
00:07:04以前公開したこちらの動画をご覧ください。Impeccable 自体はモデルを選びませんが、
00:07:10Claude Code は現状、最適な選択肢とは言えないかもしれません。
00:07:15なぜなら、大規模な設計書を読み込む各サブコマンドで大量のトークンを消費し、
00:07:21Claude モデルの使用料は非常に高額だからです。
00:07:26もしやり直すなら、画像生成も可能な Codex CLI や Codex GUI を使うでしょう。
00:07:32それなら GPT image 2 モデルをわざわざ指定する必要もありません。
00:07:38Impeccable がハーネスの機能を認識して自動で処理してくれますし、
00:07:43GPT モデルの方が利用制限も緩やかです。では、最後に
00:07:47多くのYouTuberがやっているように、皆さんの視聴履歴に基づいた
00:07:53YouTubeのおすすめ動画を案内しますので、ぜひチェックしてみてください。
Community Posts
No posts yet. Be the first to write about this video!
Write about this video