Explore

フロントエンドの表示コード（dataConverters.ts）を調査し、ブロックタイプごとにどのキーでテキストを読み出しているかを特定した。テキストブロックは content.text、コードブロックは content.code を参照している。API側（route.ts）は content をそのままJSONBに保存するだけなので、スキル側が正しい構造で送ればフロントで正しく表示される。バック...

2つの問題があった。1つ目: SKILL.mdにcontent JSONの具体的なキー名が未記載で、AIが content: "テキスト" のような文字列直接渡しや content: { body: "..." } のような間違ったキーで送信していた。DBにはJSONBとしてそのまま保存されるのでエラーにならず、フロントで空表示になる「サイレント失敗」パターン。2つ目: 有効なsection値は ...

外部APIを設計するとき、スキーマの「例」を省略するとAIエージェントが誤った形式でデータを送る。特にJSONBのような自由度の高いカラムでは、バリデーションで弾けない不正構造がサイレントに保存されてしまう。対策: (1) APIドキュメントやスキル仕様書には必ず完全なリクエストボディ例を含める (2) 有効な値のホワイトリストを明記する (3) 1セクション1ブロックのような暗黙の制約もドキュメ...

最初は「AIセッションログをそのままインポートする」案が出たが、APIキーや社内URLなどの機密情報が混入するリスクが致命的だった。生ログではなく「Claudeがセッションを分析して要約を生成する」アプローチに切り替えた。

技術的には3層構成にした:

1. Lovai側にREST API (POST /api/posts/external-create) を新設 — APIキー認証、シークレット...

3つの想定外があった:

1. ミドルウェアが先にブロックする /api/postsで始まるパスがSupabaseミドルウェアのcookie認証で保護されていた。APIキー認証のエンドポイントはミドルウェアをバイパスする除外設定が必要だった。

2. RPCの戻り値が [object Object] RPCが返すJSONBを { id: string } として型キャストしていたが...

APIキー認証の全体フロー:

Authorization: Bearer [REDACTED] → extractBearerToken (prefix検証) → hashApiKey (SHA-256) → DBでハッシュ照合 → userId取得 → レート制限チェック → 入力バリデーション + シークレット自動除去 → Stripe Connect状態チェック (...

Lovaiの有料コンテンツ保護設計で、まさにこの問題にぶつかりました。

AIが提案してきたのは「メタデータごと隠す」設計。タイトルも概要も何も見せない。技術的には正しい。セキュリティ的にも最も安全。AIに「問題ある？」と聞いたら「適切にデータが保護されています」と返ってきました。

でも、購買心理を知っている自分には最悪の設計に見えました。ユーザーが買うかどうか判断するには、「何が書いてあるか」...

What was interesting about Anthropic's experiment is that even the Evaluator AI was initially too lenient. Anthropic themselves admitted that "Claude is insufficient as a QA agent in its initial state...

I added an auto-translation feature to Lovai. It's a system where an English version is automatically created when you post in Japanese.

Initially, I spent most of my time on translation accuracy. Wh...

I should have solidified the data format before focusing on accuracy. It took a full day to secure the data format, which was more time than I spent tuning the accuracy. Accuracy can be improved a...

Lovaiに動画投稿の機能を入れたとき、最初はSupabase Storageにmp4をそのまま置いていました。画像と同じ感覚で。

これがびっくりするくらい遅かったんですよね。

数十MBの動画をアップロードするだけで体感10秒以上。再生しようとするとバッファリングで数秒待たされる。どのSNSでも動画は当たり前にスムーズに流れてくる時代に、自分のサービスだけぐるぐるローディングが回っている。個人...

Before: Browser → Server → Cloudflare Stream. Since the file passes through the server, even if the user has a fast connection, the speed is bottlenecked by the server's processing power.

**After...

The biggest trade-off is that the bandwidth usage doubles. For a 200MB video, it results in about 400MB of total data transfer (estimated).

At first, I considered a simpler approach using the browser...

LovaiにDM機能を実装した直後に気づいたことがあります。

「ちょっと質問したいDM」と「一緒に何かやりたいDM」が同じスレッドに混ざると、受け取る側が困る。「これ軽い話？ 真剣な話？」がわからなくて、返事のテンションが定まらない。

PMとして案件をいくつもやってきた中で、「目的が違うコミュニケーションを1つの場所に押し込むとどっちも中途半端になる」というのは何度も見た光景でした。

だから...

Initially, when I told the AI I wanted to build an offer feature with status transitions, it suggested a design using an UPDATE RLS policy on the offer table. The rule was: 'Only the recipient can cha...

一番ハマったのは、RLSの限界に気づくまでの時間です。

AIが出してきたUPDATEポリシーの設計は、読んだ瞬間は「これで完璧だ」と思いました。USING句とWITH CHECK句の組み合わせで遷移ルールが表現されていて、美しかった。

でも「本当にこれで安全？ 他の列は触れない？」と聞いたのがきっかけで列範囲問題が出てきた。RLSは行レベルの制御しかできないという、言われてみれば当たり前の制約...

I implemented Stripe Connect because I wanted to build a system where users could earn money by selling their own content.

I had experience implementing it for another service before, and the review ...

諦めるわけにはいかなかったので、サービスの詳細を改めて説明するメールを送りました。

教育サービスとデジタルコンテンツのカテゴリに該当すること。利用規約でアダルトや著作権侵害、情報商材を禁止していること。noteやGumroad、Patreonと同様のビジネスモデルであること。できるだけ具体的に、審査する側が判断しやすいように書きました。

さらに、Connectを使わない代替案（Lovaiが販売...

この経験で一番学んだのは、Connect申込書の提出タイミングです。アカウント開設と同時期に出しておかないと、意図しない判定を受ける可能性があります。しかも審査のロジックは非公開なので、後からしか理由がわかりません。

もう一つ。サービスが複雑になるほど、審査側への説明コストが上がります。以前のサービスは「クリエイター支援」というシンプルなモデルだったのですんなり通りましたが、Lovaiのようにブ...

Lovaiの投稿はブロック単位で公開レベルを設定できる。public（無料）、premium（有料）、private（非公開）の3段階。

この仕組みを作ったのは、「記事全体を有料にする」モデルに違和感があったから。タイトルと冒頭だけ見えて残りは課金、という構造だと、買うまで価値がわからない。読者にとっても投稿者にとっても損。

ブロック単位なら、きっかけは無料で共感を生み、やったことは有料で価値...

投稿データを3テーブルに分離して、Supabase RLS + Security Definer関数で三層防御を構築した。

テーブル分離

• post_blocks（メタデータ）── 公開レベルやプレビューテキスト。誰でも見れる
• post_block_contents（コンテンツ本体）── RLSで保護される核心
• post_purchases（購入履歴）── ユーザー...

購入レコードの設計ミス 最初はINSERTだけ塞いでUPDATEは開けていた。これだとstatusをpending→completedにユーザーが書き換えて、決済なしで有料コンテンツが見れてしまう。AIに「本当に安全？」と聞き直して発覚した。全操作を塞ぐのが正解。

Security Definerの危うさ 最初はrow_to_json(p.*)でpostsの全カラ...

While developing Lovai, I asked AI to generate UIs hundreds of times.

The code often works on the first try—logic, API integrations, and database operations. Because these instructions are clear, the...

Here are 5 patterns of Before/After instructions I actually used.

Pattern 1: Size and Spacing

Instruction Content ❌ Ineffective "Add a bit more spacing and make the text larger." ✅ Effectiv...

First: To give instructions with numbers, you need your own internal benchmarks.

To say "make the spacing 24px," you have to know how wide 24px actually is. In my case, I had a sense for numbers ...

When sharing to social media, the card images (OGP) displayed were the same design for everyone. It was just a mechanical arrangement of the title and icon.

This had been bothering me for a long time...

I built a system where you can change the look of your OGP to your liking across three layers.

The first layer is theme selection. You can choose the layout itself from three types.

'Editorial' has ...

First, the issue of social media caching being too strong.

Even if you change the OGP settings, social media platforms cache OGP images for a long time. The old design keeps showing up even after you...

Delivering designs created with AI has become the norm. However, contract formats haven't caught up yet.

Here is a real-life example: I delivered a landing page design using Figma Make and Midjourney...

契約書に追加すべき条項は5つのカテゴリに分かれる。

1つ目は「AI使用の開示と合意」。デザイン制作にAIツールを使用する旨をクライアントに事前に開示し、合意を得る条項。「使ってから報告」ではなく「使う前に合意」。

2つ目は「著作権の帰属」。AI生成物を含むデザインの著作権が、納品後にどこに帰属するかを明確にする条項。

3つ目は「成果物の品質保証範囲」。AIが生成した素材（画像、イラスト等）に...

条項1：AI使用の開示と合意

条文テンプレートはこうなる。「受託者は、本業務の遂行にあたり、画像生成AI、テキスト生成AI、UIデザイン支援AI等のAI技術を補助的に使用することがあります。AI技術の使用は、受託者の専門的判断に基づく創作プロセスの一部として行われるものであり、成果物の品質と独自性は受託者が責任を持って管理・担保します。委託者は、本契約の締結をもって、受託者によるAI技術の使用...

Lately, I've had more moments where I look at my own designs and think, "I can't tell this apart from something an AI made."

Whether using Figma Make, Midjourney, or DALL-E, the resulting UI looks si...

1つ目。クライアントに「雑じゃないか」と言われた。意図的に余白のリズムを変えたデザインを出したら「余白がバラバラに見える」と指摘された 。

対処法は、事前に「なぜこの余白にしたか」を1行で添えること。「セクション間にリズムをつけて、ユーザーの読む速度をコントロールしています」と書くだけで、「雑」が「意図的」に変わる。デザインの意図は、言葉にしないと伝わらない。

2つ目。崩しのテクニックは...

2026年2月17日、FigmaとAnthropicが公式連携を発表した。

Claude Codeで生成したコードを「Send this to Figma」と入力するだけで、ブラウザのレンダリング状態が自動で編集可能なFigmaレイヤーに変換される。

これまでデザインの流れは一方通行だった。Figmaでデザイン → エンジニアがコード化。デザイナーが作ったものをコードに「翻訳」する作業。

そ...

自分のサービス（Lovai）の投稿作成画面を題材に、Claude Codeで実装済みのコードをFigmaに変換するワークフローを検証した。

手順はシンプルで、Claude Codeで対象コンポーネントのファイルパスを指定して、「このコンポーネントをブラウザでレンダリングして、Send this to Figmaで変換して」と指示するだけ。Figma上で編集可能なレイヤーとして取り込まれる。

...

1つ目。Auto Layoutが変換されない。これが一番の落とし穴。CSSのFlexboxはFigma上では絶対配置のグループに変換されることが多い。Auto Layoutとして認識させるには手動で設定し直す必要がある。構造が複雑なほど修正コストが高い。

2つ目。コンポーネント単位で変換するのが正解。ページ全体を一気に変換するとレイヤーが膨大になって扱いにくい。ヘッダー、カード、フォームなど...

デザインにAIを使い始めた人が最初にぶつかる壁がある。「全部AIでいけるのでは？」と思った直後に来る「全部中途半端」問題。

Figma Makeでワイヤーを生成してみたけど、そのまま使えるクオリティではない。Opus4.6にUIの壁打ちをさせたら、言語化は鋭いけどビジュアルにはならない。結局、全部自分で作り直してる。

これは使い方が間違っている。

3つのツールには明確な「得意領域」があ...

1. Don't expect a finished product from Figma Make UI from Figma Make isn't at a level you can hand off. Many people feel "AI is useless" because they don't realize this. If you treat it as a tool tha...

A Lovai post is completed in 4 steps:

Step 1 - What did you complete? Choose the output type (Development / Writing / Design / Image / Video / Analysis). Next, choose the target. For example, if it's...

With the advent of AI, 'deliverables' are becoming commoditized. We are in an era where anyone can write decent code, draft decent text, and create decent images. The real differentiator is the proces...

On Lovai, you can set premium content (paywalls) for your posts. Here is how it works:

1. Free Section: The post's insight (conclusion), screenshots of the deliverables, and the overview of the proce...

2024年、AIツールが爆発的に増えた。ChatGPT、Claude、Midjourney、Cursor...。でも「このツールでこんなことができた」という情報は、Xの断片的なツイートか、長大なブログ記事に散在している。再現しようとしても、バージョンが違う、設定が違う、そもそも前提条件が書かれていない。

AIの知識は今、3つの問題を抱えている:

1. 断片化: Xのツイート、ブログ、YouTub...

I designed Lovai as a platform to solve these three challenges simultaneously.

Solving Fragmentation: A structured format where one post contains "Deliverable + Process + Thinking." Users can filter ...

Initially, I thought of it as a "prompt sharing site." But after using the prototype, I realized prompts alone weren't enough. A prompt is just the tip of the iceberg; the real value lies beneath—the ...