
Webデザイナー向け


コピペで簡単利用も出来るオープンソースのTailwindベースUIコンポーネントライブラリ・「Tailframes」

FigmaとTailwind.cssをベースに大量のUIコンポーネントを備えたオープンソースのUIライブラリ・「Pagedone」

任意のカラーパレットを作成、管理、共有、プロジェクトと統合出来るオープンソースのカラーパレット管理プラットフォーム・「Hue Harbor」

Tailwind.cssの様々なUIコンポーネントのデザインサンプルを大量に公開している・「Tailwind CSS Components」

Vue.js開発者向けのオープンソースのプロトタイピングツール・「PreVue」

Googleフォントとアイコンを組み合わせてシンプルなロゴを作成出来るオープンソースのWebアプリ・「Wordmark」

シンプルで見やすく使いやすいオープンソースのReact UIライブラリ・「WoozDesign」

レスポンシブでアクセシブルなUIコンポーネントのライブラリ・「Rafty UI」

生成AI系のアプリでよく使う任意のプロンプトを変数付きで設定し、スラッシュコマンドで呼び出せるオープンソースのブラウザ拡張・「PromptSnippets」

Webにおけるネオ・ブルータリズムの美学を取り入れたCSSフレームワーク・「NeoBrutalismCSS」

高品質なピクセルアートをAIで生成するためのOSS・「Pixelfy」

ブラウザで任意のプロンプトに沿って画像を生成、自由に利用できる無料の画像生成AIサービス・「unstock.ai」

ChatGPTを使ってカラーパレットを生成、何故その色を選んだかの解説や、プレビューやアクセシビリティなどを確認も出来る・「HueHive」

直感的な操作で簡単なチャート作成やコード画像化など様々な画像を無料で作成、DL出来る多機能Webアプリ・「Picyard」

CSVやJSON、Googleスプレッドシート等のデータセットを読み込んでプロンプトを入力し、AIによる任意のチャートを作成出来る・「ChartGen AI」

HTMLメールの作成、保存、送信等が可能なオープンソースのノーコードアプリ・「Waveditor」

1つのHTML要素で実装できるCSSローダーのコードを500以上紹介している・「CSS Loaders」

CC0ライセンスで配布されている、トランスヒューマンを題材に描かれたイラスト集・「transhumans」

様々なタイプのReact UIコンポーネントの動作を確認できる・「ReactDemos.com」

クラスやID、属性、疑似クラス、疑似要素等CSSセレクタの使い方をビジュアルで学べる・「CSS Selectors: A Visual Guide」
