Felo
HTML・CSS部品作成AI
HTML・CSS部品作成AIとは？
指定内容のHTML・CSSと、必要最小限のJavaScriptを分けて作ります。 小さなWeb部品の実装を準備する人が、手元の情報から次の作業へ進めるよう、入力の整理と結果づくりを一つの対話で行います。
HTML・CSS部品作成AIでは、曖昧な依頼に長い質問票を返すより、分かる範囲で初稿を作ることを優先します。必要なテーマが完全にない場合だけ、最初の情報を一つ伺います。
HTML・CSS部品作成AIでできること
- HTML： 用途、コンテンツ、画面サイズ、既存フレームワークを整理する。
- CSS： 意味のあるHTMLとレスポンシブCSSを作り、キーボード操作・ラベル・コントラストに配慮する。
- 必要なJavaScript： 動きが必要な時だけJavaScriptを追加し、依存と組込位置を示す。
- 組み込み方法： DOM構造や構文を確認し、実ブラウザで未確認の見た目はその範囲を示す。
使い方
- 作りたい部品、表示内容、配色、利用環境、既存コードを入力してください。ファイルを添付した場合は「開始」と入力して進めます。
- 対象者、用途、希望する長さや形式が決まっていれば添えてください。未確定の条件は、未確定と書いておけば大丈夫です。
- 結果と確認事項を見て、「この部分を短く」「表の項目を変えて」など、変更したい箇所を指定してください。
入力例と利用場面
そのまま試せる入力例
料金プラン3つを比較するカードを素のHTMLとCSSで作ってください。スマホでは縦並び、ボタンはリンクです。
返す内容の例
3カードを意味のある見出しで組み、狭い幅で1列へ切替。架空の申込先URLを入れない。
使い分け
まず入力例の形で依頼し、結果を見て対象・条件・長さを変えて調整できます。確認済みの情報と、これから決める内容を分けると、修正のやり取りも進めやすくなります。入力例は利用方法を示すものです。そこで使った数字や架空の設定を、実際の利用者へ引き継ぐことはありません。
結果を使いやすくするコツ
元の文章、正しい固有名詞、確定した条件があれば、そのまま添えてください。計算の対象や根拠の範囲を限定したい時も、最初に指定すると確認しやすくなります。
結果に入れたくない表現や既知の制約も共有してください。ホスティングやデプロイを行ったと主張しない。 初稿は、実際の用途と資料に照らして確認し、必要な箇所を修正して使うことを想定しています。
よくある質問
どんな情報や形式を入力できますか？
基本は作りたい部品、表示内容、配色、利用環境、既存コードです。文章の貼り付けや、内容を取得できる添付資料を使います。URLだけでは本文を確認できない場合は必要な文章も貼り付けてください。取得できなかったファイルやページはその旨を示します。長い資料は、対象範囲や見たい部分も指定してください。
情報が足りなくても始められますか？
作業のテーマが分かれば、任意の条件が足りないだけで止めずに進めます。仮の前提や未確認事項は結果に残し、数字、期限、発言を根拠なく埋めません。必要な元データがない計算や、取得できない事実は未確認として扱います。
ChatGPTなどの汎用AIチャットとの違いは？
HTML・CSS部品作成AIは、HTMLから確認項目までを、今回の用途に合わせた決まった流れで整理します。他のサービスの全機能や管理画面を再現するものではありません。不要な追跡コードや外部依存を追加しない。
生成や取得に失敗したらどうなりますか？
できた部分を先に返し、未完了の処理と必要な次の入力を説明します。画像やファイルは実際に生成できた結果だけを案内します。修正する際は、対象箇所と変えたい内容を指定してください。