Sabitlenmiş Tweet
池田 昌樹
2K posts
池田 昌樹
@flagline_inc
日常にAIを | 株式会社FLAGLINE 代表 l 中小企業のAI導入を支援 AIコンサル/BPO | AI研修 | AISaaS/BPaaS AI関連の情報を発信
お問い合わせはこちら Katılım Ekim 2024
229 Takip Edilen529 Takipçiler
池田 昌樹 retweetledi
池田 昌樹 retweetledi
非デザイナーに知って欲しい「DESIGN.md」という概念。
Stripe、Notion、Claude、Figma等のデザインシステムを1つのマークダウンファイルに凝縮したもの。
これをプロジェクトに置いてAIに「このデザインに合わせて」と指示するだけで、ピクセルパーフェクトなUIが出てきます。
このリポジトリの中身：
・55個以上の有名サイトのDESIGN.mdを収集済み
・カラーパレット、タイポグラフィ、コンポーネントスタイリングを網羅
・ライト/ダークモードのプレビューHTMLも付属
・Google Stitchの標準フォーマットに準拠
・Claude、Cursor、v0等どのAIコーディングツールでも使える
「AIにUI作らせたら微妙だった」人、DESIGN.mdを渡してなかっただけかもしれません。★5,100。
github.com/VoltAgent/awes…
日本語
池田 昌樹 retweetledi
「ブラウザからDBまで」の技術スタックを網羅した解説が有益。
DNSの名前解決から、TLSハンドシェイクの裏側、WAFの防御、ロードバランサーの負荷分散、そしてDBのシャーディングまで。なんとなく理解していた「情報の流れ」が一本の線でつながる。
こちら👉
zenn.dev/moko_poi/artic…
日本語
池田 昌樹 retweetledi
バイブコーディングでUI作ると
全部同じ見た目になる問題を解決するオープンソースが登場。
ㅤ
Interフォント、紫のグラデーション、カードグリッド...
どのプロジェクトでも毎回このあるあるデザインになる。
x.com/om_patel5/stat…
これ「Claudeの能力が低い」んじゃなくて
「デザインの引き出しがない」のが原因らしくて、
ㅤ
そこを解決するMCPが
「AI Designer」っていうClaude Code専用のデザインMCP！！
ㅤ
1コマンドでインストールすると
Claudeがデザインツールを直接使えるようになって
既存のデザインシステムを読み取った上で
プロジェクトに合ったUIを自分で生成してくれる。
ㅤ
npx -y @aidesigner/agent-skills init claude
ㅤ
これだけで.mcp.json、スキルファイル、
エージェント設定が全部入る。
Figmaとエディタを行き来しなくてよくなる。
ㅤ
解説していきます👇🧵
日本語
池田 昌樹 retweetledi
ちなみに、自分はDifyでワークフローを作って、毎日公式にアップデートがあればURL付きで内容を自分のメールに送ってくれるようにしていて、かなり便利なので、今後このワークフローも紹介していきたい。
OpenAIのDeep Researchも使っていて、ほぼハルシネーションはない印象です。
市川 淳 | 生成AIエンジニア@junichikawaAI
Difyのローカル環境で、バージョン1.13.0に上げたらHuman in the Loopノードが使えるようになってた！ 配信方法もいくつか種類があって結構便利そう。 ✅ できること： - ワークフローを途中で止めて人間の承認を待つ - 「承認/却下/保留」など自由にボタン設定して分岐 - AIの出力を人間が編集してから次へ進める - アプリ内表示 or メール送信で通知を選べる - タイムアウト設定で期限管理も可能（最大7日）
日本語
池田 昌樹 retweetledi
【必見】GoogleがGemini 2.5 flash 画像生成公式プロンプトガイドを公開。これで誰でも高度な画像生成が可能に。
○プロンプトのコツ
・物語的に状況
・背景や目的を伝える
・単語ではなくシーンを説明
・ネガティブは肯定表現に変更
・写真や映画の用語活用（例：wide-angle shot）
↓スレッド解説
日本語
池田 昌樹 retweetledi
worldlabs
すごいなぁ。nanobananaで作成した画像を読み込ませて、プロンプトを足しただけで、あっという間にパノラマに変更し、さらにそのあと３D空間が作成できる。制作時間５分程度。コライダーの設定や、連続した空間制作ができるようになったら最強なのではないか。
日本語
池田 昌樹 retweetledi
池田 昌樹 retweetledi
【 n8nの５時間の講座をXで投稿してる人いた！！】
ぜひみてみてください。彼によるとこれでなんでも作って自動化できるそうです😇
日本語
池田 昌樹 retweetledi
本日の『#AI駆動開発 勉強会』 で登壇したスライドを共有します！お役に立てれば嬉しいです。
「あたらしい上流工程の形。
0日導入からはじめる #AI駆動PM 」
speakerdeck.com/kumaiu/atarasi…
日本語
池田 昌樹 retweetledi
池田 昌樹 retweetledi
と言うわけで書きました📝
[翻訳] Anthropic ハッカソン優勝者による Claude Code 完全ガイド｜Tocyuki zenn.dev/studypocket/ar… #zenn
日本語
池田 昌樹 retweetledi
正直ここを知らずにvibe codingすると、
「動いてるけど、壊れやすい／危険なアプリ」になります。だから最低限、これだけは守ってほしいことをリストアップしておきました👇是非保存もして後から見返してみてください。
・フロントからDB直結しない（必ずAPI/ミドルウェア）
・全エンドポイントで権限チェック
・課金判定をフロントに任せない
・APIキーをブラウザに置かない
・計算・価格ロジックは必ずサーバー側
・入力値は全てサニタイズ
・レートリミット必須
・ログに機密情報を出さない
・別AIでセキュリティ監査
・依存関係は常に最新
「動いたら完成」じゃない。
“守れる設計”になって初めてプロダクト。
日本語
池田 昌樹 retweetledi
池田 昌樹 retweetledi
池田 昌樹 retweetledi
【速報】
Cursor公式が
「エージェントをどう使えば生産性が最大化するか」
ベストプラクティスを全部まとめて出してきた😳
・まずコードを書くな、先にプランを作れ
・うまくいかなかったらプロンプト修正じゃなくプランからやり直せ
・Rules / Skills でエージェントを育てる
・会話は伸ばしすぎるな、迷ったら新規スレッド
エンジニアもそうだけど非エンジニアのバイブコーディング勢ほど、一度読んでほしい内容👇記事のリンクはツリーに置いておきます
日本語
池田 昌樹 retweetledi
これはめちゃくちゃ大事なことが整理されてる
「そもそも生成AIでやるべきでない問い」に、企業が挑んでしまう問題｜深津 貴之 (fladdict) @fladdict note.com/fladdict/n/na4…
日本語
池田 昌樹 retweetledi
池田 昌樹 retweetledi
UI、毎回ゼロから考えてる人はマジで時間を溶かしてる。Dribbbleのを見れば、eコマース、マッチング、SaaSダッシュボード系の画面が一気に出てくる。「この画面構成パクろう」が一瞬で決まる。
アプリ以外のUI(Web/管理画面/LP)にも普通に使える。作業前に1分だけ眺めるだけで、UIの迷いが減る👇🧵
そら ☁️ AgentSkills 自動化オタク📱@sora19ai
DuolingoのようなUIを作りたい人は全員Riveを使うといい。あの中毒性はキャラじゃなくて、UIの動きをちゃんと“状態”で設計しているから生まれている。 コーディングでやると、LottieやCSSでアニメを足していってぐちゃぐちゃになるし難しすぎるけど、 Riveはアプリ側から最小限の状態だけ渡して、 どう動くかはState Machine側に全部まとめられる。 ロジックはアプリ、アニメーションはRive、 で完全に役割分担できるのが強い。 アプリのどんな部分に組み込むかはシンプルで、 まずは、ボタン、チェックマーク、エラー表示、プログレス、ローディングだけRiveに任せる。 押した瞬間に少し沈む、成功で気持ちよく弾む、失敗で軽く揺れる、このあたりが揃うと一気にDuolingo寄りの質感になる。 UIがチープに見える原因が「デザイン」じゃなく「モーション設計」にあると思う。 Duolingo級の手触りを個人開発で狙うなら、Riveを軸にUIを組むのがいちばんコスパいい。 リプ欄にRiveの参考になる記事を貼っておく👇🧵
日本語
池田 昌樹 retweetledi
RAGの新記事を出しました。メルカリの研究チームが、ベクトル検索を「業界特化」して精度向上したことを報告しました。RAGでも使われる「ベクトル検索」の限界として、業界用語だったり、業界の「当たり前」に弱いという問題があります。これを「業界特化」して解決します↓
zenn.dev/knowledgesense…
日本語