Chakra UIというのはReact向けに開発されているシンプルなUIコンポーネントです。Reactではコードの中にHTML構造が入り込んでいるので、デザイナーにとっては作業しづらいイメージがあります。 そこで使ってみたいのがOpenChakraです。ドラッグ&ドロップでChakra UIを使ったデザインを行えます。

OpenChakraの使い方

左側にあるパーツをドラッグ&ドロップしてデザインします。

プロパティを使って細かな調整も行えます。

作成したデザインはCodeSandboxで試せます。

OpenChakraを使えばChakra UIにあるUIコンポーネントを閲覧しつつ、デザインを進められます。コンポーネントも多数あるので、それが一覧になっていると分かりやすいでしょう。OpenChakraを使えばプログラマーであってもデザインがさくさく進められそうです。

OpenChakraはTypeScript製のオープンソース・ソフトウェア（MIT License）です。

OpenChakra premieroctet/openchakra: ⚡️ Visual editor for Chakra UI