こぎそ

@kgsi • 10,161 subscribers

デザイナー / 組織と仕組みをデザインする人 / デザインとAI、ウェブ技術の情報発信 / 運営 https://t.co/8EcW8pvqkv / コミュニティ運営 @crossrel_commu / 📻️ https://t.co/shQ33Bi5FF / ex スタートアップ ← SmartHR

Shorts

AIエージェント向けの「DESIGN.md集」がサービス化された。その名も getdesign.md。 Vercel、Stripe、Figma、Claude（Anthropic）など62ブランド分が揃っていて、プロジェクトに置くだけでコーディングエージェントがそのブランドの UIスタイルに合わせて実装してくれる、という発想。それはそうと、DESIGN.mdというリソースの整備が急速に進んでいる中で、実際に使ってる人ってどの程度いるんだろ🤔 DESIGN.mdを挟むとどの程度精度が上がるのか、はそろそろ聞いてみたい気もする。

AIエージェント向けの「DESIGN.md集」がサービス化された。その名も getdesign.md。 Vercel、Stripe、Figma、Claude（Anthropic）など62ブランド分が揃っていて、プロジェクトに置くだけでコーディングエージェントがそのブランドの UIスタイルに合わせて実装してくれる、という発想。それはそうと、DESIGN.mdというリソースの整備が急速に進んでいる中で、実際に使ってる人ってどの程度いるんだろ🤔 DESIGN.mdを挟むとどの程度精度が上がるのか、はそろそろ聞いてみたい気もする。

106,741 Aufrufe

有名サイト「Awwwards」の無料フォントコレクション便利。 Geist、PP Mori、Ranade、HK Grotesk Wideなど、Webの見出しやKVに使いやすい書体がかなりまとまっている。ディスプレイ系や可変フォントを探す入口としてちょうどいい。ただし"Free"でも商用利用やWeb埋め込みの条件はフォントごとに違うので、使う前に配布元のライセンス確認は必要。

有名サイト「Awwwards」の無料フォントコレクション便利。 Geist、PP Mori、Ranade、HK Grotesk Wideなど、Webの見出しやKVに使いやすい書体がかなりまとまっている。ディスプレイ系や可変フォントを探す入口としてちょうどいい。ただし"Free"でも商用利用やWeb埋め込みの条件はフォントごとに違うので、使う前に配布元のライセンス確認は必要。

28,055 Aufrufe

ブランドのロゴ・アートディレクション・タイポグラフィをまとめて眺められるアーカイブ「Brand Archive」。銀行、美術館、航空会社、カフェ、ファッション、スポーツなどカテゴリ別に整理されていて、さらに Landor や Mother、B&B Studio といった制作会社別にも辿れる構造になっている。面白いのは「事例を探す」単位が3軸あること👉 ☑️ カテゴリ軸（銀行・航空会社・AIブランドなど） ☑️ 制作会社軸（Wedgeが作ったもの、Marxが作ったもの…） ☑️ 時代軸（Historical）リブランディングやビジュアル方針を検討するときの一次リファレンスとして使い勝手が良さそう。「この業界のトーンをざっと掴みたい」みたいな粗い探索にも、「あの会社の仕事をまとめて見たい」みたいな深い探索にも効く構造になっている印象。

25,317 Aufrufe

UIアニメーション・インタラクションの事例だけを集めたキュレーションサイト「60fps」が良い。 ☑️ 1,900件以上のショット（実アプリからの動画キャプチャ） ☑️ 452アプリを収録。Threads、CRED、Telegram、Google Geminiなど幅広い ☑️ 89種のフィルター（Swipe / Drag / Morph / Bottom Sheet / Onboarding…）で絞り込める ☑️ Storyboards、App Sitesなどの切り口もある Mobbinがスクリーンショット中心なのに対して、こちらはアニメーション・トランジションに特化している。「この操作のとき、他のアプリはどう動かしてるんだろう」を調べるときに使えるリソース。

UIアニメーション・インタラクションの事例だけを集めたキュレーションサイト「60fps」が良い。 ☑️ 1,900件以上のショット（実アプリからの動画キャプチャ） ☑️ 452アプリを収録。Threads、CRED、Telegram、Google Geminiなど幅広い ☑️ 89種のフィルター（Swipe / Drag / Morph / Bottom Sheet / Onboarding…）で絞り込める ☑️ Storyboards、App Sitesなどの切り口もある Mobbinがスクリーンショット中心なのに対して、こちらはアニメーション・トランジションに特化している。「この操作のとき、他のアプリはどう動かしてるんだろう」を調べるときに使えるリソース。

20,966 Aufrufe

Videos

Anya Rossi

sweetdream.ai

SweetDream.ai•Sponsored•Livecam

Watch Anya Live

Anya is streaming live right now! Join her private show and enjoy exclusive content.

Exclusive private shows

1.2k viewers online

Private Show

Join now for exclusive access

Free preview available • Premium content

UIのクオリティって結局ディテールの積み重ねなんだよな、と改めて思わせてくれる Rene Wang 氏が作ったギャラリーサイト「Detail Design」モーション、アクセシビリティ、最適化などカテゴリ別に「小さいけど体験を変えるディテール」がキュレーションされてる。一つひとつ動画で見られるので、自分のプロダクトに足りないものが見つかるかも。

UIのクオリティって結局ディテールの積み重ねなんだよな、と改めて思わせてくれる Rene Wang 氏が作ったギャラリーサイト「Detail Design」モーション、アクセシビリティ、最適化などカテゴリ別に「小さいけど体験を変えるディテール」がキュレーションされてる。一つひとつ動画で見られるので、自分のプロダクトに足りないものが見つかるかも。

522,830 Aufrufe • vor 5 Monaten

ついさっきリリースされたFigma公式のChrome拡張、かなり実用的だった✨ Webページ全体や特定のUIをキャプチャして、Figmaに貼ると編集可能なレイヤーとして持ってこれる。画像として貼られるのではなく、テキストやフレーム、画像、図形として扱えるのが大きい。試しに Figma MCPで提供していた`generate_figma_design`が、Chrome拡張から、簡単にできるようになった...と理解してる。これで結構デザインの景色が変わりそう。

ついさっきリリースされたFigma公式のChrome拡張、かなり実用的だった✨ Webページ全体や特定のUIをキャプチャして、Figmaに貼ると編集可能なレイヤーとして持ってこれる。画像として貼られるのではなく、テキストやフレーム、画像、図形として扱えるのが大きい。試しに Figma MCPで提供していた`generate_figma_design`が、Chrome拡張から、簡単にできるようになった...と理解してる。これで結構デザインの景色が変わりそう。

159,921 Aufrufe • vor 1 Monat

「デザインハーネス」の思想と定義をまとめたウェブサイトを公開しました。制約・文脈・検証・評価の4層でAIエージェントの力を人の判断で御していく、という考え方を一箇所に整理しています。今後は実践事例やケースも順次追加していく予定です。なお、来週7/9にも「デザインハーネス」についてのイベントを豪華登壇陣を招き開催予定です、そちらもお楽しみに。ちなみに今回、ハーネスの検証の意味も含めてLP、デザインツールは一切使っていません。OGP画像以外はすべてClaude DesignとClaude Codeで制作しています。このあたりの制作プロセスも、追ってナレッジとして共有していきます。

「デザインハーネス」の思想と定義をまとめたウェブサイトを公開しました。制約・文脈・検証・評価の4層でAIエージェントの力を人の判断で御していく、という考え方を一箇所に整理しています。今後は実践事例やケースも順次追加していく予定です。なお、来週7/9にも「デザインハーネス」についてのイベントを豪華登壇陣を招き開催予定です、そちらもお楽しみに。ちなみに今回、ハーネスの検証の意味も含めてLP、デザインツールは一切使っていません。OGP画像以外はすべてClaude DesignとClaude Codeで制作しています。このあたりの制作プロセスも、追ってナレッジとして共有していきます。

65,135 Aufrufe • vor 28 Tagen

2,700個超のSVGアイコンを揃えたオープンソースライブラリ「Reicon」。全部手作業でデザイン・レビューされていて、24×24グリッドにきっちり揃っているのが特徴。アウトラインとフィルの2スタイルがあり、プレイグラウンドで色・サイズ・線の太さを調整してそのまま持っていける。React・Vue・Svelte向けパッケージと依存ゼロのCDN配布で、MITライセンス。

2,700個超のSVGアイコンを揃えたオープンソースライブラリ「Reicon」。全部手作業でデザイン・レビューされていて、24×24グリッドにきっちり揃っているのが特徴。アウトラインとフィルの2スタイルがあり、プレイグラウンドで色・サイズ・線の太さを調整してそのまま持っていける。React・Vue・Svelte向けパッケージと依存ゼロのCDN配布で、MITライセンス。

30,380 Aufrufe • vor 25 Tagen

「OpenUI」はAIアプリの返答をMarkdownやJSONではなく、自分たちのUIコンポーネントで返すためのOSSフレームワーク。 LLMに自由にHTMLを書かせるのではなく、許可したコンポーネントだけをOpenUI Langで組ませる設計になっている点がいい。ストリーミング、型付きprops、React rendererまで含めて、Generative UIを実装に落としやすくしている。 AIアプリのUIが「チャット欄＋カード」から先に進むとき、こういう層がかなり重要になる。

「OpenUI」はAIアプリの返答をMarkdownやJSONではなく、自分たちのUIコンポーネントで返すためのOSSフレームワーク。 LLMに自由にHTMLを書かせるのではなく、許可したコンポーネントだけをOpenUI Langで組ませる設計になっている点がいい。ストリーミング、型付きprops、React rendererまで含めて、Generative UIを実装に落としやすくしている。 AIアプリのUIが「チャット欄＋カード」から先に進むとき、こういう層がかなり重要になる。

66,128 Aufrufe • vor 2 Monaten

デザインの初期探索って、プロンプトを何回も書き直す作業になりがちなんだよな...と思ってたところに出会ったのが「Variant」アイデアを一言入れてスクロールするだけで、UIデザインのバリエーションが無限に生成される。プロンプト不要で「眺めながら考える」ができる。 0→1で方向性が定まらないときの壁打ち相手として、かなり良い、初期掲載されているデザインの意匠も素敵なアウトプットが多いので刺激になる。

デザインの初期探索って、プロンプトを何回も書き直す作業になりがちなんだよな...と思ってたところに出会ったのが「Variant」アイデアを一言入れてスクロールするだけで、UIデザインのバリエーションが無限に生成される。プロンプト不要で「眺めながら考える」ができる。 0→1で方向性が定まらないときの壁打ち相手として、かなり良い、初期掲載されているデザインの意匠も素敵なアウトプットが多いので刺激になる。

109,638 Aufrufe • vor 5 Monaten

いいづかやまとさんいいづかやまとがつい最近リリースした「Gen Interface JP」が良い。 Interで組んだUIに、日本語を載せるときの違和感を減らす書体として有力な選択肢になり得そう。英数字はInterのまま気持ちよく見えるのに、日本語だけ少し大きい・重い・詰まって見える、みたいなことがある。Gen Interface JPは、Noto Sans JPをベースにしつつ、Interと並べたときのサイズ感や字間を合わせにいっている。英日混在のUIを作る人にはかなり実用的だと思う。

いいづかやまとさんいいづかやまとがつい最近リリースした「Gen Interface JP」が良い。 Interで組んだUIに、日本語を載せるときの違和感を減らす書体として有力な選択肢になり得そう。英数字はInterのまま気持ちよく見えるのに、日本語だけ少し大きい・重い・詰まって見える、みたいなことがある。Gen Interface JPは、Noto Sans JPをベースにしつつ、Interと並べたときのサイズ感や字間を合わせにいっている。英日混在のUIを作る人にはかなり実用的だと思う。

30,759 Aufrufe • vor 2 Monaten

「このサイトの動きカッコいいけど、こういう表現ってどこで探すんだろう」という時に使えるキュレーションギャラリー「mesh3d」。 WebGL/Three.jsを使ったインタラクティブサイトが集まってる。 ☑️ Featured / Latest additions で編集部ピックを閲覧できる ☑️ Makers（Lusion、Unseen Studio、PeachWeb等）からスタジオ単位で作品を辿れる ☑️ 自分のサイトをsubmitできる制作スタジオ別に横串で見られるのが地味に効いていて、「このスタジオの世界観で何ができるか」を一気に把握できる。静的なビジュアルだけでは掴めない表現領域のリファレンスとして置いておくと便利。他にいいWebGLギャラリー使ってる人いたら教えてほしい

「このサイトの動きカッコいいけど、こういう表現ってどこで探すんだろう」という時に使えるキュレーションギャラリー「mesh3d」。 WebGL/Three.jsを使ったインタラクティブサイトが集まってる。 ☑️ Featured / Latest additions で編集部ピックを閲覧できる ☑️ Makers（Lusion、Unseen Studio、PeachWeb等）からスタジオ単位で作品を辿れる ☑️ 自分のサイトをsubmitできる制作スタジオ別に横串で見られるのが地味に効いていて、「このスタジオの世界観で何ができるか」を一気に把握できる。静的なビジュアルだけでは掴めない表現領域のリファレンスとして置いておくと便利。他にいいWebGLギャラリー使ってる人いたら教えてほしい

34,734 Aufrufe • vor 3 Monaten

Figma、次はコードレイヤー機能をリリース！🎉コードレイヤーとGiHubとを接続できるように！！ #config

Figma、次はコードレイヤー機能をリリース！🎉コードレイヤーとGiHubとを接続できるように！！ #config

11,450 Aufrufe • vor 1 Monat

shadcn/uiに「ない」凝ったインタラクションを足すコンポーネント集、Skiper UI。 ☑️ Dynamic Island / Image reveal / Vercel Tooltip風など、shadcn本体には載らない"細部に凝ったやつ"が103+ ☑️ RaunoのDevouring Details（Vercelエンジニアが書いたインタラクションデザインリファレンス）のインスパイアを明言 ☑️ サブスクなしの買い切り型（Premium $129）所感Aceternity / Magic UI / Cult UI と同じ「shadcn互換のインタラクション集」セグメントだけど、Skiper UIは"質感"に振り切ってるのが差別化点。プロダクト全体に敷くというより、「ここぞ」の場面に足すための引き出しとして持っておくと良さそう。

shadcn/uiに「ない」凝ったインタラクションを足すコンポーネント集、Skiper UI。 ☑️ Dynamic Island / Image reveal / Vercel Tooltip風など、shadcn本体には載らない"細部に凝ったやつ"が103+ ☑️ RaunoのDevouring Details（Vercelエンジニアが書いたインタラクションデザインリファレンス）のインスパイアを明言 ☑️ サブスクなしの買い切り型（Premium $129）所感Aceternity / Magic UI / Cult UI と同じ「shadcn互換のインタラクション集」セグメントだけど、Skiper UIは"質感"に振り切ってるのが差別化点。プロダクト全体に敷くというより、「ここぞ」の場面に足すための引き出しとして持っておくと良さそう。

18,651 Aufrufe • vor 3 Monaten

「Contra Labs」のサイト、表層デザインが尖っていて好き。白地に大きなセリフ体、古典彫刻っぽい人物ビジュアル、そこにドット化されたPCやピクセル表現を重ねている。「人間の創造性」と「AI / データ」を、UIパーツではなく一枚の世界観で見せているのがうまい。 “Execution is free. Now, judgment is everything.” というコピーも強い。AIで制作コストが下がった後に、何が価値として残るのかをかなり短く言い切っている。

「Contra Labs」のサイト、表層デザインが尖っていて好き。白地に大きなセリフ体、古典彫刻っぽい人物ビジュアル、そこにドット化されたPCやピクセル表現を重ねている。「人間の創造性」と「AI / データ」を、UIパーツではなく一枚の世界観で見せているのがうまい。 “Execution is free. Now, judgment is everything.” というコピーも強い。AIで制作コストが下がった後に、何が価値として残るのかをかなり短く言い切っている。

17,587 Aufrufe • vor 3 Monaten

Keine weiteren Inhalte verfügbar