Frontier – ご自身の思い通りのAIコード生成ができる、フロントエンド特化型コード生成1 min read

生成AIの時代において、私達はAIが自分の言うことを理解してくれるものだと期待しています。そして、たいていの場合、実際に理解をしてくれます。ほんの少しのヒントで欲しいものを与えてくれるAIツールは、まるで魔法のようです。

Animaの目標は、フロントエンドの設計を自動化することです。そうすることで、人間が時間を無駄にすることがありません。2023年の間に、AnimaのAIは75万個のコードスニペットを生み出しました。これは人間のコーディング作業の1000年分にあたります。Figmaのプラットフォーム上で100万回以上インストールされているAnimaは、先進的なDesign to Code分野のツールです。

次の段落では、毎日のフロントエンドコーディングの自動化について、さらに深く見ていきましょう。

現在のLLM（大規模言語モデル）はフロントエンドとUIを理解していない

コードの完成から指示まで、コード生成には様々なモデルがあります。現在、複数の人気のCoplitと呼ばれるコーディングアシスタントが存在しており、Coplitはこれらのコードモデルに基づいて、コーディングの高速化を支援してくれます。

しかし、フロントエンドの自動化となると、期待と生成されたものとの間に大きなギャップがあることも少なくないでしょう。Animaの能力とこの領域への理解によって、当社ではこのギャップを埋めることを目指しています。

そして今日、当社はFrontierというAIコーディングアシスタントをご紹介します。Frontierはフロントエンドの構築を行うデベロッパー向けのツールです。

Frontier – ご自身の思い通りのAIコード生成ができる、フロントエンド特化型コード生成

AnimaのFrontierは総合開発環境（IDE）を必要としている場所に適応します。最も人気のあるIDEであるVSCodeからはじめましょう。

まず、Frontierは全体のコードベースを分析し、コードデザインシステム、フレームワーク、規則、要素をマッピングします。この作業には数秒で終了し、ローカルで行われるため、ご自身のコード情報はしっかりと守られています。

つぎに、Animaの最先端のDesign to Codeエンジンを使用することで、Frontierはユーザーのデザインを解析し、デザインバージョンとデザインシステムのコードの中にあるものを理解します。

そして最後に、VSCodeの中にあるFigmaのデザインの任意の部分を選択してみましょう。すると、ご自身のコードに基づいたコードが入手できます。まるで魔法のようですね。

アクセスをリクエスト

自動化でデザインシステムの導入を増やす

熟慮したプロジェクトには、数千とはいかないまでも、数百の構成要素がよくあります。

設計システムのガバナンスと採用は、これらのプロジェクトを維持するために極めて重要なやりがいのあるタスクです。自動化が役立ちます。

AIのセキュリティと防波堤

フロンティアは、企業で使用可能なレベルのセキュリティソリューションを提供するため、ゼロから構築されました。

企業におけるAIの導入は、下記のようなよくあるプライバシーの懸念によって、ためらわれがちです。

• プライバシーの保護：LLMモデルのトレーニングを通して、自社のコードが「漏洩」し、他社がコードの一部を入手してしまう可能性はないか？
• プライバシーの侵害：LLMに取り込んで微調整したりトレーニングされた他社のコードが、確実に自社のコードベースに入ってこないようにする方法はあるか？セキュリティや著作権侵害の懸念がある。

Figmaデザインに対するAnimaの解釈を統合するコードを生成し、同時にユーザーのコードベースを使用するためには、簡単な方法があります。単にLLMにコードベースのトレーニングをさせれば良いのです。しかし、このためには、莫大な量の企業および個人のコードをアップロードし、カスタムLLMをトレーニングする必要があるため、深刻なプライバシーとセキュリティの懸念があります。当社は、企業環境で働くデベロッパーにとっては特に、セキュリティとプライバシーが非常に重要であることを理解しています。そこで、当社は全く異なるアプローチを取りました。

当社では、コードをクラウドにアップロードするのではなく、VS Codeの中で、ローカルにデータ収集、インデックス作成、MLモデルを実行しました。このツールは、デベロッパーのデバイス上で、関連するコードを特定し、インデックスを作成します。集まった情報はコードベースの一部としてローカルで保管されます。これによって、コードはクラウド上ではなく、Git上でチームメンバーに安全にシェアすることができます。特定のコンポーネントをインスタンス化する必要がある場合、当社はローカルで事前に莫大な量の情報処理を実行してから、クラウドでLLMに対し、イングレスでもエグレスでも企業をリスクに晒すことのない最小限のコードと必要な情報のみを送ることができます。この革新的なアプローチは、ほとんどの操作がデベロッパーの高速コンピューター上で行われるため、パフォーマンスが向上するというメリットもあります。

Frontierの裏側 – LLMs、ML、AIファーストのシステム構造

AnimaのFrontierは、この分野におけるAnimaの豊富な経験に基づいた、AIを使ったフロントエンドの自動化ツールで、ミッションの実現のために先進的なテクノロジーを活用しています。

99%をLLMの自動化ツールで作った結果、30％の確率で素晴らしいコードができあがることはありますが、これは趣味の範囲では十分だとしても、プロには適しているとは言えません。

LLMは新たな革新をもたらしてくれる強力なツールではありますが、精度が高いとは言えません。Animaでは、タスクに適したツールを選択し、テストとベンチマークを行っています。LLMに関しても、当社はコンテクストを与え、結果を検証し、成功に導く準備を行っています。

この複雑な問題を解決するにあたり、当社では問題を10個の小さな課題と要件に細分化しました。クリエイティブを必要とし、LLMで解決するのがベストな問題もあります。特定のモデルは他のものと比べて迅速で性能が優れていました。一部の問題には、一般的な機械学習・コンピュータビジョン問題（つまり生成ではなく分類）が求められるものもありました。また、試行錯誤で解決するのが最も良い問題もありました。

それぞれの問題について最適なソリューションを組み合わせることで、LLMベースのコードソリューションにありがちな、間違った出力のリスクを最小限に抑えながら、驚異的な結果を生み出すことができるのです。

Frontierの未来

当社はデベロッパーがフロントエンドのコーディングを迅速に行えるよう、AIで実現可能なことはすべて活用したいと思っており、現在はまだこのミッション実現の第一歩に過ぎません。AnimaのFrontierは、今後、デザインの更新に合わせてコードをアップデートし、壊れたコードを修復し、ステートとテーマを理解し、要素を正しく名付け、仕様を読み、さらに人間のデベロッパーに近い考え方ができるようになるはずです。

当社のツールには非常に多くの機能が搭載されています。ぜひご自身がもっとも困っていることや、現在フロントエンドデベロッパーの皆さんがAIにやってほしいと思っていることを教えて下さい。 AnimaのDiscordチャンネルから当社と直接お話ができます。

アクセスをリクエスト