記事一覧へ
Claudeを使って午後1回でウェブサイトを作り、$10,000で売った。その完全なシステムを紹介する。
全工程を録画し、誰でも再現できるようにステップごとに分解した。以下に示すサイトは、フリーランサーが5桁の料金を請求するような仕上がりだ。訪れた人には、AIがコードを書いたとは誰にも分からない。公開までのトータルコスト：約$60。
まず正直なファクトチェック
夢物語は売らない。「どうやるか」の前に、本物と嘘を整理しておく。
本物：
Claude Codeはあなたの説明をもとに、ゼロからサイトのフルコードを書く。テンプレートを使わないので、Wix/Squarespaceのコピーには見えない。これがプレミアムな仕上がりになる核心的な理由だ。
私が使う2つのスキルは本物で、無料だ。ひとつはAnthropicが作ったfrontend-designスキル——バックグラウンドで動き、最も使い古されたAIフォントやレイアウトを排除する。もうひとつはコミュニティ製のUI/UX Pro Maxスキル——数十種類のUIスタイル・カラーパレット・フォントペアリングをオンデマンドで呼び出せる。
画像・動画ワークフローは本物だ。ElevenLabsは2025年末に画像・動画分野へピボットし、現在はトップクラスのビジュアルモデル（GPT Image、Google Veo 3.1）にTopazアップスケーリングを1タブに統合している——私自身で確認済み。静止画を生成し、アニメーション化し、アップスケールする工程がすべてページを離れずに完結する。
Claude CodeはClaude Proプラン（月$20、年払いなら$17）に含まれている。Maxプランは不要。2026年6月時点の確認済み情報。
格安ホストでの公開＋初年度無料ドメインで年間約$40〜45。
マジックではないこと：「$10,000」はアウトプットの価値であって、保証された収入ではない。このようなサイトはエージェンシーなら$5K〜$15Kを請求する。実際に稼げるかどうかは自分で売り込めるかどうか次第——お金の話は後述する。ここに載せるプロンプトは出発点であって、自動販売機ではない。
記載したツールはすべて実在する。価格はすべて2026年6月時点の最新情報だ。
$10,000のサイトと$200のサイトの違い
何かを作る前に、目標が必要だ。Claudeに「高価に見えるサイトを本当に決めるものは何か」と質問したところ、3グループ・8項目に集約された。
センス
世界観——本物のデザイン方向性（ムードボードではない）
タイポグラフィ——意図のあるフォント（使い古されたものを除く）
カラー——節制。最大4〜5色、虹色は禁止
中身
4. 階層——サイズが「何を最初に読むか」を目に伝える
5. 画像——カスタムか説得力あるAI生成、ストックゴミは禁止
6. コピー——節制を効かせ、感覚的で、形容詞マシンではなく人間が書いたように
高品質の手触り
7. モーション——サイトを生き生きと感じさせるカーソルエフェクトとマイクロインタラクション
8. モバイル——縮小したデスクトップではなく、スマホ向けにデザイン
このリストを保存しておくこと。最後に自分のサイトを全8項目で採点する。この自己採点こそ、磨き上げられた成果と平凡なものを分ける唯一のステップだ。
対象者
これが効く人：
コードが書けないけれど地元ビジネス（レストラン・ジム・クリニック・不動産など）にウェブサイトを売りたい人
すでにフリーランスをしていて、生産量と単価を10倍にしたい人
自分のビジネスや個人ブランド向けのプレミアムサイトが欲しい人
集中した午後1回を確保でき、ワンクリック完成を期待せずに反復する意欲がある人
ボタンを押せばビジネスが生まれるおもちゃが欲しい人には向かない。ブリーフの質と「なんか平凡だ」と感じたときに押し返す意欲が、このワークの本質だ。
必要なもの（とそのコスト）
フルビルド、ステップバイステップ
ステップ1——Claude Codeをセットアップ
claude.comでClaude Proに登録する。デスクトップアプリをダウンロード（左下のダウンロードアイコン→Claude Codeセクション→デスクトップアプリ→インストーラーを実行）。サインイン。
チャットモードからコードモードに切り替える（左上タブ、またはCmd/Ctrl + 3）。
コンピュータ上に空のフォルダを作成——これがワークスペースになる。チャットボックス付近のフォルダ選択ボタンをクリックし、アプリ内でそのフォルダを開く。Claude Codeは専用フォルダがあると最もよく機能する。
インターフェースは頻繁に更新されるため、ボタンの場所が説明通りでなくても焦らないこと——概念は同じなので、同等のものを探せばいい。
ステップ2——2つのスキルでClaudeを強化
デフォルトのClaudeはジェネラリストだ。デフォルトのデザインはまあまあ——あらゆるAIサイトで見かける同じフォントとレイアウトに手を伸ばしてしまう。スキルがそれを解決する。
スキル#1をインストール——frontend-design（バックグラウンドで動作）:
frontend-designスキルのリンクをClaude Codeに次のように貼り付ける：
編集を求められたら許可する。
スキル#2をインストール——UI/UX Pro Max（必要時に呼び出す）:
UI/UX Pro MaxのリンクをClaude Codeにこの通り貼り付ける——ターミナルを通じてクリーンにインストールされるため、言い回しが重要だ：
編集を許可する。
ステップ3——オートモードをオン
左下のチャット下にあるモードセレクターをオートモードに切り替える。これで、Claudeが各ステップで許可を求めずに作業できるようになる。オートモードをオンにして両スキルをインストールすれば、ビルド開始準備完了だ。
ステップ4——参照サイトを集める（センスへのショートカット）
ビジュアルのセンスを言葉で説明するのは難しい——特にデザイン初心者は。参照サイトがそれを解決する：好きなサイトのスクリーンショットをClaudeに渡し、雰囲気を合わせてもらう。センスを見せる方が、説明するよりはるかに簡単だ。
私の見つけ方：
Dribbble——デザイナーが作品を公開する場所
Awwwards——受賞サイト、非常にハイレベル
Pinterest——具体的に検索する（例：「modern restaurant website design」）
気に入ったサイトを3〜5件見つけてスクリーンショットを保存する。コピーするのではなく、Claudeに方向性を示すだけだ。
ステップ5——サイトを建てるたった1つのプロンプト
これがビデオ全体を1手で完結させる動き。デザインスキルを呼び出し、ブリーフを渡し、参照スクリーンショットを添付し、最後に魔法のひと言で締める。
私のビルドではシアトルのレストランサイトを作った。プロンプト構造を示す——ブリーフはプロジェクトに合わせて変えること：
最後の「ask me clarifying questions」という一行が、Claudeを作業前に立ち止まって考えさせる。Claudeは7問ほど質問してきた：名前、スタイルの方向性、セクション構成、コピーを誰が書くか、技術スタック、アニメーションレベル、その他。
最も重要な部分：Claudeはメニューのように3つのスタイル方向性を提示してくれた。私はダーク/ムーディーラグジュアリー×パシフィックノースウェストのグラウンディングを選び、セクション5つ、ギャラリーなし、予約なし——1ページスクロールにした。
これがビルドで最も重要な瞬間だ。あなたの答えがサイト全体になる。今ここで具体的であるほど、後でClaudeと戦う回数が減る。時間をかけること。
それから送信する。Claudeは1行書き始める前に約3分読んで計画を立て、その後4〜5分でビルドする。完成まで飛ばしてOK。
ステップ6——8項目チェックリストで自己採点
磨き続ける前に、設定したバーに対してサイトを確認する。8項目チェックリスト（この記事の前半）をClaudeに貼り付けて質問する：
私のビルドでは、Claudeはこう返してきた：世界観——強い、カラー——強い、階層——強い、タイポグラフィ——まあまあ、画像/モーション/モバイル/目に見えない部分——すべてまあまあ。似たような結果が返ってくるだろうし、それで構わない。重要なのは残りの課題を正確に把握すること。
ステップ7——プロからエクスペンシブへの昇格はここで起きる
この章がすべての違いだ。1つずつ修正するな——それはトークンを無駄にするし、結果がパッチを当てたように感じられる。仕様ではなく意図で先導し、バッチで依頼する。
私が使う正確なプロンプトはこれだ：
「何を追加するか」をClaudeに伝えていない——「どう感じさせたいか」を伝えている点に注目。Claudeは人がスペックを書くよりも、意図を具体的なものに変えるのが得意だ。Claudeはバッチで返してきた：サイト全体にフィルムグレイン、セクション間にアニメーションする真鍮のヘアライン、グロウするエンバーエフェクト、単語ごとの見出し表示。5つの変更、1つのプロンプト、まとめてリリース。
それから自分でセクションごとのパスを進める。スクロールして、まだ平坦に感じるセクションを見つけ——必ずある——セクションごとにモーションかカーソルインタラクションをClaudeに与える：
最初の試みが露骨すぎたらプッシュバックする：「もっとさりげなく、カーソルの後ろを少し遅れてついてくるようなラグを加えて。」私のビルドでは、これで静的なキャンドルライトのハローが、ソフトな遅延でカーソルを追いかけるものに変わった。プロンプト2本、セクション2つ——あのレイヤーが「高価に見えるサイト」と「ナビゲートしていて高価に感じるサイト」の違いだ。
ステップ8——画像：持ち込むか生成するか
画像はClaudeが単独では完全に解決できない唯一の柱だ。最良の選択肢：カスタム写真撮影。プロジェクトフォルダに入れ、それが何でどこに置くかをClaudeに伝える。
写真予算がない？AIジェネレーションは今や誰にも見分けがつかないほど優秀だ。素早くする秘訣：画像プロンプトを自分で書かない——Claudeはすでにあなたのプロジェクトを知っているので、プロンプトを書かせる：
それを画像ジェネレーターに貼り付けると、初回から雰囲気に合ったものが出てくる。ElevenLabsでは静止画（GPT Image）を生成し、そのフレームをそのままGoogle Veo 3.1に入れてアニメーション化し、Topazでアップスケール——すべて1タブで完結する。最終アセットをプロジェクトフォルダに入れる。
ステップ9——21st.devからプロコンポーネントを引き込む
印象的なビジュアル要素（スクロールエフェクト、派手なヒーロー）が欲しいとき、21st.devは実際の開発者が作ったコンポーネントの無料ライブラリだ。気に入ったものを見つけ、Copy Promptをクリックし、Claude Codeに貼り付け、アセットを添付して、それを使ってヒーローを作るよう伝える。
重要なポイント：Claudeはアーキテクチャを守る。私が選んだスクロールコンポーネントはReact用に作られていたが、私のプロジェクトはシンプルな静的サイトだったため、ClaudeはReact版を採用することをプロジェクト全体の仕組みが変わってしまうとして断り、代わりにプレーンHTMLでエフェクトを再構築した。（プロジェクトが本当にReactを必要とする場合——ダッシュボード・チェックアウト・ログインなど——Claudeはイエスと言うだろう。頼まれたからといって壊したりしない。）
最初の試みで失敗したとき——私のものはそうだった——何が壊れたかを説明するだけでいい：
Claudeはページを直接開いて生で確認し、3層深いところにある本当のバグを見つけた。教訓：押し続けること。何が壊れて何を期待していたかを説明すれば——もっとよく見させてあげれば——Claudeはほぼ必ず解決できる。
ステップ10——コピー・フォント・モバイル（手軽な勝ち）
コピー：AIコピーはデフォルトで説明過多になりがちだ。プレミアムコピーは節制されていて感覚的——「Dry-aged ribeye. 16oz. 60-day. Hearth-fired.」はシェフが書いたように読める。frontend-designスキルはClaudeをこの方向に押すので、すべてのプロジェクトで採用する価値がある。
フォント：Inter——これほど使い古されたフォントは他になく、一瞬で「AIが作った」と叫ぶ。アウトプットに見えたら：
モバイル：「レスポンシブ」は「スマホ向けデザイン」ではない。デスクトップよりスマホでサイトを見る人の方がはるかに多い。専用パスを依頼する：
私のビルドではナビが折りたたまれ、ワードマークのスペーシングが引き締まり、ボタンに小さなバリアントが追加された。これで8項目チェックリスト全項目完了。
ステップ11——公開（みんなが失敗するポイント）
今の段階では、サイトはあなたのコンピュータにしか存在しない——そのlocalhostのURLはあなたのマシンでしか動かない。共有するにはホスティング＋本物のドメインが必要だ。
初年度無料ドメイン付きの格安ホストを選ぶ。シンプルな静的サイト（ログイン・チェックアウト・データベースなし）なら最安の「プレミアム/共有」プランで十分。期間を12ヶ月に設定——無料ドメインが付く最低期間だ。ドメインを検索して取得する。私のトータルは年間約$43：ホスティング＋ドメイン＋メール。
ClaudeにReactがあってバックエンドが実際に構築されている場合（Step9でYesと言った場合）は、Node.jsをサポートするビジネスプランを選ぶ。Step9でClaudeがReactを受け入れたか断ったかが、どちらのプランが必要かを教えてくれる。
空白ページが表示される唯一のミス：アップロード時は、プロジェクトフォルダ自体ではなく、フォルダ内のファイルをzipにする。プロジェクトフォルダを開いてすべて選択し（Cmd/Ctrl + A）、圧縮する。index.htmlがトップレベルに来る1つのzipにしたい。フォルダごとzipにすると、ホストが1階層深くに展開してドメインが空白になる。
ホストのオンボーディングで「Migrate Existing Site → Upload Backup Files」を選び、ドメインを選択してzipをドラッグ＆ドロップし、送信する。ドメインをクリック——$10,000のサイトがカスタムURLで公開された。
これで実際に稼げる金額
サイト自体は$10,000の価値がある資産だ。これをお金に変える方法：
地元ビジネスへのサイト販売が最速のルートだ。レストラン・歯科医・ジム・不動産業者・建設業者は、ワンページのプレミアムサイトに$1,000〜$5,000を支払うことが多い。午後1回でビルドして、それに見合う料金を請求する。月2件・$2,000ずつ = 副業で月$4,000。
経験豊富なフリーランサー／中小エージェンシーは、まさにこの種のカスタム・アニメーション・モバイルデザイン済みサイトに$5,000〜$15,000を請求する——そして今や数週間ではなく数時間で納品できる。マージンがすべてだ。
プロダクタイズドサービス：「5日間でプレミアム1ページャー$1,500」という固定パッケージを売る。予測可能で反復可能、複数同時進行も可能。
自分のブランド：自分自身のために使うなら、「稼ぎ」は5桁に見えるサイトが呼び込む案件と信頼性だ。
今日から始める人への現実的な見通し：数週間で最初の有料クライアント、本当にアウトリーチするなら数ヶ月で副業月$1K〜$5K。ビルドはもはやボトルネックではない——セールスがボトルネックだ。
これであなたは何が変わるか
以前は、プレミアムなカスタムサイトを作るには数ヶ月かけてコードを学ぶか、開発者に数千ドル払うかのどちらかだった。今は技術的な壁が消えた。午後1回で、本当に高価に見える・完全カスタム・アニメーション付き・モバイルデザイン済みのサイトを作れる——そしてそれを売るか、自分のものをシリアスに見せるために使うかを選べる。
あなたが本当に身につけるスキルは「コーディング」ではない。「ディレクション」だ——高価に見えるものが何かを知り、それを正確にブリーフし、何か平坦に感じたときに「よしとする」のではなく押し返す技術。そのスキルは、以降のすべてのサイトに渡って複利で積み上がっていく。
次のステップ（今日やること）
Claude Proに登録してデスクトップアプリをインストールする。
両スキルをインストールし（ステップ2）、オートモードをオンにする。
DribbbleかAwwwardsから参照スクリーンショットを3〜5枚保存する。
ステップ5のビルドプロンプトを実行する——「ask me clarifying questions」も含めて——そして丁寧に答える。
参照サイト収集と質問への回答は飛ばさないこと。そこに品質の80%が宿っている。売ることを心配する前に、サイトを1つ最後まで作ること——まず自分で動くのを見る必要がある。
正直なひとこと
これは魔法の薬ではない。本物のツールが本物の仕事をする——でも結果はあなた次第だ。上のプロンプトは出発点であって、スクリプトではない。テンプレートに見えるサイトと$10,000に見えるサイトの違いは、あなたが持ち込むセンス・選ぶ参照サイト・「よしとする」のではなく平坦なセクションに何度押し返せるかだ。
Claudeは実行を担当する。あなたの方向性と努力が結果を決める。それをどう使うかは完全にあなた次第だ。
詳細・AIツール・質の高いリサーチはこちら @thegreatest_sv をフォローしてブックマーク・RTをお願いします。
免責事項（収益・情報）：この記事に記載の収益や統計は私のリサーチと経験に基づく例であり、あなたの収益を保証するものではありません。結果はニッチ・コンテンツ品質・RPM/CPM・オーディエンスエンゲージメント・継続性・努力などの要因によって異なります。これは金融・税務・法律・専門的なアドバイスではありません——ビジネス上の意思決定を行う前に適切な専門家に相談してください。
リソース＆リンク
Claude Codeツール＆リソース: https://claude.com/
Frontend Designスキル（Anthropic製）: https://github.com/anthropics/skills/tree/main/skills/frontend-design
UI/UX Pro Maxスキル: https://github.com/nextlevelbuilder/ui-ux-pro-max-skill
21st.dev: https://21st.dev
$10Kウェブサイトチェックリスト（無料PDFダウンロード）: https://drive.google.com/file/d/1CCRCvSbJ1tNXmd2YDnUNr1XkTAguYG7v/view
デザイン参照サイト
Dribbble: https://dribbble.com
Awwwards: https://www.awwwards.com
Pinterest: https://pinterest.com
claude-setupclaude-workflowbusiness-model
Claude Codeで$1万サイトを1日で作る方法
♥ 179↻ 14
原文を表示 / Show original
I built a website with Claude in one afternoon and sold it for $10,000. Here’s the exact system.
I recorded the whole thing, then broke it down step by step so you can copy it. The site below looks like a freelancer charged five figures for it. Nobody who visits it can tell an AI wrote the code. Total cost to put it live: about $60.
First - the honest fact-check
I'm not going to sell you a fantasy. So before the how, here's what's real and what isn't.
What's real:
Claude Code writes the full code for a site from scratch based on your description. No template, so your site doesn't look like every other Wix/Squarespace clone. This is the core reason the result can hit a premium bar.
The two skills I use are real and free. One is frontend-design, built by Anthropic — it runs in the background and bans the most overused AI fonts and layouts. The other is UI/UX Pro Max, a community-built skill that ships with dozens of UI styles, color palettes, and font pairings you can call on demand.
The image/video workflow is real. ElevenLabs now aggregates the top visual models (GPT Image, Google Veo 3.1) plus Topaz upscaling inside one tab — I verified this, they pivoted into image & video in late 2025. So you generate a still, animate it, and upscale it without leaving the page.
Claude Code is included in the Claude Pro plan at $20/month ($17 if billed annually). You do not need a Max plan for this. Confirmed current as of June 2026.
Hosting on a budget host with a free first-year domain runs ~$40–45/year.
What's NOT magic: The "$10,000" is the value of the output, not your guaranteed payday. A site like this is what agencies charge $5K–$15K to build. Whether you actually earn that depends on you selling it — more on the money below. The prompts here are starting points, not a vending machine.
Every tool named is real. Every price is current as of June 2026.
What separates a $10,000 site from a $200 one
Before building anything, you need a target. I asked Claude what actually makes a site look expensive, and it comes down to 8 things in 3 groups:
Taste
Point of view — a real design direction, not a mood board
Typography — intentional fonts (and not the overused ones)
Color — restraint, 4–5 hex values max, no rainbow
Substance 4. Hierarchy — size tells the eye what to read 1st, 2nd, 3rd 5. Imagery — custom or convincingly AI-generated, never stock-junk 6. Copy — restrained, sensory, written like a human, not an adjective machine
Felt quality 7. Motion — cursor effects and micro-interactions that make it feel alive 8. Mobile — designed for phones, not a shrunk-down desktop
Keep this list. At the end you'll grade your own site against all 8. That self-grading pass is the single move that separates a polished result from a generic one.
Who this is for
This works if you:
Want to sell websites to local businesses (restaurants, gyms, clinics, real estate, etc.) and don't know how to code
Already freelance and want to 10x your output and your prices
Want a premium site for your own business or personal brand
Can spend one focused afternoon and are willing to iterate instead of expecting one-click perfection
This is not for you if you want a "press button, get business" toy. The quality of your brief and your willingness to push back when something looks flat is the work.
What you need (and what it costs)
The full build, step by step
Step 1 — Set up Claude Code
Sign up for Claude Pro at claude.com. Download the desktop app (download icon, bottom-left → Claude Code section → desktop app → run the installer). Sign in.
Switch from chat mode to code mode (top-left tab, or Cmd/Ctrl + 3).
Create a new, empty folder anywhere on your computer — this is your workspace. Click the folder-select button near the chat box and open it inside the app. Claude Code works best when it has its own folder to live in.
The interface updates often, so if a button isn't exactly where I describe it, don't panic — the concept is the same, just find the equivalent.
Step 2 — Level Claude up with two skills
Out of the box Claude is a generalist. Its default design is okay — it reaches for the same fonts and layouts you've seen on every AI site. Skills fix that.
Install skill #1 — frontend-design (runs in the background): Paste the frontend-design skill link into Claude Code with:
Allow the edits when it asks.
Install skill #2 — UI/UX Pro Max (you call it on demand): Paste the UI/UX Pro Max link into Claude Code with this exact wording — the phrasing matters because it installs cleanly through the terminal:
Allow the edits.
Step 3 — Turn on auto mode
Bottom-left, under the chat, switch the mode selector to auto mode. This lets Claude work without stopping to ask permission at every step. With auto mode on and both skills installed, you're ready to build.
Step 4 — Gather references (your shortcut to taste)
Describing visual taste in words is hard, especially if you're new to design. References fix that: screenshots of sites you like that you hand to Claude so it matches the vibe. It's far easier to show taste than to describe it.
Where I find them:
Dribbble — where designers post their work
Awwwards — award-winning sites, very high bar
Pinterest — search the exact thing, e.g. "modern restaurant website design"
Find 3–5 sites you like and save screenshots. You're not copying them — you're showing Claude the direction.
Step 5 — The one prompt that builds the site
This is the whole video in a single move. You call the design skill, give the brief, attach your reference screenshots, and end with the magic line.
For my build I made a site for a Seattle restaurant. Here's the prompt structure — adapt the brief to your project:
That last line — "ask me clarifying questions" — is what makes Claude stop and think before building. It came back to me with ~7 questions: the name, the style direction, which sections, who writes the copy, the tech stack, the animation level, and anything else.
The part that matters most: Claude offered me three style directions to pick from, like a menu. I chose dark/moody luxury with a Pacific Northwest grounding, five sections, no gallery, no booking — one scrolling page.
This is the single most important moment in the build. Your answers here become the entire site. The more specific you are now, the less you fight Claude later. Take your time.
Then send it. Claude spends ~3 minutes reading and planning before it writes a line, then ~4–5 minutes building. Skip ahead to the reveal.
Step 6 — Grade yourself against the 8-point checklist
Before you keep polishing, check the site against the bar you set. Paste the 8-point checklist (from earlier in this article) into Claude and ask:
On my build, Claude came back with: point of view — strong, color — strong, hierarchy — strong, typography — mixed, and imagery/motion/mobile/invisible-stuff — all mixed. You'll get a similar split, and that's fine. The point is to know exactly what's left.
Step 7 — This is where it goes from professional to expensive
This chapter is the whole difference. Don't fix things one at a time — that wastes tokens and the result feels patched together. Lead with intent, not specifics, and ask for a batch.
Here's the exact prompt I use:
Notice I'm not telling Claude what to add — I'm telling it how I want it to feel. Claude is better at turning intent into specifics than most people are at writing specs. It came back with a batch: film grain across the whole site, animated brass hairlines between sections, a glowing ember effect, word-by-word headline reveals. Five changes, one prompt, shipped together.
Then drive the per-section pass yourself. Scroll through, find the sections that still feel flat — there's always a couple — and give Claude one motion or cursor interaction per section:
If the first attempt is too obvious, push back: "Make it more subtle, add a slight lag so it trails the cursor." On my build that turned a static candlelight halo into one that follows your cursor with a soft delay. Two prompts, two sections — that layer is the difference between a site that looks expensive and one that feels expensive as you navigate it.
Step 8 — Imagery: bring it or generate it
Imagery is the one pillar Claude can't fully solve alone. Best option: custom photography. Drop it in your project folder and tell Claude what it is and where.
No photo budget? AI generation is good enough now that nobody can tell. The trick that makes this fast: don't write the image prompt yourself — Claude already knows your project, so ask it to write the prompt for you:
Paste that into your image generator and you get something on-brand on the first try. In ElevenLabs you can generate a still (GPT Image), drop that exact frame into Google Veo 3.1 to animate it, and upscale with Topaz — all in one tab. Drop the final asset into your project folder.
Step 9 — Pull in pro components from 21st.dev
When you want a striking visual element (a scroll effect, a fancy hero), 21st.dev is a free library of components built by real developers. Find one you like, hit Copy Prompt, paste it into Claude Code, attach your asset, and tell Claude to build the hero with it.
Here's the important part: Claude protects your architecture. The scroll component I picked was built for React; my project was a simple static site, so Claude refused to drop in the React version because it would change how the whole project works — and rebuilt the effect in plain HTML instead. (If your project genuinely needs React — a dashboard, a checkout, a login — Claude would say yes. It doesn't break things just because you asked.)
When the effect breaks on the first try — mine did — just describe what's wrong:
Claude opened the page itself, inspected it live, and found the real bug three layers in. The lesson: keep pushing. Explain what broke and what you expected — Claude can almost always solve it if you let it look closer.
Step 10 — Copy, fonts, and mobile (the quick wins)
Copy: AI copy over-explains by default. Premium copy is restrained and sensory — "Dry-aged ribeye. 16oz. 60-day. Hearth-fired." reads like a chef wrote it. The frontend-design skill pushes Claude toward this, which is why it earns its spot in every project.
Fonts: there's one font — Inter — so overused it instantly screams "AI made this." If you see it in your output:
Mobile: "responsive" is not "designed for phones." Phones will see your site far more than desktops. Ask for a dedicated pass:
On my build the nav collapsed, the wordmark got tighter spacing, and buttons got a smaller variant. With that, all 8 checklist items are done.
Step 11 — Put it live (the part everyone fumbles)
Right now your site only exists on your computer — that localhost URL only works on your machine. To share it you need hosting + a real domain.
Pick a host with a free first-year domain. For a simple static site (no login, no checkout, no database) the cheapest "premium/shared" tier is enough. Set the term to 12 months — that's the minimum that gets the free domain. Search your domain, claim it. My total came out to ~$43 for the year: hosting + domain + email.
If Claude built you something with a real backend (it said yes to React, set up Node.js, a database, etc.), pick the business tier instead — it supports Node.js. The moment Claude accepted or refused React back in Step 9 tells you which plan you need.
The one mistake that loads a blank page: when you upload, zip the files inside your project folder — not the folder itself. Open your project folder, select everything inside (Cmd/Ctrl + A), then compress. You want one zip with index.htmlsitting at the top level. If you zip the whole folder, the host unzips it one directory too deep and your domain shows blank.
In the host's onboarding pick Migrate Existing Site → Upload Backup Files, choose your domain, drag in the zip, submit. Click your domain — and there it is, your $10,000 site live on a custom URL.
How much you can actually make with this
The site itself is a $10,000-value asset. Here's how that turns into money:
Selling sites to local businesses is the fastest path. Restaurants, dentists, gyms, real-estate agents, and contractors routinely pay $1,000–$5,000 for a one-page premium site. Build one in an afternoon, charge accordingly. Two clients a month at $2,000 = $4,000/month part-time.
Experienced freelancers / small agencies charge $5,000–$15,000 for exactly this kind of custom, animated, mobile-designed site — and now deliver it in hours instead of weeks. The margin is the whole point.
Productized service: sell a fixed "premium one-pager in 5 days for $1,500" package. Predictable, repeatable, and you can run several at once.
Your own brand: if you're using it for yourself, the "earning" is the deals and credibility a five-figure-looking site brings in.
Realistic ramp for someone starting today: first paid client within a few weeks, $1K–$5K/month part-time within a couple of months if you actually do outreach. The build is no longer the bottleneck — sales is.
What changes for you after this
Before, a premium custom website meant either learning to code for months or paying a developer thousands. After this, the technical wall is gone. You can produce a genuinely expensive-looking, fully custom, animated, mobile-designed site in an afternoon — and either sell it, or use it to make your own thing look serious.
The skill you actually walk away with isn't "coding." It's directing — knowing what expensive looks like, briefing it precisely, and pushing back until it's right. That skill compounds across every site you build after this one.
Your next step (do this today)
Sign up for Claude Pro and install the desktop app.
Install both skills (Step 2) and turn on auto mode.
Save 3–5 reference screenshots from Dribbble or Awwwards.
Run the build prompt from Step 5 — including "ask me clarifying questions" — and answer carefully.
Don't skip the reference-gathering or the clarifying questions. That's where 80% of the quality comes from. Get one site built end to end before you worry about selling — you need to see it work first.
One honest thing
This isn't a magic pill. It's a real tool that does real work — but the result is downstream of you. The prompts above are starting points, not scripts. The difference between a site that looks like a template and one that looks like $10,000 is the taste you bring, the references you choose, and how many times you push back on a flat section instead of accepting "good enough."
Claude handles the execution. Your direction and your effort decide the outcome. What you do with that is entirely up to you.
Please bookmark, RT and follow @thegreatest_sv for more alpha, AI tools and quality research.
DISCLAIMER (Earnings & Info) Earnings or statistics shown in this article are examples from my research, own experience and are not guarantees of what you’ll earn. Results differ based on niche, content quality, RPM/CPM, audience engagement, consistency, effort, and other factors. This is not financial, tax, legal, or professional advice-consult the appropriate experts before making business decisions.
Resources & links
Claude Code tools & resources: https://claude.com/
Frontend Design skill (by Anthropic):
https://github.com/anthropics/skills/tree/main/skills/frontend-design
UI/UX Pro Max skill:
https://github.com/nextlevelbuilder/ui-ux-pro-max-skill
21st.dev: https://21st.dev
The $10K website checklist (free PDF download): https://drive.google.com/file/d/1CCRCvSbJ1tNXmd2YDnUNr1XkTAguYG7v/view
Design reference sites
Dribbble: https://dribbble.com
Awwwards: https://www.awwwards.com
Pinterest:https://pinterest.com