Hylse

中核はテキストからReactコンポーネントを作る流れだ。欲しい画面、含めるべき要素、ページ上での並びを書き、送ると画像ではなくコンポーネントのコードが返る。出力は実際のプロジェクトで動く前提なので、初稿で最初の一往復を省けたときに価値が出る。

生成されるコンポーネントには、別のスタイルシートではなくTailwindのユーティリティクラスが付く。すでにTailwindを使っているチームに向く。マークアップがコードベースの書き方とそろうからだ。AI Reactコンポーネント生成ツールとして、次の指示で余白の刻みや配色を変えることもできる。クラス名をひとつずつ直す必要はない。

最初の一回で決まることはほとんどない。Hylseは追加指示を重ねる前提で作られており、合わない点を言葉で伝えて直す。コードを自分で書き直さない。小規模なチームでTailwind CSSコンポーネント生成ツールが効くのはこの部分で、修正のやり取りが普通の言葉のまま続く。

ブレークポイントは手書きTailwindで最も面倒なところだ。このツールはスマートフォン、タブレット、デスクトップの幅で崩れないレイアウトを、すべてのクラスに接頭辞を足さずに出すことを狙う。公開前にマークアップを確認し、デザインと違う端だけ調整する。

コンポーネントは既存のReactアプリに貼れるコードとして出てくる。受け渡しが単純になる。独自の実行環境に縛られず、ページをHylse上に置く必要もない。React Tailwindコード生成としての実用上の限界は、自分のビルド設定が受け入れる範囲になる。

入力が日常の言葉なので、Reactの基本を知っていればTailwindに習熟していなくても画面の初稿を作れる。試作に関われる人が増える。とはいえ公開前に開発者がコードを見るべきなのは変わらない。