「AI」タグの記事が2件件あります

こんにちは、箕浦です。

フロントエンド開発をしていると、「Figma でデザインを確認 → エディタに戻ってコード実装 → また Figma で確認…」という往復作業に時間を取られていませんか？
デザイナーとの連携では「デザインファイルのバージョン管理ができない」「最新版がどれかわからない」といった課題も、よく耳にします。

今回は、そんな開発者の悩みを根本から解決してくれる新しいデザインツール Pencil（pencil.dev）を紹介します。

Pencil とは​

Pencil は "Design on canvas. Land in code."（キャンバスでデザインし、コードに着地する）をコンセプトに掲げるデザインツールです。

最大の特徴は、IDE の中で直接デザインができること。
VSCode や Cursor の拡張機能として統合されるほか、macOS / Linux / Windows 向けのデスクトップアプリも提供されており、デザインツールとエディタを行き来する必要がなくなります。

しかも 現在完全無料 で利用できます。

従来のデザインツールとの違い​

「Figma や Sketch と何が違うの？」という疑問に、一覧表で答えます。

Pencil はエンジニアの開発ワークフローに自然に溶け込むことを最優先に設計されています。

主な機能​

1. IDE 統合デザインエディタ​

Pencil は IDE の拡張機能、またはスタンドアロンのデスクトップアプリとして動作します。
無限キャンバス上でフレーム、テキスト、シェイプなどのベクター要素を自由に配置でき、Figma と同様のレイヤーパネルも備えています。

利用方法は以下の通りです。

コードを書いている最中に、すぐ隣のタブでデザインを調整できるため、コンテキストスイッチのコストが大幅に削減されます。

2. Git ネイティブなファイル管理​

Pencil のデザインファイルは .pen という拡張子の JSON ベースのテキストファイルです。
これにより、以下のことが当たり前にできます。

• git diff でデザインの変更差分を確認
• ブランチ を切ってデザインのバリエーションを試す
• プルリクエスト でデザインレビュー
• マージ でデザイン変更を統合

# デザインファイルの差分を確認
git diff design/dashboard.pen

# デザイン変更をコミット
git add design/dashboard.pen
git commit -m "ダッシュボードのサイドバーレイアウトを更新"

デザインファイルがコードと同じリポジトリで管理できるため、「デザインの最新版はどこ？」という問題が解消されます。

3. AI エージェント連携（MCP）​

Pencil の最も革新的な機能が、MCP（Model Context Protocol） を通じた AI エージェントとの連携です。

対応する AI プラットフォームは以下の通りです（2026年2月時点）。

• Claude Code（CLI・IDE 版）
• Claude Desktop
• Cursor
• Windsurf IDE
• Codex CLI
• Antigravity IDE
• OpenCode CLI

自然言語でデザインの指示を出すだけで、AI が .pen ファイルを直接操作します。

> 「サイドバー付きのダッシュボード画面を作成して」
> 「このフォームにメールアドレスの入力フィールドを追加して」
> 「カラーテーマをダークモードに切り替えて」

全ての処理はローカルで実行されるため、デザインデータがクラウドに送信されることはありません。

4. コンポーネントシステムとデザイントークン​

再利用可能なコンポーネントを作成でき、メインコンポーネントを変更すると全てのインスタンスに自動反映されます。
Figma のコンポーネント機能に馴染みがある方なら、直感的に使えるはずです。

また、バリアブル（変数）システム により、デザイントークンを一元管理できます。
CSS カスタムプロパティや Tailwind の設定値と連動させれば、デザインとコードの間でトークンが常に同期された状態を保てます。

5. プリビルトUIキット​

ゼロからコンポーネントを作らなくても、すぐに使える UI キットが用意されています。

特に Shadcn UI キットは、Next.js + Tailwind CSS のプロジェクトとの相性が抜群です。

実践：開発ワークフローに組み込む​

Pencil を日常の開発に取り入れると、ワークフローがどう変わるかを見てみましょう。

Before（従来）​

1. Figma でデザインを確認
2. エディタに切り替えてコーディング
3. ブラウザで動作確認
4. Figma に戻ってデザイン調整
5. デザイン変更をスクリーンショットで共有
6. 以上を何度も繰り返す

After（Pencil 導入後）​

1. IDE 内で .pen ファイルを開いてデザインを確認・編集
2. 同じ IDE でコーディング
3. AI に「このコンポーネントのレイアウトを修正して」と指示
4. 変更を git commit でまとめて管理
5. プルリクエストでデザイン・コード両方をレビュー

コンテキストスイッチが激減し、デザインとコードの整合性が自然に保たれるようになります。

実際に使ってみた​

Pencilのデスクトップアプリをインストールして起動した画面がこちら。
Figmaを触ったことある人であれば、なじみある画面構成です。

デザインシステムとして最初からいくつか組み込まれています。
今回は「Shadcn」を使って、簡単なログインフォームを作成してみます。

画面左下にプロンプトを入力します。

AIが「Shadcn」を使ってログインフォームを作成してくれます。

作成されたログインフォームがこちら。
ここまでは正直Figmaでもできます。

Claude Code に移って、先ほど作成したフォームを選択した状態で、Reactのコードを作成してもらいます。

コードが作成されました。
テストコードも作成してくれています。

ブラウザで確認するとこちら。 忠実とまではいかないですが、だいたいこんな感じです。

まとめ​

Pencil は「デザインとコードを一つの世界に統合する」という明確なビジョンを持ったツールです。

Figma がデザイナーのためのツールだとすれば、Pencil は明確にエンジニアのためのデザインツールです。
フロントエンド開発の効率化を考えている方は、ぜひ試してみてください。

公式サイト: https://pencil.dev

こんにちは、箕浦です。

最近、AIコーディングエージェント（Claude Code、GitHub Copilot など）を使う場面がどんどん増えてきていますが、
「毎回同じような指示を出すのが面倒」「特定の分野でもっと精度の高いサポートが欲しい」と感じたことはないでしょうか？

今回は、そんな悩みを解決してくれる Skills という仕組みを紹介します。

Skillsとは​

Skills は、AIエージェントの能力を拡張するためのモジュール型パッケージです。
簡単に言うと「AIに特定分野の専門知識やワークフローを教え込むプラグイン」のようなものです。

たとえば以下のようなスキルがあります。

スキルをインストールすると、AIエージェントがそのスキルに記載されたルールや知識を自動的に参照するようになります。
結果として、毎回細かいプロンプトを書かなくても、目的に合った質の高い出力が得られるわけです。

スキルの探し方​

スキルの管理には skills CLI を使います。
Node.js（18以上）がインストールされていれば、npx で手軽に実行できます。

キーワードで検索する​

npx skills find "検索キーワード"

たとえば、テスト関連のスキルを探したい場合はこうです。

npx skills find "testing"

実行すると、名前・URLの一覧が表示されます。

Install with npx skills add <owner/repo@skill>

onewave-ai/claude-skills@technical-writer
└ https://skills.sh/onewave-ai/claude-skills/technical-writer

スキルの公式サイト https://skills.sh/ でもブラウザから検索できます。

よく使う検索キーワード​

目的に合わせて、以下のようなキーワードで探すと見つかりやすいです。

スキルのインストール方法​

気に入ったスキルが見つかったら、add コマンドでインストールします。

npx skills add <owner/repo@skill> -g -y

• -g : グローバル（ユーザーレベル）にインストール
• -y : 確認プロンプトをスキップ

実際にインストールしてみる​

記事作成を支援するスキルを3つインストールする例です。

# 記事の構成案作成
npx skills add onewave-ai/claude-skills@technical-writer -g -y

# 日本語の表現改善
npx skills add ronantakizawa/japanese-copywriting@japanese-copywriting -g -y

# 技術的な事実確認
npx skills add daymade/claude-code-skills@fact-checker -g -y

インストール先は ~/.agents/skills/ 配下になります。
対応しているAIエージェント環境にインストールされます（環境やオプション指定により対象は変わります）。

インストール済みスキルの確認・更新​

# アップデートがあるか確認
npx skills check

# すべてのスキルを最新版に更新
npx skills update

実践：テックブログ執筆でのスキル活用​

弊社のテックブログ執筆でも、上記3つのスキルを導入して活用しています。
以下のようなフローで記事を作成しています。

1. 企画メモを作る​

まずは記事のテーマ・対象読者・伝えたいことを簡単にメモします。

テーマ: Claude Skills
対象読者: AIツールを使い始めたエンジニア
ゴール: スキルの探し方・導入・活用を自分でできるようになる

2. technical-writer でアウトラインを作成​

「この企画メモで記事のアウトラインを作って」とAIエージェントに指示すると、
technical-writer スキルが自動的に適用され、構成案が出力されます。

見出しの順序や粒度を調整するだけで、記事の骨格が完成します。

3. 下書きを作成​

アウトラインをもとに、本文を書いていきます。
コード例やスクリーンショットも入れると読みやすくなります。

4. japanese-copywriting で校正​

書き終えたら「この記事を校正して」と指示します。
冗長な表現、不自然な言い回し、読みにくい箇所を指摘してくれます。

5. fact-checker で技術的な確認​

「この記事の技術的な記述を確認して」と指示すると、
コマンドの書式やバージョン情報、仕様の正確性をチェックしてくれます。

6. front matter を整えて投稿​

最後に記事ファイルの先頭にある front matter（slug、title、date、authors、tags）を確認し、
リポジトリにプッシュすれば完了です。

自作スキルを作ることもできる​

既存のスキルで足りない場合は、自分でスキルを作ることもできます。

npx skills init my-custom-skill

生成されるスキルファイルは Markdown ベースの YAML フロントマター付きファイルで、
特別なプログラミング知識がなくても記述できます。

たとえば「社内コーディング規約に沿ったレビューを自動で行うスキル」や
「特定フレームワークの設計方針を教え込むスキル」など、
チーム固有のノウハウをスキルとして共有できるのが大きなメリットです。

まとめ​

• Skills は AIエージェントに専門知識を追加するプラグイン的な仕組み
• npx skills find で検索、npx skills add でインストールするだけで使える
• 記事作成なら technical-writer / japanese-copywriting / fact-checker の組み合わせが効果的
• 自作スキルでチーム固有の知見も共有可能

AIエージェントを「汎用アシスタント」から「チーム専属の専門家」に変えてくれる仕組みなので、
ぜひ一度試してみてください。

参考リンク​

• Skills CLI: https://skills.sh/
• Claude Code: https://docs.anthropic.com/en/docs/claude-code