Vue.js開発者向けのオープンソースのプロトタイピングツール・「PreVue」
PreVueはVue.js開発者向けのオープンソースのプロトタイピングツールです。CI/CDパイプラインにおける共通の課題である、デザイナーとデベロッパー間の遅延を解決するために開発されました。
Resource - Webデザイナー向け
Googleフォントとアイコンを組み合わせてシンプルなロゴを作成出来るオープンソースのWebアプリ・「Wordmark」
WordmarkはGoogleフォントとFeatherをフォークしたオープンソースのアイコンセットのLucideを組み合わせてシンプルなロゴを作成出来るオープンソースのWebアプリです
シンプルで見やすく使いやすいオープンソースのReact UIライブラリ・「WoozDesign」
WoozDesign WoozDesignはシンプルで見やすく使いやすいオープンソースのReact UIライブラリです。Webアプリ用として設計されたみたいです。 無駄のないスタイルでフィンテックや解析、分析、など情報を正しく明...
レスポンシブでアクセシブルなUIコンポーネントのライブラリ・「Rafty UI」
Rafty UI Rafty UIはレスポンシブでアクセシブルなUIコンポーネントのライブラリです。デザインシステムの構築を簡単にしてくれるとの事です。 開発しているアプリのデザインシステムとシームレスに連携出来るように開発され...
生成AI系のアプリでよく使う任意のプロンプトを変数付きで設定し、スラッシュコマンドで呼び出せるオープンソースのブラウザ拡張・「PromptSnippets」
PromptSnippets PromptSnippetsはChatGPTなど生成AI系のアプリでよく使う任意のプロンプトを変数付きで設定し、スラッシュコマンドで呼び出せるオープンソースのChrome拡張です。 名前の通りで、い...
Webにおけるネオ・ブルータリズムの美学を取り入れたCSSフレームワーク・「NeoBrutalismCSS」
NeoBrutalismCSS NeoBrutalismCSSはWebにおけるネオ・ブルータリズムの美学を取り入れたCSSフレームワークです。 デザインにおける「ネオ・ブルータリズム」は20世紀半ば頃のブルータリズム建築運動（W...
高品質なピクセルアートをAIで生成するためのOSS・「Pixelfy」
Pixelfy Pixelfyは高品質なピクセルアートをAIで生成するためのOSSです。Next.js + PlanetScaleで構成されています。その他の技術スタックはリポジトリでご確認頂けます。 AIを搭載したプロンプトビ...
ブラウザで任意のプロンプトに沿って画像を生成、自由に利用できる無料の画像生成AIサービス・「unstock.ai」
unstock.ai unstock.aiはブラウザで任意のプロンプトに沿って画像を生成、自由に利用できる無料の画像生成AIサービスです。既にAI画像生成の方法は数多く存在しますのであえて選択する大きな理由は無いかもしれませんが、気軽...
ChatGPTを使ってカラーパレットを生成、何故その色を選んだかの解説や、プレビューやアクセシビリティなどを確認も出来る・「HueHive」
HueHive HueHiveはChatGPTを使ってカラーパレットを生成、プレビューやアクセシビリティなども確認出来るAIカラーパレット生成アプリです。スマホアプリやFigmaプラグインも提供しているみたいです。 任意のプロン...
直感的な操作で簡単なチャート作成やコード画像化など様々な画像を無料で作成、DL出来る多機能Webアプリ・「Picyard」
Picyard Picyardは直感的な操作で簡単なチャート作成やコード画像化など様々な画像を無料で作成、DL出来る多機能Webアプリです。 一言で言えば様々な画像ジェネレーターアプリ、という感じですが、よくあるチャート作成、Q...
CSVやJSON、Googleスプレッドシート等のデータセットを読み込んでプロンプトを入力し、AIによる任意のチャートを作成出来る・「ChartGen AI」
ChartGen AI ChartGen AIはCSVやJSON、Googleスプレッドシート等のデータセットを読み込んでプロンプトを入力し、AIによる任意のチャートを作成出来るWebアプリです。 AIベースのノートアプリを提供...
HTMLメールの作成、保存、送信等が可能なオープンソースのノーコードアプリ・「Waveditor」
Waveditor WaveditorはHTMLメールの作成、保存、送信等が可能なオープンソースのノーコードアプリです。 よくある、プレビューを見ながら直接編集できるもので、マウスホバーで編集したいエリアが分かるので任意のエリア...
1つのHTML要素で実装できるCSSローダーのコードを500以上紹介している・「CSS Loaders」
CSS Loaders CSS Loadersは1つのHTML要素で実装できるCSSローダーのコードを500以上紹介しているCSSローダーのコレクションサイトです。動作デモをクリックすればコードのコピーが完了します。 全てのロー...
CC0ライセンスで配布されている、トランスヒューマンを題材に描かれたイラスト集・「transhumans」
transhumans transhumansはCC0ライセンスで配布されている、トランスヒューマンを題材に描かれたイラスト集です。 「トランスヒューマン」という言葉はあまり馴染みが無いかもしれませんが、例えばSFなんかに出てく...
様々なタイプのReact UIコンポーネントの動作を確認できる・「ReactDemos.com」
ReactDemos.com ReactDemos.comは様々なタイプのReact UIコンポーネントの動作を確認できるWebサイトです。いわゆるUIギャラリーサイトみたいな感じです。 スムーズなリストアイテムのドラッグ&ドロ...
クラスやID、属性、疑似クラス、疑似要素等CSSセレクタの使い方をビジュアルで学べる・「CSS Selectors: A Visual Guide」
CSS Selectors: A Visual Guide CSS Selectors: A Visual GuideはクラスやID、属性、疑似クラス、疑似要素等CSSセレクタの使い方をビジュアルで学べるWebサイトです。 テキ...
各項目に入力するだけで簡単に棒グラフを作成出来るWebアプリ・「Bar Graph Maker」
Bar Graph Maker Bar Graph Makerは各項目に入力するだけで簡単に棒グラフを作成出来るノーコードWebアプリです。 以前ご紹介したGraphyはテーブルに入力するタイプでしたが、こちらはもっとシンプルな...
AIアプリ等のプロジェクト向けにTailwindベースで作られたオープンソースのUIコンポーネント・「LangUI」
LangUI LangUIはAIアプリ等のプロジェクト向けにTailwindベースで作られたオープンソースのUIコンポーネントです。 AIアプリと言うか、ほぼAIチャット向けのUIという感じで、プロンプトの入力フォームや対話UI...
既存のフォームに簡単にドラッグ&ドロップによるファイルアップローダーを設置できるシンプルなJavaScriptライブラリ・「EasyDropzoneJS」
EasyDropzoneJS See the Pen Untitled by kachibito (@kachibito) on CodePen. EasyDropzoneJSは既存のフォームに簡単にドラッ...
プレビューを見ながら編集できるオープンソースのシンプルな請求書作成アプリ・「Invoice Kitchen」
Invoice Kitchen Invoice Kitchenはプレビューを見ながら編集できるオープンソースのシンプルな請求書作成アプリです。 プレビューと言うか、既にレイアウト済みのページで直接編集できるようになっている、とい...
Codespacesに似たクライアント専用のオープンソース開発環境・「DevPod」
DevPod DevPodはCodespacesに似たクライアント専用の、再現可能な開発者環境を作成するためのOSSの開発環境ツールです。 完全無料で、大半のクラウドプロバイダーをサポートしておりベンダーロックインも無く、安心し...
フォームに記入するだけで請求書や領収書を作成してPDFに出力できるOSS・「Invoice Dragon」
Invoice Dragon Invoice Dragonはフォームに記入するだけで請求書や領収書を作成してPDFに出力できるオープンソースのWebアプリです。 表題の通りで、必要事項をフォームに入力すればあらかじめ用意された請...