フロントエンドの表示コード（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状態チェック (...

I ran into this exact issue while designing the paid content protection for Lovai. The AI proposed a design that "hides everything, including metadata." It showed no title and no summary. Technically,...

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...

When I first added video posting to Lovai, I simply stored mp4 files in Supabase Storage, just as I did with images.

It was shockingly slow.

Uploading a video of just a few dozen MBs felt like it to...

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...

I realized something immediately after implementing the DM feature in Lovai.

When 'quick question DMs' and 'collaboration DMs' are mixed in the same thread, the recipient gets confused. They can't te...

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...

The biggest hurdle was the time it took to realize the limitations of RLS.

The UPDATE policy design the AI produced looked perfect at first glance. The transition rules were expressed beautifully usi...

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 ...

I couldn't give up, so I sent an email providing a more detailed explanation of the service.

I explained that it falls under the categories of educational services and digital content. I noted that o...

The biggest lesson I learned from this experience was the timing of the Connect application submission. If you don't submit it right when you open the account, you risk being flagged unintentionally. ...

Lovai posts allow visibility levels to be set at the block level: public (free), premium (paid), and private (unlisted).

I built this because the "paywall the entire article" model felt off. A struct...

I separated the post data into three tables and built a three-layer defense using Supabase RLS + Security Definer functions.

Table Separation

• post_blocks (Metadata) — Visibility levels and pr...

Design Flaw in Purchase Records Initially, I blocked INSERT but left UPDATE open. This would have allowed a user to change their status from pending to completed and view premium content wit...

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...

The clauses to add to your contract fall into five categories.

First is "Disclosure and Consent of AI Usage." This clause involves disclosing to the client in advance that AI tools will be used in th...

Clause 1: Disclosure and Consent of AI Usage

Clause Template: "The Contractor may use AI technologies, such as image generation AI, text generation AI, and UI design assistance AI, in a supplementary...

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...

First point: A client once told me a design looked "sloppy." When I presented a design with intentional margin rhythms, they pointed out that the spacing looked inconsistent. The fix is to add a one-l...

People who start using AI for design often hit a wall. Right after thinking, "Can't I just do everything with AI?" comes the "everything is mediocre" problem.

I tried generating wireframes with Figma...

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...

On February 17, 2026, Figma and Anthropic announced an official partnership.

By simply typing "Send this to Figma" for code generated in Claude Code, the browser's rendering state is automatically co...

Using the post creation screen of my own service (Lovai) as a subject, I verified the workflow of converting code already implemented in Claude Code into Figma.

The process is simple: just specify th...

First point: Auto Layout is not converted. This is the biggest pitfall. CSS Flexbox is often converted into absolute-positioned groups in Figma. You have to manually reset them to be recognized as Aut...

Have you ever wanted to share the process of something you created using AI? Writing a blog is a lot of work, and X doesn't have enough characters. Lovai is a place to "share what you did with AI, str...

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...

The biggest waste is not being able to post because you feel you have to "write it perfectly." We recommend posting casually at L1 or L2 and then adding more details after seeing the reaction. Lovai h...

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...

Trying to charge for everything from the start usually leads to failure. The standard approach is to first grow your following with free posts and build trust that 'this person's recipes are useful' b...

In 2024, AI tools exploded. ChatGPT, Claude, Midjourney, Cursor... yet information on "how I achieved this with this tool" remains scattered across fragmented X (Twitter) posts or lengthy blog article...

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 ...