AIFCC
記事一覧へ
claude-setupclaude-workflowai-thinking

Claude CoworkはClaude Code上で動作する

12127
Claude Code CoworkはClaude Codeの上に構築されています。Claudeのコーディング環境もそうです。本物のビジネス成果を生み出しているほとんどの真剣なAI自動化ワークフローもそうです。 私はClaude Codeの専門家ではありません。以下の内容のほとんどは、このニュースレターを調査・執筆しながら学んだものです。開発者ではなくマーケターとしてアプローチしました。このようなツールの周りにある障壁はほぼなくなっています。数時間の実地学習で本物の結果が得られます。 ## Claude Codeとは実際に何か ターミナルにインストールするコマンドラインツールです。マシン上でローカルで実行されます。ファイルを直接読み取り、書き込み、作成、変更します。APIを呼び出します。ウェブを閲覧します。並行してリサーチを実行するサブエージェントを生成します。あなたが書いたことのないPythonスクリプトを実行します。 コンピュータの中に住んでいて、それらを迂回するのではなくあなたのツールと一緒に作業するAIと考えてください。 使用するために開発者である必要はありません。 ## Claude Codeの使い方(初級) ### セットアップ ステップ1. 有料のClaudeプランを取得してください。少なくとも月20ドルのProが必要です。Claude Maxは重いワークフローのためにより多くの使用量を提供します。 ステップ2. Claude Codeをインストールしてください。ターミナルを開いてください。Macでは、Spotlightを開いて「terminal」と入力します。Windowsでは、CMDまたはPowerShellを使用します。code.claude.com/docsのインストールコマンドを実行します。約2分かかります。 ステップ3. 認証してください。ターミナルに「claude」と入力します。Claudeアカウントでログインするよう促されます。手順に従います。 ステップ4. プロジェクトフォルダに移動してください。ターミナルで、Claude Codeを作業させたいフォルダに移動します。再度「claude」と入力します。実行中です。 ターミナルが初めての場合は、代わりにIDEを通じてClaude Codeを使用してください。推奨される2つのオプションはVS Code(無料、Microsoftから、code.visualstudio.com)とWindsurf(新しく、よりAIネイティブ)です。どちらも左側にファイルを表示しながら右側のグラフィカルなチャットパネルを通じてClaude Codeを実行できます。生のターミナルは不要です。 VS CodeにClaude Codeを追加するには:Extensionsタブに移動し、「Claude Code」を検索し、Anthropicのものをインストールし、エディタパネルに表示されるClaudeアイコンをクリックします。 ### 無料オプション(トレードオフあり) Ollamaを通じてローカルのオープンソースモデルでClaude Codeをゼロコストで実行できます。Ollamaをインストールし、qwen3-coderやgpt-oss:20bのようなモデルをプルし、ローカルエンドポイントにClaude Codeを向けます。APIフィーやデータがマシン外に出ることはありません。 使える体験のために少なくとも32GBのRAMが必要です。アウトプットの品質はClaudeのモデルより明らかに低いです。インターフェースを学ぶには良い。このニュースレターの後の部分にあるマルチステップワークフローには十分ではありません。 セットアップガイドはdocs.ollama.com/integrations/claude-codeにあります。 ## CLAUDE.mdファイル これはClaude Codeで最も高いレバレッジを持つものです。 CLAUDE.mdファイルはプロジェクトフォルダに置くテキストファイルです。Claude Codeはすべてのセッションの開始時に自動的に読み込みます。1つのメッセージを入力する前にコンテキストに注入されます。 このプロジェクトのための常設のブリーフと考えてください。Claude Codeにプロジェクトが何のためか、どのように振る舞ってほしいか、何をしてはならないか、使用するツールと規約、この作業に特有の制約を伝えます。 Claude Codeを使うすべてのセッションはコールドに始まります。前回の記憶はありません。CLAUDE.mdは、毎朝ブリーフする白紙のスレートではなく、あなたの仕事を知っているツールのように感じさせるものです。 最初のCLAUDE.mdは詳細である必要はありません。任意のプロジェクトフォルダで/initを実行すると、Claude Codeはファイルを読んで自動的に書いてくれます。フォルダにあるものを分析し、作業指示のサマリーを作成します。その後、時間をかけて洗練させていきます。 **良いCLAUDE.mdのルール:** - 最も重要な制約を一番上に置く。Claude Codeには優先性バイアスがあります。最初に読むものが最も強く定着します。 - 箇条書きと短い見出しで書く。高い情報密度は散文より優れています。 - 最大200〜500行。それより長いとトークンコストがかかり出力品質が低下します。 - APIドキュメント全体を貼り付けない。サマリーを与えて、必要なときに残りを取得させます。 - Claude Codeが同じ間違いを繰り返すときに更新する。同じ問題に2度引っかかったら、ルールを追加します。 ## 権限モード Claude Codeには4つのモードがあります。理解することで使い方が変わります。 **編集前に確認**がデフォルトです。Claude Codeはファイルを変更する前に許可を求めます。安全ですが遅い。複雑なビルド中に個々の編集を承認するよう求められている場合は、モードを切り替えてください。 **自動的に編集**は既存ファイルの変更を自動承認しますが、新しいファイルを作成する前はまだ確認します。ほとんどの作業に適した良い中間点です。 **権限をバイパス**はすべてのプロンプトを削除します。Claude Codeは中断なく作業します。有効にするには、ターミナルからClaude Codeを起動するとき--dangerously-skip-permissionsフラグを追加します。単にclaudeではなくclaude --dangerously-skip-permissionsと入力します。 これは知識作業のための経験豊富なほとんどのユーザーが最終的に使うところです。リスクは現実ですが、重要でないフォルダで作業する場合は低いです。Linuxマシンでバイパス権限を実行していた人がデータを失ったという広く共有されたインシデントがありました。コマンドは有効でした。コンテキストが間違っていました。意識して使用してください。 **プランモード**は初心者が最も過小評価するものです。 ## プランモード 1分の計画が10分の構築を節約します。これはモチベーションの言葉ではありません。トークンの経済学です。 実際の数学はこうです。計画なしに何かを構築します。間違っています。再構築します。合計コスト:構築時間+再構築時間+両方で消費されるトークン。まず計画します。Claude Codeは1つのファイルに触れる前にアプローチの問題を特定します。合計コスト:5分の計画+1回の正しいビルド。 プランモードは読み取り専用です。Claude Codeはプロジェクトを調査し、ファイルを読み、ドキュメントを確認し、何も実行する前に計画を作成します。計画は飾りではありません。荷重を負うものです。複雑なビルドで節約したすべての時間は、最初に5分をプランモードに費やすことから来ました。 使い方:チャットパネルの下部にある権限トグルで「プランモード」をクリックします。構築したいものを説明します。Claude Codeに計画を作成させます。読んでください。何かおかしければ押し戻します。計画が正しく見えたらバイパス権限に切り替え、構築させます。 ## コンテキスト管理 コンテキストはClaude Codeの希少なリソースです。うまく管理することが、スムーズなビルドと劣化したビルドの違いです。 **知っておくべきスラッシュコマンド** 62個すべてを覚える必要はありません。最も重要なものを学んでください: - /plan — 複雑なタスクの前にプランモードを開始 - /context — コンテキストウィンドウを消費しているものを正確に確認 - /compact — コンテキストを解放(50%頃、95%ではなく) - /clear — 新しいタスクに切り替えるときにコンテキストをリセット - /model — セッション中にモデルや推論レベルを切り替え - /init — 最初のCLAUDE.mdを自動生成 - /doctor — インストールと認証の問題を診断 - /rewind — Claudeが脱線したときに元に戻す(またはEscを2回押す) - /permissions — バイパスモードを使う代わりに安全なコマンドを事前許可 - /btw — メインタスクを中断せずにサイドの質問をする 任意のセッションで/contextを実行して、コンテキストウィンドウを消費しているものを正確に確認します。システムプロンプト、ツール、MCPツール、メモリファイル、スキル、メッセージとその正確なトークン数が表示されます。ほとんどの人は驚きます。1つのメッセージを入力する前に、システムレベルのオーバーヘッドだけでウィンドウの15〜20%を使っていることが多いです。 ## 実際に構築できるもの ここでClaude Codeが生産性ツールからビジネスインフラ層になります。 以下の各ユースケースはスキルとして構築されています。スキルは.claude/skills/フォルダにあるMarkdownファイルです。Claude Codeはオンデマンドで読み取り、ステップバイステップのワークフローとして従います。一度定義すると、1行でワークフロー全体が実行されます。 ### コネクタ層 上記のすべてのスキルは、適切なコネクタがアクティブな瞬間により有用になります。Google SheetsをつなぎBrightDataでリードスクレイピングスキルが結果を直接アップロードします。GmailをつなぎEmairメール分類スキルが実際の受信トレイを読んでラベルをつけます。FigmaをつなぎBrightDataで構築したインターフェースが編集可能なフレームとしてデザインキャンバスに届きます。 スキルがワークフローを提供します。コネクタがライブデータと宛先を提供します。コネクタなしではローカルファイルで作業しています。コネクタがあれば、ビジネスがすでに依存しているツールの内部で操作を実行しています。 Claude Desktopの設定 > コネクタに移動します。50以上の統合がリストされています。一度認証します。以降のすべてのセッションで自動的に取り込まれます。 **最初にインストールする価値がある4つのMCPサーバー:** - **Context7**:最新のライブラリドキュメントをコンテキストに取り込みます。Claudeが古いAPIをハルシネーションするのを防ぎます。 - **Playwright**:Claudeにブラウザ自動化を与えます。アプリ自体をナビゲートしてUI機能を実装、テスト、検証できます。 - **Excalidraw**:Claudeがプロンプトから手書きスケッチとしてアーキテクチャ図やフローチャートを生成できます。 - **DeepWiki**:任意のGitHubリポジトリの構造化ドキュメントを取得します。ClaudeをリポジトリにポイントするとREADMEファイルをチャットに貼り付けずに全体像を把握します。 ### リードスクレイピング ターゲット業界をスクレイプし、AIでリードを分類し、連絡先メールをエンリッチし、すべてをGoogle Sheetにアップロードするスキル。 スキルを構築します。Claude Codeを開いて貼り付けてください: ``` .claude/skills/フォルダにlead-scraping.mdというClaude Codeスキルファイルを作成してください。 スキルは次のことをすべきです: 1. ウェブ検索を使ってターゲット業種と場所のビジネスリードをスクレイプ 2. AIで各リードを分類(事業者名、ウェブサイト、電話、カテゴリ) 3. 公開されている場合、各リードの連絡先メールをエンリッチ 4. すべての結果をGoogle Sheetにアップロード ユーザーから3つの入力を受け取る: - 業種(例:歯科医、会計士、弁護士) - 場所(例:大阪日本、東京) - 必要なリード数 スキルが呼び出されたときにClaude Codeが従うステップバイステップのMarkdownチェックリストとして書いてください。 ``` 1行で実行します: ``` lead-scraping スキルを使用してください。 業種:歯科医 場所:大阪、日本 必要なリード数:20 このGoogle Sheetにアップロード:[シートURL] ``` ### 提案生成 ブリーフ入力フォーム、あなたの声でAI生成された提案書、承認ボタン付きのクライアント向けビュー、支払いリンクフィールドを備えた完全な提案ジェネレーター。PandaDocのサブスクリプションなし。提案書あたりのコストなし。 プランモードを使って構築します。まずプランモードに切り替えてから貼り付けてください: ``` /plan 以下を含む提案ジェネレーターウェブアプリを構築してください: - 簡単な入力フォーム(クライアント名、業種、スコープ、予算) - brand-voice.mdファイルを使って私の声で書かれたAI生成の提案書出力 - 承認ボタン付きの提案書のクライアント向けビュー - 送信前に手動で追加できる支払いリンクフィールド - /proposalsフォルダにMarkdownファイルとして保存された各提案書 プレーンHTML、CSS、JavaScriptを使用。フレームワークなし。 計画する前にこのフォルダのすべてのファイルを読んでください。 構築を始める前に明確化の質問をしてください。 ``` ### ウェブサイト生成 気に入ったサイトのスクリーンショットを撮ります。コンテンツとブランドガイドラインとともにClaude Codeに渡します。テンプレートやページビルダーに触れることなく、完全にデプロイ可能なウェブサイトを取得します。 ビルドします。参照スクリーンショットをターミナルにドラッグし、次を貼り付けます: ``` デザインが気に入ったウェブサイトのスクリーンショットと私自身のコンテンツをお渡しします。参照のビジュアルスタイルとレイアウトに合わせながら、私のコンテンツを使った完全なシングルページウェブサイトを構築してください。 私のコンテンツ: 見出し:[見出し] サブ見出し:[サブ見出し] キーポイント:[ポイント1]、[ポイント2]、[ポイント3] CTA:[CTAテキスト] ブランドカラー:[HEXコード] 埋め込みCSSを持つ単一HTMLファイルとして構築してください。 3つのレイアウトバリアントを作成してください:version-a.html、version-b.html、version-c.html 並行して実行してください。 ``` ## Claude Codeの使い方(中級) ### 並列エージェントでClaude Codeワークフローを実行 クライアントに何かを提供する前に知っておくべきことがあります。 私はこのようにアプローチしています:クライアントの完全なコンテキストを持つプロジェクトフォルダをセットアップします。誰をターゲットにするか。どのように話すか。彼らにとって適格なリードがどのように見えるか。 Claude Codeはすべてのセッションの開始時にそのコンテキストを読み込みます。だから私が構築するすべてのワークフローはすでにクライアントの世界を知っています。 それが本当のレバレッジです。(サービスプロバイダーとしての迅速な提供も) 今実行している2つのワークフローをご紹介します。 **ワークフロー1 - ターゲットリスト構築** クライアントがLinkedInの見込み客でいっぱいのCSVを落とします。1つのコマンドがすべてを開始します→この場合「wf1-qualify-list」 オーケストレーターがファイルを読み、列を把握し、クリーンアップします。次にリードを小さなバッチに分割し、並列エージェントを生成します—一度にすべて、一つずつではなく。 各エージェントがBright DataをcallしてLinkedInプロフィールと会社データを同時に取得します。 結果がマージされます。ICPスコアリングが実行されます。適格なリードだけが反対側から出てきます。残りはサイレントに削除されます。 シンプルに考えると:厨房のようなものです。コマンドはオーダーを呼ぶヘッドシェフ。エージェントはラインクック、それぞれが同時に自分のステーションで作業。スキルは各ステーションの上に固定されたレシピ。5人のクックを調整する1人のシェフは、1人で何もかもするシェフより常に速い。 **ワークフロー2 - アウトリーチ準備** これはワークフロー1が止まったところから始まります。適格なリードを取り、パーソナライゼーションシグナルのために最近のLinkedIn投稿をスクレイプし、次のラウンドの並列エージェントを生成します—今回はクライアントの声でコネクションメッセージを書いています。 しかしチェックポイントがあります。クライアントはまず2つのテストメッセージを見ます。トーンを承認します。その後でのみフルバッチが実行されます。サプライズなし。メッセージとリードデータがアウトリーチ自動化のためのAimfoxとCRMとしてのHubSpotにプッシュされます。1つのコマンド。最初から最後まで。 ボーナス:ワークフロー3は次です。それらのリードがHubSpotに座ったら、次の動きは市場シグナルです。関連ニュースをスキャンし、重要なものをスコアリングし、既存の連絡先に対してマッチングし、新しいアウトリーチトリガーを作成するワークフロー。 ### ワークフローをクライアントに移行する 各ワークフローはZIPプラグインです—コマンド、エージェント、スキル、すべて内部に。ローカルで構築し、パッケージ化し、クライアントのClaude Codeダッシュボードにインストールしました。今では/workflow-1または/workflow-2を実行して全体が起動します。または GitHubリポジトリを作成してクローンする。 2つのレベルを見てきました。セットアップ。CLAUDE.md。権限モード。スキル。Claude Codeをあなたの仕事を知るツールのように感じさせるビルディングブロック。 次に実際の配信がどう見えるか。並列エージェント。実際のクライアントワークフロー。1つのコマンドから実行される適格なリードとアウトリーチ準備。 初級と中級の差は技術的能力ではありません。繰り返しです。本物のものを構築し、エラーに当たり、修正し、次のものを構築することで差は縮まります。 最初のCLAUDE.mdは完璧である必要はありません。最初のスキルファイルはすべてのエッジケースをカバーする必要はありません。今日終わるほど小さいものから始めてください。 1つのワークフロー。1つのスキル。1つの本物のアウトプット。 それがレッスン全体です。 さらに進みたいですか?完全なニュースレターは上級レベルもカバーしています—Claude Codeがエージェンシー全体を運営するとき何が起きるか。 こちらで読む → https://charliehills.substack.com/p/claude-code-beginner-advanced
原文を表示 / Show original
Claude Code Cowork is built on Claude Code. So is Claude’s coding environment. So are most of the serious AI automation workflows producing real business results. I am not a Claude Code expert. I learnt most of what follows while researching and writing this newsletter. I came at it as a marketer, not a developer. The barrier around tools like this is largely gone. A few hours of learning-by-doing get you real results. What Claude Code actually is A command-line tool you install in your terminal. It runs locally on your machine. It reads, writes, creates, and modifies files directly. It calls APIs. It browses the web. It spawns sub-agents to run research in parallel. It executes Python scripts you have never written. Think of it as an AI that lives inside your computer and works with your tools, not around them. You do not have to be a developer to use it. How to Claude Code (Beginner) Getting set up Step 1. Get a paid Claude plan. You need at least Pro at $20/month. Claude Max gives more usage for heavy workflows. Step 2. Install Claude Code. Open your terminal. On Mac, open Spotlight and type “terminal.” On Windows, use CMD or PowerShell. Run the installation command from code.claude.com/docs. Takes about two minutes. Step 3. Authenticate. Type “claude” in your terminal. It will prompt you to log in with your Claude account. Follow the steps. Step 4. Navigate to a project folder. In your terminal, go to whatever folder you want Claude Code to work in. Type “claude” again. You are running. If the terminal is new to you, use Claude Code through an IDE instead. The two recommended options are VS Code (free, from Microsoft, at code.visualstudio.com) and Windsurf (newer, more AI-native). Both let you run Claude Code through a graphical chat panel on the right while your files sit on the left. No raw terminal required. To add Claude Code to VS Code: go to the Extensions tab, search “Claude Code,” install the one from Anthropic, and click the Claude icon that appears in your editor panel. Free option (with tradeoffs) You can run Claude Code with local open-source models through Ollama at zero cost. Install Ollama, pull a model like qwen3-coder or gpt-oss:20b, and point Claude Code at your local endpoint. No API fees or data leaving your machine. You need at least 32GB of RAM for a usable experience. The output quality is noticeably lower than Claude’s own models. Good for learning the interface. Not enough for the multi-step workflows later in this newsletter. Set up guide at docs.ollama.com/integrations/claude-code. The CLAUDE.md file This is the single highest-leverage thing you can do in Claude Code. The CLAUDE.md file is a text file that sits in your project folder. Claude Code reads it automatically at the start of every session. It is injected into the context before you type a single message. Think of it as the standing brief for this project. It tells Claude Code what the project is for, how you want it to behave, what it should never do, the tools and conventions you use, and any constraints specific to this work. Every session with Claude Code starts cold. No memory of last time. The CLAUDE.md is what makes it feel like a tool that knows your work rather than a blank slate you brief every morning. Your first CLAUDE.md does not need to be elaborate. Run /init in any project folder and Claude Code will read through your files and write one automatically. It analyses what is in the folder and produces a summary with working instructions. Then you refine it over time. Rules for a good CLAUDE.md: Keep the most important constraints at the very top. Claude Code has primacy bias. The first things it reads stick hardest. Write in bullet points and short headings. High information density beats prose. 200 to 500 lines maximum. Longer than that and you are paying token costs that reduce output quality. Never paste entire API documentation into it. Give Claude Code a summary and let it fetch the rest when required. Update it when Claude Code keeps making the same mistake. If it trips on the same issue twice, add a rule. Permission modes Claude Code has four modes. Understanding them changes how you use it. Ask Before Edits is the default. Claude Code asks permission before changing any file. Safe, but slow. If it is asking you to approve every individual edit during a complex build, switch modes. Edit Automatically auto-accepts changes to existing files but still asks before creating new ones. A good middle ground for most work. Bypass Permissions removes all prompts. Claude Code works without interruption. To enable it, add the flag --dangerously-skip-permissions when launching Claude Code from your terminal. Type claude --dangerously-skip-permissions instead of just claude. This is where most experienced users end up for knowledge work. The risk is real but low if you work in a non-critical folder. There was a widely shared incident where someone running bypass permissions on a Linux machine lost data. The command was valid. The context was wrong. Use with awareness. Plan Mode is the one most beginners undervalue. Plan Mode A minute of planning saves ten minutes of building. That is not motivational language. It is token economics. Here is the actual maths. You build something without planning. It is wrong. You rebuild. Total cost: build time plus rebuild time plus the tokens consumed by both attempts. You plan first. Claude Code identifies the approach problem before touching a single file. Total cost: five minutes of planning plus one correct build. Plan Mode is read-only. Claude Code researches your project, reads your files, checks documentation, and produces a plan before executing anything. The plan is not cosmetic. It is load-bearing. Every hour I have saved in complex builds came from spending five minutes in Plan Mode first. How to use it: click “Plan Mode” in the permission toggle at the bottom of the chat panel. Describe what you want to build. Let Claude Code produce the plan. Read it. Push back if something looks off. Switch to Bypass Permissions when the plan looks right, and let it build. Context management Context is the scarce resource in Claude Code. Managing it well is the difference between a smooth build and a degraded one. Slash commands worth knowing You do not need to memorise all 62. These are the most important ones to learn: /plan — start Plan Mode before any complex task /context — see exactly what is consuming your context window /compact — free up context (do this at around 50%, not 95%) /clear — reset context entirely when switching to a new task /model — switch models or reasoning level mid-session /init — generate your first CLAUDE.md automatically /doctor — diagnose installation and authentication issues /rewind — undo when Claude goes off track (or hit Esc twice) /permissions — pre-allow safe commands instead of using bypass mode /btw — ask a side question without interrupting the main task Run /context in any session to see exactly what is consuming your context window. You will see your system prompt, tools, MCP tools, memory files, skills, and messages with their exact token counts. Most people are surprised. Before they type a single message, they are often 15-20% through their window from system-level overhead alone. What you can actually build This is where Claude Code stops being a productivity tool and starts being a business infrastructure layer. Each use case below is built as a skill. A skill is a Markdown file that sits in your .claude/skills/ folder. Claude Code reads it on demand and follows it as a step-by-step workflow. You define it once. After that, one line runs the whole thing. The connector layer Every skill above gets more useful the moment the right connector is active. Connect Google Sheets and the lead scraping skill uploads results directly. Connect Gmail and the email classification skill reads and labels your real inbox. Connect Figma and your built interfaces land on the design canvas as editable frames. The skill provides the workflow. The connector provides the live data and the destination. Without connectors you are working on local files. With them you are running operations inside the tools your business already depends on. Go to Settings > Connectors in Claude Desktop. Over 50 integrations are listed. Authenticate once. Every future session picks them up automatically. Four MCP servers worth installing first: Context7 fetches up-to-date library documentation into context. Stops Claude from hallucinating outdated APIs. Playwright gives Claude browser automation. It can implement, test, and verify UI features by navigating your app itself. Excalidraw lets Claude generate architecture diagrams and flowcharts as hand-drawn sketches from a prompt. DeepWiki pulls structured documentation for any GitHub repo. Point Claude at a repo and it gets the full picture without you pasting README files into the chat. Lead scraping A skill that scrapes a target industry, classifies leads with AI, enriches contact emails, and uploads everything to a Google Sheet. Build the skill. Open Claude Code and paste: Create a Claude Code skill file called lead-scraping.md in a .claude/skills/ folder. The skill should: 1. Scrape business leads for a target industry and location using web search 2. Classify each lead with AI (business name, website, phone, category) 3. Enrich a contact email for each lead where publicly available 4. Upload all results to a Google Sheet Accept three inputs from the user: - Industry (e.g. dentists, accountants, solicitors) - Location (e.g. Manchester UK, United States) - Number of leads required Write it as a step-by-step Markdown checklist Claude Code follows when the skill is invoked. Run it with one line: Use the lead-scraping skill. Industry: dentists Location: Manchester, UK Leads required: 20 Upload to this Google Sheet: [YOUR SHEET URL] Proposal generation A full proposal generator with a brief input form, AI-generated proposals in your voice, a client-facing view with an Accept button, and a payment link field. No PandaDoc subscription. No per-proposal cost. Build it using Plan Mode. Switch to Plan Mode first, then paste: /plan Build a proposal generator web app with the following: - A brief input form (client name, industry, scope, budget) - AI-generated proposal output written in my voice using my brand-voice.md file - A client-facing view of the proposal with an Accept button - A payment link field I can add manually before sending - Each proposal saved as a Markdown file in a /proposals folder Use plain HTML, CSS, and JavaScript. No frameworks. Read all files in this folder before planning. Ask me clarifying questions before you start building. This clears the context window before building so tokens used during planning do not eat into your build. Claude Code then executes every step without stopping to ask permission. Website generation Screenshot a site you admire. Feed it to Claude Code alongside your content and brand guidelines. Get a complete, deployable website without touching a template or page builder. Build it. Drag your reference screenshot into the terminal, then paste: I am going to give you a screenshot of a website I like the design of and my own content. Build me a complete single-page website using my content but matching the visual style and layout of the reference. My content: Headline: [YOUR HEADLINE] Subheadline: [YOUR SUBHEADLINE] Key points: [POINT 1], [POINT 2], [POINT 3] CTA: [YOUR CTA TEXT] Brand colour: [HEX CODE] Build as a single HTML file with embedded CSS. Produce three layout variants: version-a.html, version-b.html, version-c.html Run them in parallel. To push the finished build into Figma for design refinement, connect Figma MCP first: claude mcp add --transport http figma https://mcp.figma.com/mcp Then: Start a local server for my app and capture the UI in a new Figma file. Claude Code opens a browser, captures the live interface, and sends it to Figma as editable design layers. Refine it on the canvas, push updates back. Design and code stay in sync without manual handoff. How to Claude Code (Intermediate) Run Claude Code Workflows with Parallel Agents Here is the thing to know before you deliver anything for a client. I approach it like this: I set up a project folder with my client’s full context. Who they target. How they talk. What a qualified lead looks like for them. Claude Code reads that context at the start of every session. So every workflow I build already knows the client’s world. That’s the real leverage. (and fast delivery from your side as a service provider) Here are two workflows I run right now. Workflow 1 - Target List Building My client drops a CSV full of LinkedIn prospects. One command kicks off the whole thing → in this case “ wf1-qualify-list “ The orchestrator reads the file, figures out the columns, cleans it up. Then it splits the leads into small batches and spawns parallel agents - all at once, not one by one. Each agent calls Bright Data to pull LinkedIn profiles and company data simultaneously (Bright Data setup - add coupon “sabahudin” and grab $20 of credits on me - it is pay as you go). Results merge back. ICP scoring runs. Only qualified leads come out the other side. The rest get dropped silently. To keep it simple: Think of it like a kitchen. The command is the head chef calling orders. The agents are line cooks, each one working their station at the same time. The skills are the recipes pinned above each station. One chef coordinating five cooks is always faster than one chef doing everything alone. Workflow 2 - Outreach Prep This one picks up where Workflow 1 stops. Takes the qualified leads, scrapes their recent LinkedIn posts for personalisation signals, then spawns another round of parallel agents - this time writing connection messages in my client’s voice. But there’s a checkpoint. My client sees two test messages first. Approves the tone. Only then does the full batch run. No surprises. Messages and lead data get pushed to Aimfox for outreach automation and HubSpot as the CRM. One command. Start to finish. Bonus: Workflow 3 is next. Once those leads are sitting in HubSpot, the next move is market signals. A workflow scanning relevant news, scoring what matters, matching it against existing contacts, and creating new outreach triggers. Migrating workflows to the client Each workflow is a ZIP plugin - commands, agents, skills, all inside. I built them locally, packaged them, and installed them on my client’s Claude Code dashboard. Now they run /workflow-1 or /workflow-2 and the whole thing fires. Or create a GitHub repo and clone it. You have seen two levels. The setup. The CLAUDE.md. The permission modes. The skills. The building blocks that make Claude Code feel like a tool that knows your work. Then what delivery actually looks like. Parallel agents. Real client workflows. Qualified leads and outreach prep running from a single command. The gap between beginner and intermediate is not technical ability. It is reps. You close it by building something real, hitting an error, fixing it, and building the next thing. Your first CLAUDE.md does not need to be perfect. Your first skill file does not need to cover every edge case. Start with something small enough to finish today. One workflow. One skill. One real output. That is the whole lesson. Want to go further? The full newsletter covers the advanced level too what happens when Claude Code runs your entire agency. Read it here → https://charliehills.substack.com/p/claude-code-beginner-advanced

AIFCC — AI Fluent CxO Club

読み書きそろばん、AI。経営者が AI を自分で動かせるようになるコミュニティ。

Claude CoworkはClaude Code上で動作する | AIFCC