Pencil

UI/UXデザインの反復

エンジニアが開発ワークフロー内で直接ユーザーインターフェースをデザイン・調整できます。

プロトタイピングと画面作成

コンテキスト内で画面全体や特定コンポーネントをプロンプトで生成し、迅速にプロトタイプを構築。

デザインシステム統合

既存のブランドキットや厳選されたデザインシステムを活用し、視覚的一貫性を維持。

コード連動型デザイン制作

ビジュアルデザインからピクセルパーフェクトで本番環境対応のHTML、CSS、Reactコードを生成。

他ツールからのデザイン移行

Figmaからベクターデザイン、テキスト、スタイルを直接コピー＆ペーストして開発環境へ。

バージョン管理されたデザインワーク

Gitを使用してデザインファイルをバージョン管理、ブランチ、マージし、コードと一緒に管理。

無限のデザインキャンバス

IDE内でピクセルパーフェクトな精度で製品をデザイン。ツールを切り替える必要はありません。

精密なコンテキストデザイン

厳選またはカスタムアクションを使用し、コンテキスト内で直接画面全体や特定部分をプロンプト生成。

ピクセルパーフェクトなコード生成

生成されたHTML、CSS、Reactコードがオリジナルデザインを忠実に再現する、本番環境対応アプリを納品。

厳選デザインキット

シニアデザイナーの技が詰まったコンポーネントベースのデザインキットを使用して製品を構築。

カスタムデザインシステム統合

チームの既存デザインシステムをコードベースから直接接続。

完全オープンファイルフォーマット

自社ツールでデザインファイルを読み取り、デバッグ、拡張可能。ベンダーロックインを回避。

Figmaインポート

Figmaからデザインを直接コピー＆ペースト。ベクター、テキスト、スタイルはそのまま引き継がれます。

デザイン即コード

デザインファイルをコードリポジトリに保存し、Gitでバージョン管理、ブランチ、マージを実行。