ソリューション： Onlookによる設計と開発のリアルタイム同期化
オンルックは、設計と開発を切り離すというペインポイントを、以下のコア機能で解決します：
- リアルタイム双方向バインディングOlookプラグインをインストールすると、デザイナーがブラウザ上でコンポーネントをドラッグ＆ドロップして微調整すると、ツールが自動的にDOMノードの変更を追跡し、ReactコンポーネントのpropsまたはTailwindCSSクラス名にマッピングします。
- コード生成ロジックOlookのコード変換エンジンは、視覚的な変更を、1）コンポーネント構造の変更、2）スタイルクラスの更新、3）レイアウトプロパティの調整、に分解し、対応するJSX/Tailwindコードスニペットを生成します。
- バージョン管理の統合Publishを押すと、ツールはGitHub API経由でfeatureブランチを作成し、コンポーネントファイルの変更とスタイルの更新を含むPRを提出し、コードベースを整頓します。
注目点1) プロジェクトがReactのバージョン18以上であることを確認する 2) カスタム・コンポーネントの場合、編集可能な領域はdata-onlook-component属性で宣言する必要がある 3) 複雑なアニメーションはコードで実装することを推奨する。
この答えは記事から得たものである。Onlook: フロントエンド設計のためのオープンソースCursor、Reactアプリケーションの設計とコードの公開について
無断転載を禁じます：AI生産性ツール " Reactプロジェクトでデザインの変更をコードとシームレスに同期させるには？
