カスタムcssとtailwindを見た目で選ぶ css summonerデモサイト公開しました
cssクラスを直感的に生成する
css summonerは要素を選んで、デザインや色などをポチポチするとリアルタイムプレビューできるスタイリングツールです。（開発中のデモです）
例：ボタン→ アウトラインデザイン→ プライマリカラー→ サイズsm→ 角丸sm→ 左アイコン&押し込みアニメーション
まだまだ要素は作成途中ですが、本人や家族の体調不良が連続して中々進まないため 一旦お知らせを書かせていただきました。
スタイリングを楽したい
css、調整のたびにブラウザで確認したり書き直したりクラス名を忘れたり…
自前でcssを書いている人や、tailwind cssを利用している人なら経験あるのではないでしょうか。少なくとも私はあります。ゆえに、もともと自分の為に作り始めたツールなのです。
メニューから希望のスタイルを選ぶだけで必要なクラス名が表示され、プレビューされる。クラス名をコピペしてすぐコードに取り入れられる。これなら間違いないし簡単です。
自前のクラス+tailwindをプレビューできるツールってどうも見当たらず、どうせなら自分で作ってみようと思い立ちました。
css summonerにできること
- スタイルのリアルタイムプレビュー
- クラス名のコピー
- 適用cssのコピー
- HTMLタグ例のコピー
- 任意のクラスの追加反映（tailwindとか自前クラス）
- css変数カラーの編集、コピー
- ↑コントラスト比表示
- cssファイルのダウンロード
内部的にやってること
内部的には行っていますが設定が煩雑なため正式実装には至っていません。調整予定です。
- 型定義自動生成
- Astroコンポーネント自動生成
- ドキュメントページ自動生成（実際に見れます）
どう役に立つ？
- スタイリングにかける時間が圧縮されるかも
- プロジェクト毎にデザインの統一性が図れるかも
- チームでのスタイリングが統一されるかも
- クラス名を忘れても大丈夫かも
- クライアントとデザイン調整がしやすいかも（css summonerを直接見せる）
- スタイルの競合を避けやすいかも（カスタムクラスなので上書きしやすい）
簡単な仕組みの説明
cssファイルから直接情報を抽出しています。アノテーション（コメント）から要素、カテゴリー、バリアントなどを抽出し、cssコードも関連して取得しています。
抽出データをハンドラーファイルで処理し、プレビューやコード表示に使っています。型定義やドキュメントもcss抽出データから生成しています。
フィードバックお願いします
css summonerはまだまだ発展途上です。要素数も少なく、追加したい機能の構想もあります。順次更新していく所存です。
とはいえこういったツール開発は初めてで、ぜひフィードバックいただければ幸いです。もっとこうしてほしい、といったご要望も大歓迎です。
※このツールはAIとの協業で作ることができました。助かりました。生成コードの内容は把握するよう努めていますが、おかしな点などありましたらご指摘いただければたすかります。
Discussion