Webデザイン補助

Tailwindベースの任意のWebページで要素の調査やclassの削除及び追加等が出来るオープンソースのブラウザ拡張・「tifoo」

TailwindベースのWebページで任意の要素などにclassを追加する等のリアルタイム編集を簡単に行えるブラウザ拡張・「Toolwind」

React、Shadcn/ui、Tailwindを使用したオープンソースのランディングページコンポーネント・「Launch UI」

Ads

Reactコンポーネントとして提供されている、shadcn/uiと互換性のあるオープンソースのノーコードUIビルダー・「UI Builder for shadcn/ui」

3000以上の世界中のブランドアイコンを提供するSimple IconsをURLで表示できる・「Simple Icons CDN」

スクリーンキャストを撮るだけでその行動のチュートリアル動画をAIが生成してくれる・「guidde」

任意のWebサイトを編集可能なFigma用ファイルに変換できる・「html.to.design」

CSSとHTMLだけで作れる様々なUIのコードを公開しているCSSスニペットコレクション・「CSS Stock」

FigmaやFigjamのテキスト入力にChatGPTを使えるFigmaプラグイン・「FigGPT」

ベーシックなものからユニークなものまでCSSで作られたボタンを100個まとめた・「UI Buttons」

Tailwind.cssのチートシートをその場で表示、検索も可能なオープンソースのChromeエクステンション・「Tailwind Cheat Sheet inside Chrome Extension」

Googleフォントと互換性を持ったGDPR準拠のプライバシーを重視したWebフォントプラットフォーム・「Bunny Fonts」

様々なタイプのCSSアニメーションを、その場で動作確認し、コードをコピーできる・「AnimatiSS」

様々なタイプのWebサイトのUIテンプレートをFigmaやPS用ファイルで無償配布する・「DopeUI」

様々なオープンソースのアイコンプロジェクトを編集してダウンロードしたりコードをその場でコピーできる・「Iconer」

画像内の消したい部分を指定するだけでAIで自動消去してくれる・「Magic Eraser」

やや緩いタッチで描かれた手書きの線画アイコンのセット・「Doodle Icons」

デザインに関する多種多様なリソースを大量にアーカイブ、カテゴライズしたコレクション・「Toools.design」

任意のWebサイトで使用されている色を抽出してパレットやCSSのコードを自動生成する・「Alwane」

JavaScriptを使ったWebアプリの設計を改善するためのパターンやヒント、コツをまとめた・「Patterns.dev」

ダミー画像をイラストで生成してくれるダミー画像生成サービス・「Doodle Ipsum」

アニメーションするユニークな背景を作れるコードを配布する・「Animated Backgrounds」