コードを学ばずに Pixel Icon Library の Web サイトを Vibe Code で作成した方法 (Cursor AI に感謝します!)

デザイナーとして、私はデザインとテクノロジーの交差点に常に興味を抱いてきました。デザイナーと開発者の間のギャップは、常に私の興味をそそるものでした。ただ、こんなに早くそのギャップを越えるとは思っていませんでした。

HackerNoon のPixel Icon Library は、 HackerNoon のデザイン言語のノスタルジックなエッセンスを捉えたピクセル化されたアイコンを作成する楽しいデザイン プロジェクトとして始まりましたが、Figma Design ファイルを自分で完全に機能する Web サイトに変換するというのはどうでしょうか? Cursor AI を見つけるまでは、2025 年の私の計画には入っていませんでした。ライブラリは GitHub、xFigma、NPM を通じてオープンソース化されているため、私たちは常にこれらのアイコンをコミュニティがもっと利用しやすいものにしたいと考えていました。アイデアはシンプルでした。デザイナーや開発者がプロジェクト用にこれらのアイコンを参照、検索、ダウンロードできる Web サイトを構築しましょう。

課題は？コーディングの経験がまったくなかったことです。💀

ここで、AI 搭載のコード エディターである Cursor AI の登場です。このエディターは、この旅を通じてすぐに私の指導者およびガイドとなりました。ここでは、AI の支援と本格的なVibe コーディングによって、設計からフルスタックまで自分の限界を超えた方法を説明します。

グラウンドゼロからスタート

最初のステップは、何を構築したいのかを明確にし、すでに持っているものを評価することでした。

• SVG 形式のピクセル アイコンのライブラリ。
• ウェブサイト用のFigmaデザイン。
• ウェブサイトに欲しい機能のリスト。
• それをどうやって実現するか全く分かりません。

まず、Pixel Icon Library GitHub RepositoryにWeb サイト ブランチを設定しました。次に Cursor AI をインストールしましたが、始めるのは驚くほど簡単でした。

Cursor AI を使用したプロジェクトの設定

Cursor をインストールした後、次の点を確認します。

• GIT - バージョン管理用
• Node.js - NPM パッケージ用

基本的なものをインストールしたら、実際に作業を開始する時間です。リポジトリをシステムにクローンし、Cursor AI でプロジェクト フォルダーを開いて、組み込みの AI アシスタントとの会話を開始しました。

Claude で確かな経験を積んだ私は、プロセス全体をガイドするエージェント モードの Claude 3.7 Sonnet を選択しました。

最初のプロンプトでは、構築したいものを簡単に説明し、プロジェクトの基本構造とともに必要な機能をリストアップし、効率と速度を優先するフレームワークの提案を求めました。Cursor は必要なフォルダー構造の作成を手伝い、プロジェクトでは HTML と Tailwind を使用するよう提案してくれました。プロジェクトの開始に必要なファイルも作成してくれました。この後のフォルダー構造は次のようになりました。

├── index.html

├── src/

│ ├── style.css

│ ├── output.css

├── assets/

├── fonts/

├── scripts/

次のステップは、Tailwind をセットアップして UI を開始することでした。

Tailwind CSS の設定と UI の構築

驚いたことに、Cursor は Tailwind のインストールを台無しにし、Tailwind v3.4 と v4.0 のコマンドを混同していました。そこで、ステップアップする時が来ました。Tailwindcssのインストール ドキュメントにアクセスし、次の手順を実行しました。

• Tailwind をインストールするには、ターミナルを開いて次のコマンドを実行します。

  npm install tailwindcss @tailwindcss/cli

• src/style.css ファイルに Tailwind をインポートします。

  @import "tailwindcss";

• ビルド プロセスを設定するには、次のコマンドを実行します。

  npx @tailwindcss/cli -i ./src/style.css -o ./src/output.css --watch

• HTML で Tailwind の使用を開始します。

  <link href="/src/output.css" rel="stylesheet">

Tailwind がインストールされ、クラスが使用できる状態になったら、Figma デザインに従ってより複雑な分子、有機体、ページを構築する前に、AI エージェントの色、フォント、その他の要素の定義を開始しました。

次に、プロジェクトでアイコンを使用するために、Pixel Icon Library NPM パッケージをインストールしました。NPM パッケージをインストールする手順は次のとおりです。

• パッケージをインストールします:

  npm i @hackernoon/pixel-icon-library

• HTMLにCSSをインポートする

  (アクセスを容易にするために、必要なアイコン フォント ファイルをすべて /fonts フォルダーに移動しました。)

  <link href="/fonts/iconfont.css" rel="stylesheet">

• アイコンを表示するには、

  <i class="hn hn-icon-name"></i>

UI については、要素ごとに整理し、必要に応じて以前のバージョンに簡単に戻れるように、要素ごとにアプローチしました。

順序は次のとおりです:

• ナビゲーションバー
• フッター
• ヒーローセクション
• 検索バー
• アイコンカードとグリッド
• 個別アイコンモーダル

これらすべての要素のパディング、マージン、境界線の半径、色、寸法を定義し、ホバーとクリックの状態も追加しました。CSS プロパティに加えて、プロンプトにレスポンシブな動作とインタラクションも含めました。

アイコンデータチャレンジと検索機能の実装

UI 要素が配置されたら、本当の課題に取り組みます。つまり、すべてのアイコンを、アイコン名、アイコン タイプ タグ、SVG コードの詳細とともに表示し、検索機能をスムーズにすることです。これを克服するために、Cursor は構造化されたアプローチを提案しました。

• アイコンメタデータとSVGコードを含むJSONファイルを作成する
• JSON からデータを読み込んで効率的に表示します。
• アイコン名に基づいた検索を実装します。
• アイコンタイプのタグ（solid、regular、brands/social-media-icons、purrcats）に基づいて検索フィルターを追加します。

このプロセスをさらに自動化するために、すべてのアイコン データを /data/icons.json ファイルに追加するスクリプトを Cursor に作成するように依頼しました。

これで、検索が機能し、検索フィルターが設定され、アイコン モーダルが意図したとおりに機能するようになりました。あとは、UI に残りのインタラクションを追加し、徹底的にテストして、展開するだけです。

展開とその先

UI に満足し、すべての機能を徹底的にテストしたら、次の課題であるデプロイメントに取り組みました。

プロジェクトは静的サイトだったので、高速で無料、そしてメンテナンスが簡単なホスティング ソリューションが必要でした。GitHub Pages は迷うことなく選択できました。次の機能を提供していました。

• GitHub リポジトリとのシームレスな統合により、簡単に導入できます。
• 無料で使用でき、このような静的プロジェクトに最適です。
• アップデートは非常に簡単です。必要なのはコミットだけです。

しかし、すべてのコードをリポジトリにプッシュして GitHub Pages 経由でデプロイする前に、コードをクリーンアップして運用上の問題がないか確認する必要がありました。Cursor と簡単にやり取りし、いくつかの調整を加えた後、リリースの準備がすべて整いました。

GitHub Pages 経由でプロジェクトをデプロイするために必要なことは次のとおりです。

• すべてのコードをGitHubリポジトリにプッシュし、公開されていることを確認します。
• リポジトリのGitHubページを有効にする
  • 設定に移動
  • ページをクリック
  • ブランチを「 Website 」に設定します（コードがあるブランチ。私の場合は、Websiteブランチでした）
  • 保存をクリック
• オプション:
  • カスタムドメインを追加します（私が使用した例：pixeliconlibrary.com）
  • DNS を構成する (この作業を手伝ってくれたRichardに感謝します)
• 数分待つと、Web サイトが公開されます。

誇れる製品

ピクセルアートのアイコンのデザインから、完全に機能するサイトへのバイブコーディングまで、このプロジェクトは私を最高の方法で自分の快適ゾーンの外へと押し出してくれました。振り返ってみると、これは単なるウェブサイトの構築以上のものでした。私の創造的視野を広げ、AI によってデザインと開発の境界線がかつてないほど急速に曖昧になっていることに気付いたのです。そして私にとっては、目の前に果てしない道が開かれたような気がします。

ウェブサイトの背後にあるコードを覗いてみませんか? GitHub リポジトリをチェックしてください。