# One post, a tool written in a day, 10k stars: M3E Canvas won by sharing a tip you can try right away · GitHub open-source project

> Source: https://stringers.io/en/github/gh_lnkiai__m3e-canvas.html (Stringers / 什么值得做, generated 2026-11-08)
> Stringers answers one question every day: what small product can one or two people build in a few months and actually make money from. Numbers come from 15 databases we collect daily, each with source and date.
> For agents: these verdicts and the underlying databases (verified revenue, App Store / Google Play charts, ad libraries, GitHub, Product Hunt…) are queryable live over MCP — tools today / hot / products / directions / direction / data. Setup: https://github.com/komako-workshop/stringers (the user logs in at stringers.io → "配置 agent" to get a personal URL). Site index: https://stringers.io/llms.txt

> The author first posted a tip: "Say 'use M3E' to the AI and the interface stops looking AI-generated." It hit a pain point in the vibe coding crowd. Readers could try it immediately, and after trying it they came for the tool. Chinese repost accounts, big LinkedIn accounts and Trendshift's daily chart then carried it further.

[GitHub open-source project](https://stringers.io/en/github/index.md) · written 11-6

lnkiai/m3e-canvas · lnkiai

# One post, a tool written in a day, 10k stars: M3E Canvas won by sharing a tip you can try right away

**What it is** A free canvas that runs in the browser. You drag real Google Material 3 Expressive components onto an app screen, wire up navigation, then export a prompt to paste into Claude Code, Codex or Cursor to generate the code.

**Why it took off** The author first posted a tip: tell the AI 「use M3E」 and the interface stops looking like AI slop. It hit a pain point in the vibe-coding crowd. Readers could try it immediately, and after trying it they came to the tool. Then Chinese reposter accounts, a large LinkedIn account and Trendshift's daily chart carried it further.

**B** **How you could follow this** Don't fork and reskin. Pick a design system you know well (Liquid Glass, shadcn, HarmonyOS), post a tip people can reproduce right away with a 「before / after」 comparison, and if it gets traction, release the tool and a long-form write-up within 48 hours.

Grade B: the direction of 「a design system as a constraint layer for AI」 is still hot, and big companies haven't made it the default. But clones that only swap the design system (miuix-canvas at 6 stars, SwiftUI-Canvas at 0 stars) show the tool alone doesn't bring traffic. Success rides entirely on whether you can first articulate a tip that spreads. Word of mouth in the niche

Data (updated daily) · Repo created 2026-09-02 · 10,196 stars · 7 days +250

GitHub · stars

Data 2026-10-09 → 2026-11-08 (31 days, 31 observations). Points before 10-28 come from deeply / archive backfill, not every day has one

A first-year Japanese university student posted 「have AI build an App with Material 3 Expressive and it comes out with Google's native look」. The post blew up, and she quickly released a canvas tool she wrote in a day with Claude, which reached 65k stars in 10 days. The tip is what spread, and the stars landed on the tool. People have already copied it by swapping in a different design system, and those got single-digit stars.

### A Japanese post from early September

In early September 2026, a Japanese first-year student named いのり (@lnkiai) on X posted:

> みんな Android アプリをあんまり作ってないかもだけど、バイブコーディングで AI に「Material 3 Expressive を使って Android アプリを作って」って頼むだけで、Google っぽいおしゃれなデザインになるからマジで神

Roughly: most people may not build Android apps much, but in vibe coding you just tell the AI 「build the Android app with Material 3 Expressive」 and you get Google-style good-looking design. Honestly amazing.

The reaction far exceeded her expectations. She later wrote on Zenn: 「I didn't expect Android to take off like this. Honestly, I was startled.」 On Sep 2 she created the repo lnkiai/m3e-canvas. On Sep 4 she published a long Zenn article, 《UIを描いたらプロンプトになるツールを作った》 (I made a tool where drawing a UI becomes a prompt). The article has a line many people will want to quote: **she and Claude wrote this tool in one day.**

By Nov 6, the repo had 10,166 stars and 1,122 forks (GitHub, 11-06). It's her only repo on GitHub.

### What it is

A canvas that runs entirely in the browser, with no sign-up, no install and no server. On the left are real Material 3 Expressive components (Google's design language released in 2025, called M3E below): top bars, search fields, cards, bottom navigation, loading animations that morph, and more than 30 kinds in total. Drag them onto a phone or desktop screen, and buttons snap together like magnets when they get close. Set where a button navigates, and you can click through the whole flow in preview.

The last step doesn't output code. It outputs a prompt. For example, for a 「recipes」 screen, the export reads like this: which theme colors are used and which M3 role name each maps to; what sits in the layout from top to bottom; which page you land on when you tap this card; card corner radius 20dp, padding 16dp. Copy it, paste it into Claude Code, Codex or Cursor, and let it write the code.

She pointed out two things in her Zenn post that took real care. First, don't let the AI hardcode colors. Have it reference role names like primary and surfaceContainer, and it won't sneak in some random purple of its own. Second, spell out every component's size using the M3E standard values, then add one line: "Hand standard components to standard components," and the AI stops drawing its own buttons.

### Why this one took off

In her long-form post, she packaged a prompt trick into a clear argument: AI-made UI has an "AI look" (gradients, shadows, text plastered over everything). The AI isn't incapable of doing better. **It's being asked to make too many decisions on its own.** Colors, corner radii, spacing, and button heights all get improvised, so each output differs and the whole thing looks messy. A design system pins all of that down, and the AI only has to place standard components in a standard way.

This lands on the hottest pain point of 2026. Vibe coders are fed up with the "AI look," and in the same period a batch of "design → agent" projects on GitHub climbed: baoyu-design, open-codesign, and Google's stitch-skills all sit in the thousands of stars. Meanwhile M3E has been fully shipped in Android and Jetpack Compose since 2026, so readers can use it right away.

The key point is that readers can try the technique without installing her tool. Add one sentence to your prompt and you'll see the difference immediately. Once the trick is proven, you can go use her tool to skip the most tedious job, describing the layout in words. **The technique is what spreads; the stars land on the tool.**

### How the stars grew

| Timeline | What happened | Heat |
|---|---|---|
| 9-02 | Repo created, and the earlier X post was already gaining traction | 4 forks on the day of forking |
| 9-04 ~ 05 | A Zenn long-form post, reposted by Chinese AI aggregator accounts with the headline "just broke 500 stars" | 9-04 has 97 forks; 9-05 has 164 (at peak) |
| 9-07 ~ 08 | Ram Maheshwari, a prominent developer on LinkedIn, posted "Woah... This is actually insane for vibe-coding apps & websites with Material 3. 🤯" The same post also went up on Instagram and Facebook, and Spanish-speaking accounts picked it up too. | 9-08 gained +548 stars in a single day and reached #21 on the TypeScript chart (Trendshift) |
| 9-15 | Already at 6,825 stars (reported by nerdbite) | Mid-to-late September: 70–280 per day |
| October | Korean and Japanese news sites started covering it, and SEO content sites, YouTube, and TikTok reposted it | 15–90 per day |
| 10-31 | GIGAZINE covered it in Japanese and English | 11-06 added +78 in a single day, the highest since mid-October (likely the aftershock of this coverage) |

In the first 5 days it gained roughly 4,200 stars (an estimate, back-calculated from the cumulative count after Trendshift 9-07). GitHub didn't expose per-star timestamps, so the pace above is inferred from fork dates. A fork means someone actually took action, and most came from ordinary personal accounts.

A few small things made the conversion work well. The README works as a landing page: it opens with a GIF that runs in one take, from drawing a screen and clicking through the flow, to copying the prompt, to Claude Code writing code in the terminal and running on a phone. It's available in English, Japanese, Chinese, and Korean. A large "Open the app" button links straight to GitHub Pages. The Trendshift badge went up immediately after it hit #1 on the daily chart. The fork rate of 11% is also high because the README tells people to fork and deploy their own copy.

Channels I couldn't find: Hacker News, Product Hunt, and paid promotion, none of them used.

### Who's doing something similar

| Project | Scale | How it differs |
|---|---|---|
| Google Stitch / stitch-skills | Official Google project; skills library at 8.7k stars | Text or images → AI generates UI and code, with the AI deciding the layout |
| Figma Make / Figma MCP | Standard in the design industry | Requires design skills and costs money |
| open-codesign and baoyu-design (open-source alternatives to Claude Design) | 8.2k and 6.1k stars | Generates prototypes from prompts; the direction is the reverse of this one |
| superdesign and OpenPencil | 7.6k and 7.1k stars | AI design canvases that don't lock in a design system |
| draw-a-ui / tldraw make-real | About 5.4k stars | Hand-drawn sketches turned directly into code |
| screenshot-to-code | 81k stars | Screenshot-to-code |

There are many tools for "draw the UI, then hand it to the AI," but I hadn't seen this combination before: a locked-in real design system, with output as text instructions for an agent rather than code.

### Someone has already done it with a different design system

The most direct way to follow this is to swap M3E for another design system and build it again. Someone already has, and the results are telling (GitHub, 11-06):

- LazyBonesLZY/miuix-canvas, created 9-12, "Sketch HyperOS / Miuix screens in the browser and turn them into vibe-coding prompts," with Xiaomi HyperOS's design language: **6 stars** .

- jason2be/SwiftUI-Canvas, created 9-06, the original's description phrasing reused with SwiftUI: **0 stars** .

- NickFangVFX/tos-design-system, 9-22, an in-house design system based on m3e-canvas: **0 stars** .

- Side projects riding the M3E wave: shadcn-m3e with 62 stars, and charliesbot/android-design with 36 stars, which packages M3E design judgment as an agent skill.

These are all reskins of the tool. None of them has the instantly testable technique at the front, and nobody is spreading it for them. The tool's form alone doesn't carry traffic, and that's been confirmed.

### If it were you

**Verdict:** Worth learning and worth trying, but what you should copy is her playbook, not her tool. Building another canvas with a different design system has already been done, and it's landing between 0 and 6 stars.

**Who it fits:** Developers who already have a real technique of the "add one sentence to your prompt and the UI instantly looks better" kind, and who have a place to publish it: an X account with a few thousand followers, a tech blog, or a steady Chinese or Japanese community. Better still if you know a particular design system well (iOS 26's Liquid Glass, shadcn, Fluent 2, HarmonyOS) and know where AI most often goes wrong on it.

**Who it doesn't fit:** Anyone with no distribution channel who is hoping the README will bring stars organically, or anyone who just wants to fork m3e-canvas and reskin it.

**How to do it:**

1. Publish the technique first, not the tool. Lead with a single copyable prompt and pair it with a before/after comparison screenshot. For example, test whether "when the AI writes iOS interfaces, use only SwiftUI system components and Liquid Glass materials" works, and see the result for yourself first.

2. If the post gets traction, follow up with the tool and a long-form write-up within 48 hours. From her post to the repo to the long-form article took less than a week. Building the tool with Claude took one day, so that step isn't the bottleneck.

3. Package the output as a neutral prompt or agent.md so it works with any coding tool.

4. Follow her README approach: a complete GIF from drawing to running on a phone, multiple language versions, a web button that opens immediately, and a badge added as soon as it charts.

**How to get users:** Launch in your native-language community first (she used Japanese X and Zenn), then wait for Chinese AI aggregator accounts and the big vibe-coding voices on LinkedIn to repost it. Those two waves were her second and third sources of traffic. Make one push for the Trendshift daily chart.

**When to move:** While the phrase "AI-look UI" is still fresh, before tools from big companies, like Google Stitch, Figma, and Claude Design, make "looks good out of the box" the default. I'd estimate a few months of runway, not longer.

**What would show I'm wrong:** (1) If one of the reskins, like miuix-canvas or SwiftUI-Canvas, reached 1,000 stars in a month without any big-account reposts, that would mean the form alone can carry traffic, and copying it directly would be viable. (2) If m3e-canvas climbs again in December and gains hundreds of stars a day, that would mean demand is still expanding and this isn't a one-off. (3) If someone posts a viral technique post about "removing the AI look with X design system," but the tool released alongside it fails to gain traction, that would mean the approach has already been used up, and readers no longer give stars for the tool.

Data and sources: GitHub repo page and fork records (11-06); daily star counts (10-17 through 11-06); trendshift.io/repositories/208608; the author's Zenn article zenn.dev/lnkiai/articles/fef5d8e52368cc (9-04); aiproducthub.cn reposts (9-04, 9-05); Ram Maheshwari's LinkedIn post (9-08); nerdbite (9-15); GIGAZINE (10-31); GitHub pages for miuix-canvas, SwiftUI-Canvas, tos-design-system, shadcn-m3e, and android-design (11-06).

[GitHub repo ↗](https://github.com/lnkiai/m3e-canvas)

**Research notes: competitor table, acquisition evidence, full research report**

Competitors

| Name | Where | Launched | Scale | How it differs from this one |
|---|---|---|---|---|
| Google Stitch(+ stitch-skills) | Big-company features | 2025-05; skills library 2026-01 | Official Google project; stitch-skills at 8.7k stars | Stitch generates UI and code with AI from text or images; M3E Canvas has people place real components and outputs only a prompt, which gives more control |
| Figma Make / Figma MCP | Big-company features | 2025 | Standard in the design industry | Design skill and paid tier needed; M3E Canvas is free, aimed at devs who can't design, and only uses M3E |
| Claude Design and the open-source alternatives open-codesign and baoyu-design | Big-company features | 2026 | open-codesign at 8.2k stars, baoyu-design at 6.1k stars | Generates prototypes from prompts; M3E Canvas goes the other way, drawing first and then producing the prompt |
| superdesign | Open source | 2025-06 | 7.6k star | AI-generated design with no design system constraints |
| OpenPencil | Open source | 2026-02 | 7.1k star | General-purpose AI vector canvas, not tied to M3E, with no prompt as its output |
| tldraw make-real / draw-a-ui | Open source | 2023-11 | draw-a-ui at about 5.4k stars (a similar library on Trendshift) | Hand-drawn sketches turned directly into code; M3E Canvas uses structured real components and outputs instructions for an agent |
| screenshot-to-code | Open source | 2023-11 | 81k star | Screenshot-to-code only works if you already have a design system |
| Material Theme Builder / official M3 Figma Kit | Big-company features | From ¥2021 | Official Google | Only handles themes or components; no workflow, no prompt output |
| Uizard / Visily | Web | 2018–2022 | Commercial SaaS | Paid, generic styles; M3E Canvas is free and open source, tied to M3E, built for coding agents |

Where users come from

- **Verified** **the author's Japanese X post** : the Zenn article says the post "M3E で頼むだけで神" got far more reaction than expected, and the tool followed. X bio: "M3E Canvas ⭐️10k+"

- **Verified** **Zenn long-form tech post** : 2026-09-04 《UIを描いたらプロンプトになるツールを作った》zenn.dev/lnkiai

- **Verified** **Chinese AI repost accounts / WeChat Official Accounts** : aiproducthub.cn 09-04, two posts from 09-05 ("just broke 500 stars"); a 10-09 WeChat article

- **Verified** **LinkedIn / Instagram / Facebook dev influencers** : Ram Maheshwari 09-08 "Woah... insane for vibe-coding", which lines up with Trendshift's +09-08 peak on 548; posts from Sunil Sharma, Zakir Mavlyanov and others

- **Verified** **Trendshift daily chart** : README carries a "#1 repository of the day" badge; 09-08 it charted #21 on the TypeScript chart

- **Verified** **Japanese and Korean media and SEO content sites** : GIGAZINE 10-31, ainformation.jp, Yupir, asapai.co.kr, PyShine, zentor, SourceForge mirror, YouTube / TikTok reposts

- Inferred **GitHub-wide Trending** : likely charted during the September spike, but our database doesn't cover it

- Inferred **HN / Product Hunt / paid promotion** : no record in the hackernews database; no evidence found

## Why M3E Canvas (lnkiai/m3e-canvas) took off

> Channel: GitHub. Research day 2026-11-06. Sources: our github and hackernews databases, the GitHub API, Trendshift, web search (Jina / Exa).

### One line

M3E Canvas is a browser-only, no-login canvas: drag real Material 3 Expressive (M3E) components into app screens, connect them into clickable flows, then export the whole design as a structured prompt for Claude Code / Codex / Cursor to write the code. The author is a first-year university student in Japan (いのり, @lnkiai). The repo was created 2026-09-02 and got 65k stars and 10+ forks in 1,100 days.

**Takeaway** : it first took off on a single Japanese X post. The post said "have AI build an app with Material 3 Expressive and it comes out with native Google polish," hitting the vibe-coding pain point that "AI-built UI looks like AI." Chinese AI repost accounts and vibe-coding influencers on LinkedIn and Instagram then amplified it, and the project hit #1 on Trendshift's daily chart. It picked up about 6 stars in its first 4,300 days, then settled into 20–80 a day from the long tail. Its edge is that it draws with real components from an existing design system and outputs text instructions for coding agents, not code. The angle is narrow, but it rides the current "design system + agent" trend, which is the main reason it worked.

### 1. Growth curve

- Repo created 2026-09-02 04:36 UTC. The fork creation dates can serve as a proxy for interest (the stargazers endpoint was 404 this time, so per-star timestamps are unavailable): 09-02 has 4, 09-03 22, **09-04 97, 09-05 164 (peak)** , 09-06 60, 09-08 74 (GitHub API /forks; all 1,122 entries counted by day).

- Trendshift has daily data only from 09-07: 09-07 +389, **09-08 +548 (it charted #21 on the TypeScript chart that day)** , 09-09–09-11 250–350 a day, mid-to-late September 70–280 a day, October 15–90,11-05 a day, +86,11-06 +38. From 09-07 to 11-06 the totals were +5,897 stars and +799 forks (https://trendshift.io/repositories/208608). Working backward, **roughly 4,200 stars came in over the 5 days from 09-02 to 09-06** .

- The Chinese repost on 09-04 and 09-05 still said "just broke 500 stars" (aiproducthub.cn/status/36565, 37688). By the time nerdbite covered it on 09-15, it had 6,825 stars. So the spike happened within about 09-05 hours around 48.

- Our database: 10-17 is 9,406,11-06 is 10,115. The last 7 days added +236, the 7 days before that +291. 11-06 alone added +78, the highest single day in our observation window (starting 10-28), but compared with September that's only a small pulse. trending_days_any=0 because our trending table only includes repos older than about 60 days and collection only started on 10-28. It doesn't mean the repo never charted on GitHub Trending in September (unverified).

- The GitHub API now shows 10,166 stars / 1,122 forks / 38 watchers. The fork rate is about 11%, which is high. That fits the project: it's a static Next.js app, and the README tells people to fork it and deploy their own copy on GitHub Pages.

### 2. Where users came from (growth tactics)

1. **The author's own Japanese X post (the starting point, confirmed)** . In the Zenn article 《UIを描いたらプロンプトになるツールを作った》 (2026-09-04, [zenn.dev/lnkiai/articles/fef5d8e52368cc](https://zenn.dev/lnkiai/articles/fef5d8e52368cc)), the author says they first posted: "Just ask AI in vibe coding to 'build an Android app using Material 3 Expressive' and you get Google-style, stylish design, it's honestly amazing", "got more reaction than I expected... honestly surprised", and then shipped this tool while the momentum lasted. The X bio reads "M3E Canvas ⭐️10k+ stars", with 1,303 posts (x.com/lnkiai). The post's engagement numbers weren't retrieved (unverified).

2. **Zenn long-form tech post (confirmed)** : published 09-04. It explains why AI-built UI has an AI look: it's left to decide too many things itself; letting a design system decide them fixes that. A prompt trick becomes a methodology.

3. **Chinese AI repost accounts (confirmed)** : 09-04, 09-05 posts on aiproducthub.cn from accounts like "哇!是牛来" and "胡辣汤爱酸菜" (the site mirrors Chinese AI bloggers' X content). A WeChat Official Account article followed 10-09 (cn.todayrss.com/t/rVigguNJvE), and the Trendshift page has a Chinese description.

4. **Vibe-coding influencers on LinkedIn / Instagram / Facebook (confirmed)** : Ram Maheshwari (@rammcodes, a large developer account) posted on 09-08, "Woah... This is actually insane for vibe-coding apps & websites with Material 3. 🤯" The same copy also ran on an Instagram reel and a Facebook video. That matches the +09-08 single-day peak on Trendshift on 548. There are also LinkedIn posts from Sunil Sharma (09-07), Zakir Mavlyanov (09-04), and Alex Fioquetti (Spanish, 09-08), plus @githubawesome6 on Threads (09-08).

5. **Trendshift / charts (confirmed)** : the README displays a "Trendshift: #1 repository of the day" badge, and the author openly uses the chart placement as social proof.

6. **Auto-generated content sites and SEO long tail (confirmed)** : arsentev.ai (09-03), hdatf.com, ac0.ai (09-06), repocompass (09-13), PyShine (10-05), zentor.ai (10-21), setproduct freebies, softrankings, SourceForge mirrors, YouTube Shorts and overview videos, TikTok (@eguonormajemite), plus the DevTwitter Telegram channel in Iran (10-09).

7. **Second wave of Japanese and Korean media (confirmed)** : Korean asapai.co.kr (09-25), tau-home (10-06); Japanese Yupir (10-08), daaquan (10-15); **GIGAZINE Japanese and English 10-31** (https://gigazine.net/gsc_news/en/20261031-m3e-canvas/), ainformation.jp (10-31). The small rebounds on 11-05 and 11-06 may be aftershocks from GIGAZINE (unverified).

8. **The README itself is the conversion page (confirmed)** : a demo GIF (draw a screen → click the flow → copy the prompt → Claude Code writes it in the terminal → it runs on a phone), READMEs in four languages (English, Japanese, Chinese, Korean), four feature cards in M3 style, and a big "Open the app" button (working directly on GitHub Pages).

9. **Not found** channels: HN (no entry for this repo or lnkiai's story in the hackernews database), Product Hunt, and paid promotion.

10. Star-farming suspicion: nerdbite raised doubts in its 09-15 article, but only in general terms, with no evidence. The growth curve (post spike → influencer second wave → exponential decay → small media rebound) is a natural shape, and the forks come from many real personal accounts. No evidence of botting turned up, but we couldn't check stargazers one by one.

### 3. Why people came and why they starred it

- **Timing** : in 2026, vibe coding and Claude Code were hot, and "AI-built UI all looks the same, with an AI look" is a widely recognized pain point. At the same time, a batch of GitHub "design → agent" tools were rising, such as baoyu-design (6.1k, +1,072 in the last 7 days), open-codesign (8.2k), OpenPencil (7.1k), and google-labs-code/stitch-skills (8.7k), all from our github database. M3E is the design language Google 2025-05 released (it scored 360 points and 557 comments on HN at the time). By 2026 it had shipped across Android 16/17 and Jetpack Compose, so it was ready to use. 09-21 Googlebook OS also uses M3E (Techmeme / The Verge), which added more buzz.

- **A hook you can explain in one sentence** : "Have AI build with M3E and it won't look like AI" is a zero-cost trick readers can try immediately. The tool swaps the hardest part, describing layouts in text, for drag and drop. The trick is what spread; the stars went to the tool.

- **Zero friction** : no account, no server, no install. Open the webpage and it works. The AI features bring their own key, and the key never leaves the browser.

- **High polish** : 213 commits covering 30 M3E components, phone and desktop screen sizes, flow previews, themes, prompts in four languages, plus a public/agent.md that agents can read (an agent can draw a design back and return a share link). It doesn't look like a demo.

- **Author story** : an indie dev who is a first-year university student in Japan, so the Japanese community naturally wants to spread it.

### 4. Competitors

| Product | Type | Launched | Scale | How it differs from M3E Canvas |
|---|---|---|---|---|
| Google Stitch(+ stitch-skills) | Big-company features / web | 2025-05 (I/O, formerly Galileo AI); skills library 2026-01 | Official Google; skills library 8.7k stars | Generates UI from text or images and exports code, with the AI deciding the layout. M3E Canvas has the human place real components and only outputs a prompt, so the result is more controllable. |
| Figma Make / Figma + MCP | Big-company features | 2025 | Standard in the design industry | Requires professional design skills and is paid. M3E Canvas is free, built for developers who can't design, and uses only this one M3E system. |
| Claude Design (claude.ai/design) and the open-source alternative open-codesign (8.2k), plus baoyu-design (6.1k) | Big-company features / open source | 2026 | See left | Generates a prototype HTML from a prompt. M3E Canvas goes the other way: you draw first, then get the prompt. |
| superdesign | Open source (in-IDE design agent) | 2025-06 | 7.6k star | AI-generated design with no design-system constraints |
| OpenPencil | Open source (AI vector design canvas) | 2026-02 | 7.1k star | General-purpose canvas + AI generation. Not tied to M3E, and the prompt isn't the final output. |
| tldraw make-real / draw-a-ui | Open source | 2023-11 | Trendshift lists draw-a-ui as a similar repo (5.4k) | Turns hand-drawn sketches directly into code. M3E Canvas uses structured components and outputs instructions for an agent. |
| screenshot-to-code | Open source | 2023-11 | 81k star | Screenshot-to-code. You need an image first, and there's no design system. |
| Material Theme Builder / the official Figma M3 Kit | Big-vendor tool | From ¥2021 | Official Google | Only handles themes or component libraries. No workflow, no prompt output. |
| AI wireframe SaaS like Uizard and Visily | Web | 2018–2022 | Commercial SaaS | Paid, generic styles; M3E Canvas is free and open source, tied to M3E, built for coding agents |

Verdict: many products do "draw the UI → let AI write it," and big companies are doing it too. But the combination of **"locked to one real design system + outputs a text prompt instead of code"** hasn't shown up in an open-source product before M3E Canvas.

### 5. Differentiation, and whether that's why it broke out

- The differentiation has three layers: ① it uses only real M3E components (even details like morphing loading, wavy progress, and magnetic groupings are handled), so what you draw looks like native Google design; ② the output is a prompt, not code, so it doesn't compete with any coding agent and instead sits upstream of all of them; ③ it's purely static, needs no login, and is BYOK.

- **These differences are why it took off, but the thing that actually worked is differentiation at the level of the narrative** : the traffic started from the idea that "M3E is the design system without the AI smell," and the tool is the proof of that idea. Without that post and the long Zenn article, an "Android prototype canvas" alone would have a hard time breaking out. The author himself said he "didn't expect the Android topic to grow this much."

### 6. Visibility and copycats

- Visibility: **spreading in small circles, moderate reach** . It got covered by GIGAZINE, hit #1 on Trendshift's daily chart, was reshared by developer accounts on LinkedIn / IG, and was written up by aggregator sites in Japanese, Chinese, Korean and English. But it wasn't on HN and wasn't covered by mainstream tech media like TechCrunch. It's an open-source project with no revenue involved; the author monetizes through GitHub Sponsors and a paid X subscription called "いのスク."

- Copycats: **no direct clone found** . Around it there are some libraries riding the M3E buzz, such as shadcn-m3e (62 stars, 10-01), charliesbot/android-design (which turns M3E design judgment into an agent skill, 36 stars, 09-27), and a SourceForge mirror. But nobody has brought the "design-system canvas → prompt" format over to other design systems like iOS Liquid Glass or shadcn (a search of GitHub repos by description turned up no hits).

### 7. Takeaways

- **Post the "tip" first, then the "tool"** : use a prompt trick people can reproduce right away to validate resonance, then once it takes off, follow up with the tool and the long-form article within 48 hours.

- Take a **design system a big company just pushed that developers don't yet know how to use** , and package it as the "constraint layer" for the AI era. The same playbook could work for iOS 26 Liquid Glass, shadcn, Fluent 2, and HarmonyOS design specs, and right now those are open spots.

- Define the output as a "prompt / agent.md for agents," neutral across all coding tools, so users of any tool can use it.

- Treat the README as the landing page: a demo GIF that walks through the full loop, four-language versions, a live Pages link you can open right away, and chart badges as social proof.

- Use the open-source reputation to drive traffic to the next project (the author is already teasing Live2D / a VTuber production kit), and hook up Sponsors and X subscriptions for monetization.

### 8. Uncertain

- We couldn't get the specific URL, posting time, or engagement numbers for the original X post (we only have the author's own account in Zenn).

- Whether September appeared on GitHub's sitewide Trending and at what rank is not covered by our database (unverified).

- The stargazers endpoint was 404 this time, so we couldn't spot-check the quality of the star accounts. Star inflation can't be fully ruled out, but the curve shape and the fork accounts look like organic growth.

- Actual usage (Pages visits, prompt copy counts) is not public.

- The source of the 11-05 and 11-06 small rebounds is unknown; it may be aftershocks from GIGAZINE or a new reshare.

This article was written by AI from public data and the data we collect daily. Numbers are sourced, and inferences are labeled.