ローカルファーストのデザイン生成OSS「open-design」がGitHubで38,353スターに到達した。Anthropicが提供する Claude のデザイン機能に対抗するOSSとして、Claude Code や Codex 上でローカル動作し、Web・アプリ・スライド・動画のプロトタイプを自然言語から生成する。71種類のブランド級デザインシステムを同梱しており、外部にデータを出さずにプロダクション品質のアセットを吐き出せる点が、デザイナーと個人開発者の支持を急速に集めている。
何が起きたか
nexu-io が公開した nexu-io/open-design が、公開からごく短期間で38,353スターを記録し、GitHub Trendingの上位に定着している。位置付けは明快で、Anthropic Claude のデザイン生成機能(クラウド側でレンダリングされるプロプライエタリ機能)に対する「Local-first, open-source alternative」だ。
機能面の見どころは大きく3つ。第一に、19種類の Skill (生成タスクのプリセット) を内蔵し、Landing Page、Mobile UI、Pitch Deck、Short Video まで同一CLI/エージェントから呼び出せる。第二に、71種類のブランドグレードのデザインシステムが組み込み済みで、トークン(色・タイポ・スペーシング)を選ぶだけで一貫性のあるアウトプットが得られる。第三に、Claude Code / Codex のエージェント環境上で動作するため、ファイル操作・コード生成・プレビューサーバ起動までを既存のローカル開発フローに溶け込ませている。
なぜこのニュースが重要か
このリポジトリの伸びが示唆しているのは、「デザイン生成のワークロードがクラウドAPIからローカルエージェントに移り始めている」という潮流だ。Figma AIやClaudeのCanvas系機能は強力だが、未公開IPやNDA配下のブランドアセットを外部に送る前提が、エンタープライズ採用の天井になってきた。open-design は推論こそ LLM API (Anthropic / OpenAI) を介すが、デザインソース・アセット・出力物はすべてローカルに留まる設計のため、「プロンプトだけ送る、成果物は手元」というハイブリッド構成が成立する。
加えて、71種のデザインシステム同梱というのは地味だが効く。多くのチームが内製しているのは結局のところ Tailwind + shadcn/ui のフォーク + 独自トークンであり、それらの「最大公約数」を最初から持ち込めることは、PoC段階のリードタイムを数日単位で削る。
エンジニア視点・技術深掘り
実装面で注目すべきは、Claude Code / Codex の Skill 機構をフル活用している点だ。Claude Code の Skill は ~/.claude/skills/ 配下に Markdown + スクリプトを置くことでエージェントの能力を拡張する仕組みで、open-design はこれをデザインドメインに特化させている。典型的な利用イメージはこうなる。
# install
npx open-design init
# 生成タスクを叩く
claude "Create a SaaS landing page using the 'linear' design system, dark mode, with pricing table"
エージェントは内部で Skill を選択し、コンポーネントを React + Tailwind で吐き出し、pnpm dev を立ち上げ、Playwright でスクリーンショットを撮ってフィードバックループに入る、という流れだ。動画生成は Remotion ベース、スライドは Reveal.js または MDX ベースとされ、いずれも「コードとしてのデザイン」を出力するため Git で diff が取れる。これは Figma のバイナリ資産では得られない利点で、CI でビジュアルリグレッションテスト (Chromatic / Playwright) を回しやすい。
ローカルファーストのアーキテクチャ上、気をつけるべき点もある。LLM 呼び出しは Anthropic / OpenAI の API キーを利用する構成のため、「ローカル完結」と言っても推論プロンプトは外部に送られる。秘匿性の高いブランドガイドを扱う場合は、Skill のテンプレート側でプロンプトに含めるブランド情報を抽象化するか、Ollama 経由のローカルLLM (Llama 3.3, Qwen 2.5-Coder など) にフォールバックする運用が現実的だ。リポジトリの Issue でもローカル推論サポートの議論が活発化している。
もう一点、デザインシステムの「ブランド級」という表記は誇張に近い面もある。同梱されているのは Linear、Vercel、Stripe ライクなパブリックに観察可能なスタイルガイドのリインタープリットであり、商用利用時は自社ブランドへの差し替えが前提になる。token override の仕組み (design.config.ts) を最初に固めておくと、PoC からプロダクションへの移行で詰まらない。
経営者・実務者として次に取るべき動き
短期的には、社内のデザイン業務を「アイデア出し」「量産」「最終仕上げ」の3層に分解し、量産フェーズに open-design 系ツールを差し込むのが現実解だ。ピッチデッキ、LP のA/Bバリアント、社内ツールのUI、ショート動画の絵コンテといった「枚数で殴る」工程はROIが出やすい。一方、ブランドコアやプロダクトの主要画面は、引き続きシニアデザイナーの判断が必要であり、ここを安易に自動化すると一貫性が崩れる。
技術選定の観点では、(1) Claude Code / Codex を社内に導入済みか、(2) ブランドトークンが Code として管理されているか (Style Dictionary, Tailwind config など)、(3) 生成物のレビュー体制 (Pull Request ベースのデザインレビュー) があるか、の3点を先に整えるべきだ。これらが揃っていれば open-design の導入はほぼ「npx 一発」で済むが、揃っていない組織では生成物の品質ばらつきに振り回されて結局工数が増える。
38,353スターはまだ「アーリーアダプターの熱狂」のフェーズだ。だが Local-first × エージェント × デザインという組み合わせは、今後1年で Figma / Adobe / Canva のいずれもが追随を迫られる領域になる。手を動かして検証するなら、コストもリスクも低い今がちょうどよい。
動画でも詳しく
動画は記事冒頭の埋め込みからフル尺で視聴できます。