テンプレート

AI エージェント向けの UI テンプレート。

テーマだけではない、完成したアプリと Web サイトのデザイン。プロダクトに必要なすべての画面を、リアルな内容で、素の HTML と Tailwind で用意しました。1 つクローンすれば、Codex や Claude Code があなたのプロダクトに仕立ててくれます。

ランニングアプリMobile app無料のランニングアプリ UI テンプレート。HTML と Tailwind の 8 画面にデザインシステム付き。Codex や Claude Code で自分のアプリに。8 screens · Free and open source
フードデリバリーアプリMobile app無料のフードデリバリーアプリ UI テンプレート。メニューから追跡まで HTML と Tailwind の 8 画面。Codex や Claude Code で自分のアプリに。8 screens · Free and open source
家計管理アプリMobile app無料の家計管理・支出管理アプリ UI テンプレート。数字がそろった HTML と Tailwind の 8 画面を、Codex や Claude Code で自分のアプリに。8 screens · Free and open source
瞑想アプリMobile app無料の瞑想・睡眠アプリ UI テンプレート。プレーヤーや呼吸ガイドから睡眠ストーリーまで 8 つのスマホ画面を HTML と Tailwind で。Codex や Claude Code ですぐ使えます。8 screens · Free and open source

テンプレートの使い方

作りたいプロダクトに合わせてテンプレートを選びます。
npx degit ummydev/ui-templates/apps/<name> my-app でそのテンプレートだけをコピーします。
エージェントに自分のものにしてもらいます。 どのテンプレートにも、デザインシステムが DESIGN.md として入っているので、新しく追加する画面も既存の画面とそろいます。

どのテンプレートも無料で、MIT ライセンスのオープンソースです。GitHub の ummydev/ui-templates で公開しています。SaaS のランディングページと SaaS のダッシュボードも、近日公開予定です。

素の HTML はどこでも開けて、どの AI エージェントでも読めます。デザインを自分のものにしたら、エージェントに React、Next.js、React Native、SwiftUI、Flutter で作り直してもらいましょう。

はい。デザインシステムライブラリには、Web サイトとアプリ向けの 24 のシステムがそろっていて、DESIGN.md としてエージェントに渡せます。