lnkiai

REA: morluto/rea m3e-canvas: lnkiai/m3e-canvas How to Be a Programmer: braydie/HowToBeAProgrammer Subscribe to CodeZone!

コードの代わりに AI がシステムを演じる試作ツール「kuron」を作った なぜ作ったか 個人開発で AI と一緒に作っていると、話しているうちに「作るべきもの」がどんどん変わっていきます。頭の中に完成形があったつもりでも、実際に触ってみると欲しかったのは少し違うものだった、ということがよくありました。 AI のおかげで、動くものに限れば数時間で試作を出せるようにはなりました。それでも、アイデアが本当に役立つかを確かめるには何時間もかかります。作って、触って、違うと気づいて、作り直す。画面だけのモックでは判断できません。画面は簡単で、役に立つかどうかを決めるのはその裏のふるまい（判断、データ、人から人への受け渡し）だからです。 そこで順番を逆にしました。中身のある試作を数分で作って、手で触って確かめる。何を作るべきか分かってから、それを逆算して仕様と開発計画にする。 そのための道具が kuron（空論）です。 紹介ページ（記録した実行の再生つき）: kuron.pages.dev ブラウザ版（claude.ai へのログインが必要）: claude.ai ソース（MIT）: Ag3497120/kuron 一言でいうと「コード＝AI」 動く試作を作るとき、時間がかかるのは画面よりもバックエンドの処理と、画面との連携です。kuron は、画面は最小限の HTML と JS で済ませ、残りのシステム側の処理を AI が演じて補います。アプリのコードは1行も生成しません。 アイデア ─▶ 立ち上げ役の LLM ─▶ ふるまいのメモ・データ・画面・タイマー・検証・既存技術の見積もり │ ボタン / タイマー / 画像 ─▶ 実行役の LLM ─▶ 必要なものを読み、手足で世界を変える │ 「ここはこうして」 ─▶ 変更役の LLM ─▶ 自分の画面・データ・メモを書き換える │ world.json ◀────┘ ─▶ 最小限の画面（サイト・スマホ・PC・IoT・時計…） 実例：5端末の診療所 英語で書いた診療所のアイデア（受付タブレット・医師の PC・在庫の PC・患者のスマホ・待合室の表示板）を Claude Code で動かした記録です。 アイデアからの立ち上げ 65秒・手足の呼び出し16回・約 $0.41 ボタン1回 7.2〜13.8秒・手足1〜3回・$0.06〜0.12 変更の依頼 26秒（2画面とメモを書き換え） 受付で「Ken Sato さん、今朝から胸が締めつけられる」と入れて「Check in」を押すと、Claude が持病と症状から緊急度を「高」と判断し、医師の待ち一覧の先頭に出します。問診、呼び出し、診察メモ、処方（在庫が減る）、会計、支払いまで、すべてボタンを押すたびに Claude がシステムとして処理しています。紹介ページで、この12ステップを実際の画面で再生できます。 仕組み 手足（tools）だけをコードで持つ コードにあるのは、どのアイデアにも使える汎用の手足だけです。 データを保存・検索する（apply / query / overview） 画面を定義する（define_screen） 知らせる、読み上げる、試す音を鳴らす、音を帯域ごとに加工する、図を描く タイマー、検証シナリオ、既存技術の見積もり それぞれの手足は、受け取った入力の形だけを確かめ、問題があれば言葉で返します。 // define_screen の一部。部品の種類ごとに必須の項目を確かめるだけで、中身は判断しない const NEED = { heading: ["text"], button: ["text"], list: ["collection"], /* … */ }; if (missing.length) return fail("not saved, fix and call again: " + missing.join("; ")); 記録した実行でも、立ち上げの途中で Claude が見出しに text ではなく label を書き、手足が「heading needs text」と返して、Claude が自分で画面を定義し直していました。コードで補正する部分はありません。 世界の全部ではなく「概要」を渡す 毎ターン、各コレクションの件数・項目名・最新の数件だけを渡し、足りなければ Claude が query で読みに行きます。システムが大きくなっても1ターンの大きさがほぼ変わりません。 1つだけ守ったルール コードに業務ロジックを書かない。 試作がおかしな動きをしたら、if 文で塞ぐのではなく、LLM への指示で直す。 コードに入れるもの コードに入れないもの 汎用の手足、入力の形のチェック、最小限の描画 業務の判断、単語リスト、LLM の意図の推測、特定のアイデア向けの例外 症状ごとにコードで直すと、普通のプログラミングに戻ってしまいます。このルールが、どんなプロンプトの工夫よりも効きました。 「何でもできそう」に見える問題：既存技術スイッチ LLM が全部やると、アイデアは実際より実現しやすく見えてしまいます。そこで立ち上げのときに、Claude に操作ごとに「いま出せる版ならどう作るか」を見積もらせています。 普通のコード / モデルが必要 / 外部サービス / まだ無理 どれくらい間違えるか、どれくらい遅れるか 「既存技術」スイッチを入れると、試作がその見積もりどおりに遅れたり、間違えたりします。音を扱うアイデアなら、イヤホンの遅延や音漏れも再現します。 逆算：仕様と開発計画を出す 触って確かめたら、実際にシステムがしたこと（手足の呼び出しと返事）を正解例にした仕様を作り、Claude がコーディングエージェント向けのプロンプトつき開発計画を書きます。試作の目的は「作るべきものを知ること」なので、ここがゴールです。 2つの動かし方 Claude Code（claude -p ＋ MCP） 手足を MCP サーバーとして出し、claude -p にそれだけを使わせます。立ち上げと変更は Sonnet 5.5、ボタン操作は Haiku 5.5 です。 const args = ["-p", "--model", model, "--mcp-config", JSON.stringify(mcp), "--strict-mcp-config", "--tools", "", "--allowedTools", hands.map(h => "mcpkuron" + h.name).join(","), "--output-format", "json", "--effort", role === "event" ? "low" : "medium", "--system-prompt", system]; --preset local にすると、Ollama のツール呼び出しで同じ手足を使えます。 Claude のアーティファクト（インストール不要） アーティファクトのページから Claude を呼ぶ機能（sample）には、ページの関数をツールとして渡せる仕組みがあります。手足をそのままページの関数にすると、ブラウザだけで同じことができました。費用は見る人の Claude の利用枠から出ます。 const tools = handsFor(role).map(h => ({ name: h.name, description: h.description, inputSchema: shallow(h.input), execute: async input => { const problems = shapeProblems(h.input, input); if (problems.length) throw new Error("not done, fix and call again: " + problems.join("; ")); return h.run({ world, emit }, input).text; } })); const res = await sample(prompt, { tools, modelTier: role === "event" ? "quick" : "default" }); 落とし穴：スキーマの入れ子は8段まで 公開直後、ブラウザ版は約18時間まったく動いていませんでした。アーティファクトのツールのスキーマは入れ子が8段までで、画面定義の手足が12段あったため、Claude への最初の呼び出しが毎回弾かれていたのです。しかも HN からの流入の山がちょうどその時間でした。 今は、深すぎる部分だけを「形を説明する一文」にまとめて Claude に見せ、手元の形のチェックは元の詳しいスキーマで行っています。ビルド時にも全部の手足の深さと大きさを確かめるようにしました。 作る上で大変だったこと Claude が「コードで塞ぐ」方向に戻ろうとする kuron 自体も Claude と一緒に開発しています。ところが、アイデアを試して変な動きが出るたびに、Claude はその症状をコードのルール（単語のリストや条件分岐）で直そうとします。一つひとつはもっともらしい修正ですが、受け入れると「コード＝AI」が崩れて、普通のプログラミングに戻ってしまいます。 そのため、修正のたびに実装をよく見て、ルールで塞いでいないかを見張る必要がありました。方針は「手足は形だけを確かめる。ふるまいは LLM への指示で直す」です。 検証用のアイデアが足りない アイデアはそうポンポン出てくるものではないので、検証の数がまだ少ないです。既存のサービスを題材にして、kuron でどこまで再現できるかを試すのも手だと考えています。 向いていないこと 本番での利用（1回の操作に数秒と数セント、結果も毎回わずかに揺れる） ピクセル単位の UI デザイン（画面はわざと最小限） ゲームなど即座の反応が要るもの 大量で厳密なデータ処理 これから 最終的には、逆算の結果としてプロンプトと開発計画を出し、それを渡せば同じものを作れるツールにしたいと考えています。方向は少し違いますが、m3e-canvas のように、最後にプロンプトを出して同じものを作れるところまでつなげたいです。そのために、逆算の段階で最新のプロンプトや制御の技術を使い、開発計画を立てる部分を強くしていきます。 返事と実際の変化が食い違う頻度（たとえば、ターンをまたいで項目名がずれる）を測りたいと思っています。試したいアイデアがあれば、ぜひ教えてください。 リンク 紹介ページ: kuron.pages.dev ブラウザ版: claude.ai GitHub: Ag3497120/kuron

マテリアルデザインのアニメーションをWebで再現してみました！ 今回は拡張FABの動きを実装しました👇️ lnkiai/m3e-canvas t.co

Open source do GitHub: #15 a #11 | Vol. 10 #shorts Os projetos #15 a #11 do Top 15 open source do GitHub, Vol. 10, 10 segundos para cada um. #15 showtime: FavioVazquez/showtime #14 Worklenz: Worklenz/worklenz #13 Reminal: harshalgajjar/Reminal #12 M3E Canvas: lnkiai/m3e-canvas #11 TapMap: olalie/tapmap Vídeo completo com os 15: youtu.be Oferecimento: Hallen Tech, hallentech.com #shorts #opensource #github

15 projetos open source do GitHub que valem o seu tempo | Vol. 10 15 projetos open source do GitHub que valem o seu tempo, em contagem regressiva e com 10 segundos para cada um: de estúdio de vídeo para o seu agente de código a painel de hospedagem, GIS em Rust e uma faxina no Apple Intelligence do Mac. 📺 Décimo volume da série Open source do GitHub, o primeiro com 15 projetos. Escolhidos numa nova análise da lista inteira: estrelas, frequência de commits, último commit, README, documentação, capturas de tela e site, conferidos em 20/10/2026. Qual desses você vai testar primeiro? Conta nos comentários! ⏱️ CAPÍTULOS E LINKS 0:00 Abertura 0:10 #15 showtime: estúdio de vídeo local para o seu agente de código, sem nuvem FavioVazquez/showtime 0:20 #14 Worklenz: gestão de projetos open source com lista, quadro e Gantt, na nuvem ou no seu servidor (3,3 mil estrelas) Worklenz/worklenz 0:30 #13 Reminal: feche a tampa do Mac e use as janelas, os desktops e os terminais dele em qualquer navegador harshalgajjar/Reminal 0:40 #12 M3E Canvas: desenhe telas Material 3 Expressive no navegador e copie um prompt para a sua IA de código (9,5 mil estrelas) lnkiai/m3e-canvas 0:50 #11 TapMap: mapa em tempo real de para onde o seu computador se conecta, local e sem telemetria (1,6 mil estrelas) olalie/tapmap 1:00 #10 Reitti: linha do tempo da sua localização no seu servidor, com compartilhamento ao vivo (2,7 mil estrelas) dedicatedcode/reitti 1:10 #9 Television: buscador fuzzy rapidíssimo para o terminal (6,4 mil estrelas) alexpasmantier/television 1:20 #8 RustGIS: GIS gratuito em Rust, no Windows, macOS, Linux e no navegador (1,7 mil estrelas) opengeos/RustGIS 1:30 #7 Langfuse: observabilidade, prompts e avaliações para aplicações de IA, com self-host (36,1 mil estrelas) langfuse/langfuse 1:40 #6 Hindsight: memória para agentes de IA que aprendem com o tempo (51,7 mil estrelas) vectorize-io/hindsight 1:50 #5 MailCheap: newsletter self-hosted em que você paga pelos e-mails enviados, com MCP para o seu agente (1,3 mil estrelas) marclou/mailcheap 2:00 #4 Laranode: painel de hospedagem open source, alternativa ao cPanel e ao Plesk (1,5 mil estrelas) crivion/laranode 2:10 #3 OneCLI: um agente de IA isolado para cada pessoa da equipe, com cofre de credenciais e regras de acesso (3,6 mil estrelas) onecli/onecli 2:20 #2 Soup: fine-tuning de LLMs com um comando, até modelo de 8B em GPU de 4 GB (modo beta) (9,4 mil estrelas) MakazhanAlpamys/Soup 2:30 Oferecimento Hallen Tech 2:44 #1 RemoveMacAI: desliga o Apple Intelligence, apaga os modelos e corta anúncios e coleta de dados do macOS, tudo reversível (5 mil estrelas) omlahore/RemoveMacAI 2:54 Encerramento 🧡 Oferecimento: Hallen Tech, liderança de tecnologia sob demanda, software, cloud e segurança para a sua empresa. Site: hallentech.com E-mail: contato@hallentech.com Instagram: instagram.com LinkedIn da Hallen Tech: linkedin.com LinkedIn do Eddwan: linkedin.com Se curtiu, deixa o like, segue o canal e ativa as notificações para a próxima lista. #opensource #github #programacao #ferramentas

Sketch an app, AI builds it: M3E Canvas in 40 seconds The short version: I sketched a coffee-ordering app in M3E Canvas, handed the prompt to Claude, and got a working app back. The repo: lnkiai/m3e-canvas Full episode: youtube.com I'm Tessa. I'm AI. I try one GitHub repo per video and tell you if it's worth it. #TessaTriesAI #GitHub #AItools #vibecoding

M3E Canvas: Sketch Material 3 Expressive screens in the browser, link them, tap through them, and copy a prompt for your AI coding tool (9.1k stars) What it does All text below is quoted directly from the project README. >Sketch Material 3 Expressive screens in the browser, link them, tap through them, and copy a prompt for your AI coding tool. >Works with any AI coding tool that takes a prompt, such as Claude Code, Codex, Gemini CLI or Cursor: copy the prompt, paste it into the tool, and ask for the app. What it does: - Drag-and-drop parts: buttons, icon buttons, FABs, split buttons, FAB menus, chips, app bars, navigation bars, floating toolbars, tabs, search bars, cards, lists, dialogs, snackbars, text fields, dropdowns, switches, checkboxes, radio buttons, sliders, text, images, camera and map placeholders, badges, boxes and dividers, all drawn to Material 3 Expressive. - Magnetic connections: bring two buttons or list items close and they fuse into a connected group; the corners soften as they meet. - Real M3 Expressive loading: the shape-morphing Loading Indicator (ported from material-components-android) and wavy linear / circular progress indicators. - Tap to navigate: give any tappable part, an app bar icon or a navigation bar destination a target screen (or "back") and a transition: slide from any of the four sides, fade, expand or none. Arrows show the flow on the canvas; the preview lets you tap through it, and back plays the transition in reverse. - Swipe to navigate: a screen can open another on a left / right / up / down swipe. In the preview the screen follows your finger, and the reverse swipe goes back. - Prompt output: the whole design (or a single screen) becomes a concise natural-language prompt in Japanese, English, Chinese or Korean, including your own notes on what each part does. Pick Android (the default) or the web as the target and the prompt asks for the matching stack. - Export: copy the prompt (edit it by hand first if you like) or save a screen as a PNG. Repository lnkiai/m3e-canvas Repository stats |Metric|Value| |:-|:-| |Stars|9,141| |Forks|975| |Last release|None| |Languages|TypeScript 99.2%| |Contributors|15| |AI contributor accounts (Claude / Codex / Cursor / Copilot)|claude (56 commits), Copilot (13)| |AI co-authored commits|Claude: 57, Copilot: 13| Main contributor |Field|Value| |:-|:-| |Name|inori| |GitHub|@lnkiai| |Commits to this repo|79 (top contributor)| |Company / Location|Japan| |Website|lnkiai.com| |X / Twitter|@lnkiai| |Followers|223| |Public repos|5| |On GitHub since|2024-11-01|

M3E Canvasが9,000スターを突破しました！🎉🎉 応援してくださっている皆さん、本当にありがとうございます！次は10,000スターを目指します！⭐️ lnkiai/m3e-canvas t.co

M3E Canvasをアップデートしました！🎉 スクロールに対応して、縦に長い画面も自由にデザインできるようになりました！👇️ lnkiai/m3e-canvas t.co

M3E Canvas یه ابزار رایگان و Open Source که داخل مرورگر صفحه‌های Material 3 رو می‌سازی، به هم وصلشون می‌کنی، Flow رو تست می‌کنی و آخرش خودش یه Prompt آماده می‌ده که می‌تونی مستقیم بدی به Claude Code، Codex، Gemini CLI یا Cursor تا برات پیاده‌ کنی GitHub: lnkiai/m3e-canvas