以下作ってみて感じたことをざっくり紹介
結構簡単にできるから面白い
HTMLで作る。Reactで作らない
Reactだとcdnが使えないので、レイアウト用のライブラリが限られてしまう。
HTMLで作ること
UIライブラリ用にCSSを読み込む場合は、Safariやwebkit系のブラウザを使う
実際にChrome等でTailwindCSSを使ってClaude Artifactsを使ってWebサイトを作ってみるとわかるが、デザインが適用されていないのがわかる。
前の記事で紹介したけど、ChromeやFirefoxだとCSPでCSSが読み込まれなかったりする。
SafariとかGnomeのブラウザだとサクッと読み込める(Windowsはどうすればいいかわからない・・・)
UIライブラリを指定する
tailwind, daisy, bulma, bootstrapとか指定するとサクッと作ってくれるので色々試すの楽しい
アイコンをつける
fontawesomeとかからアイコンを使ってくれるので、手軽に見た目が良くなる。
デザインを作ってから詳細コンテンツをMarkdownとかで指定する
まずいい感じのデザインを作って、あとからMarkdown等でコンテンツを流し込むといい感じになる
意外と出力できる量が少ない
出力トークンの関係で大きめのサイトを作ろうとすると、途中で止まってしまうことも結構ある。
出力する内容を取捨選択するしかない。
あとで自分で編集するなら、コンポーネント単位で出力してもらうのもいいかも