「Rewrite Me」をAgensiで公開しました。「とりあえず仮の文言でモックアップ作ったけど、要件固まったら書き直したい」を解決するスキルです。 ・BRIEF.mdに沿って見出し・本文・CTA・altテキストを一括リライト ・レイアウトやコード構造には一切触れない、テキストだけ ・全文差し替え/既存文言尊重の微調整を選択可 ・文章のボリュームも増減自在 ・LPの場合はさらに、説得原則(社会的証明・権威付け・損失回避・アンカリング等)も追加で適用可能 ・ただし実データがない主張は絶対に捏造しません。曖昧な材料は曖昧なまま、が原則 agensi.io/skills/rewrite-me-… --- Just published a new skill on Agensi: Rewrite Me. Solves the "I shipped a mockup with placeholder copy, now the requirements are locked in and I need to rewrite it for real" problem. ・Rewrites headings, body copy, CTAs, and alt text against your BRIEF.md ・Touches text only — never layout, classes, or markup structure ・Choose a full rewrite or a light touch-up that keeps existing phrasing ・Dial text volume up or down independently ・For landing pages, it can also layer on behavioral-economics persuasion framing (social proof, authority, loss aversion, anchoring, default effect) ・Never fabricates data to back it up — vague stays vague, and any missing data gets reported as a gap instead of invented agensi.io/skills/rewrite-me-…

Agensiに「code-to-figma」を出品しました。実装済みのコードを、望むフィデリティでFigmaに書き出すスキルです。今回の出品にあたり、安定して書き出せるように結構修正を加えています。 ・Level 1: Code to Canvas でそのままFigmaに（編集不可、最速）。Chrome機能拡張と同じだけど、エクスポート設定まで自動 ・Level 2: 実ノードとして生成（オートレイアウト付き） ・Level 3: コンポーネント＋バリアント化までプラス ・Level 4: コード内のカラー・スペーシングトークンをFigma変数に紐付けたフル生成（デザインシステム品質） Astroの動的ルート([slug]等)にも対応していて、ブログ記事や商品ページを1件・複数件・全件からバッチでエクスポートできます。 agensi.io/skills/code-to-fig… New Skill `code-to-figma` on Agensi. Sends your implemented code to Figma at whatever fidelity you need. • Level 1: code to canvas straight into Figma (non-editable, fastest). Export options available • Level 2: real Figma nodes with auto layout • Level 3: components + variants • Level 4: full rebuild with your code's actual color/spacing tokens bound as Figma variables (design-system quality) Handles dynamic routes (Astro's [slug] etc.) too — export one page, a batch, or every entry in a content collection at once. agensi.io/skills/code-to-fig…

続けてもう1本。「brief-me」はモックアップや実装に入る前に、要件を構造化インタビューしてBRIEF.mdにまとめるスキルです。 サイト種別・ターゲット・ペルソナ詳細・訴求ポイント・競合差別化・デバイス優先度・ブランド資産・コンバージョンゴールを4ラウンドの質問で引き出します。「LP作って」だけで済ませず、エージェントが推論で埋めがちな前提を先に固めておくことで、後工程のコピーやセクション構成の精度が上がります。 Web・アプリどちらの要件定義にも使え、質問・出力とも会話言語に自動対応。最初の「何が作りたい？」への回答を詳細に渡せば渡すほど、BRIEF.mdの精度も上がります。 agensi.io/skills/brief-me-pr… Second one: `brief-me` — a structured requirements interview that runs before any mockup or code gets written, and hands off the answers as a durable BRIEF.md. Four rounds of questions cover site/app type, target audience, persona detail, value proposition, competitive differentiation, device priority, brand assets, and conversion goal. Instead of letting an agent quietly guess your audience and goal from a thin prompt, it locks those down first — which shows up later in sharper copy and section priorities. Works for websites and app screens alike, and both the questions and BRIEF.md adapt to whatever language you're using. The more detailed your answer to the initial question, “What do you want to create?”, the more accurate BRIEF.md will be. agensi.io/skills/brief-me-pr…

Just published a bundle of 4 Figma structuring skills on Agensi. "Figma Structuring Kit" Tidy Up + Tokenize + Componentize + Enhance $36 → $25.20 (30% off) agensi.io/bundles/figma-stru… Turns a messy, manually-positioned Figma frame into something structured, in 4 passes: ・Auto layout restructuring (Tidy Up) ・Color/spacing tokens (Tokenize) ・Repeated elements → components (Componentize) ・A final audit pass (Enhance) Pair it with the free Figma Layer Rename (bulk-fix auto-generated layer names) agensi.io/skills/figma-layer… and Figma Optimize (an orchestrator that runs only the passes you pick, in the right order) agensi.io/skills/figma-optim… and calling Optimize alone takes you from a messy frame all the way through cleanup.

ターミナル側からFigmaを構造化するスキル4本をまとめたバンドルをAgensiで公開しました。 「Figma Structuring Kit」 Tidy Up ＋ Tokenize ＋ Componentize ＋ Enhance $36 → $25.20(30%オフ) agensi.io/bundles/figma-stru… 手動配置でぐちゃぐちゃなFigmaフレームを ・オートレイアウトで整理(Tidy Up) ・色/スペーシングを変数化(Tokenize) ・繰り返し要素をコンポーネント化(Componentize) ・仕上げの監査(Enhance) という4工程で構造化できます。 さらに無料の Figma Layer Rename(レイヤー名の一括整理) agensi.io/skills/figma-layer… と Figma Optimize(この5工程から必要なものだけ選んで自動実行するオーケストレーター) agensi.io/skills/figma-optim… を組み合わせると、Optimize を呼ぶだけで整理から仕上げまでの一連の最適化フローが完結します。

Skills over MCP - Ola Hungerford, Principal Engineer Nordstrom piped.video/3oHLjC3wZNE?si=ZUkl… @YouTubeより

Figma版として用意していた最適化系のスキルはすべてClaude Code版としてパッケージ版には収録していますが、こういった特定の用途をもったスキルだけが欲しいという方もいらっしゃるかもしれないので、Agensiに単体のユニバーサルスキル、そして最適化系が全部入ったバンドルを販売予定で申請中です

ページ全体みたいなフレームを渡しても良いし、こういう細かい要素みたいなのも渡せます。適当に作られた中央からズレてるラベルのあるボタンみたいなのとかね。それが意図的な置き方なのか、適当に置かれてるのか単なるズレなのかも一応は判断するようになってはいます。 Figma版も同じ。

Figmaのコンポーネント(バリアント)の作りをチェックするClaude Codeスキル「Figma Component Audit」を、Agensiにも出しました(無料)。もともとGitHubで公開していたものです。 コンポーネントまたはコンポーネントセットのURLを渡すと、5つの観点(25点満点)で採点し、Figmaで直す具体的な修正案を返します。 ・バリアントの命名と状態 ・コンポーネントプロパティ ・レイヤー構造 ・オートレイアウトと余白 ・色と文字のトークン 読み取り専用で、Figmaのファイルは変更しません。 agensi.io/skills/figma-compo… --- "Figma Component Audit", a Claude Code skill that checks how a Figma component is built, is now on Agensi too (free). It was already available on GitHub. Give it a component or component set URL and it scores it on 5 dimensions (25 points), with specific fixes to make in Figma: - Variant naming and states - Component properties - Layer structure - Auto layout and spacing - Color and typography tokens It is read-only and never changes your Figma file. agensi.io/skills/figma-compo…

Figmaのフレームを、手動配置・汎用名の状態から、オートレイアウト+意味のあるレイヤー名に整えるClaude Codeスキル「Figma Tidy Up」を、Agensiで公開しました($9)。 Code to CanvasやDesign Agentで作ったフレームは、オートレイアウトなし、Container・Paragraph・Textだらけになりがちです。 ・セクション単位で組み直し、毎回Beforeのスクショと比較 ・背景画像の上のテキストなど、意図的な重なりはそのまま残す ・変更するのはレイアウトとレイヤー名だけ(色・フォント・画像はそのまま) ・Figma Plugin APIの落とし穴21件のメモ付き agensi.io/skills/figma-tidy-… --- I just released "Figma Tidy Up" on Agensi ($9), a Claude Code skill that turns a hand-positioned or captured Figma frame into a clean auto-layout hierarchy with semantic layer names. Frames from Code to Canvas or Figma's Design Agent usually come with no auto layout and layers named Container, Paragraph, and Text. - Rebuilds one section at a time and compares each with the Before screenshot - Keeps intentional overlaps, like text over a hero photo - Changes layout and layer names only; colors, fonts, and images stay - Ships with notes on 21 Figma Plugin API pitfalls agensi.io/skills/figma-tidy-…

KMRVID Claude Skills update (2026.09.26) 🆕 New skills ・create-jp-lp — Decision logic for Japanese commercial landing pages. Reads BRIEF.md and picks the industry, appeal genre, palette, WCAG-AA CTA colors, section structure and image policy without asking, then hands off to create-mockup. ・polish-me — Report-only design review. It measures the running page at 1440px and 390px, including text-over-photo contrast from real pixels. Findings are pinned on the live page as numbered overlays. It never edits your source. 🔧 Updates ・figma-node-check is now folded into figma-tidy-up / figma-componentize / figma-enhance / code-to-figma as references/known-pitfalls.md. There is no standalone dependency anymore, and there are 2 new rules (21 in total). ・css-to-tailwind: the MCP is now optional, and every class is checked against bundled reference tables. ・figma-contrast-check: handles semi-transparent text correctly. ・create-design-md, japanese-web-guideline, figma-componentize: fixes and notes. 📦 Already using the course? Please re-download the latest package to get the new and updated skills.

Figma版の「hey-polish-me」をClaude版として移植中。とりあえずは改善提案のレポート（ブラウザ表示で番号つき）表示だけにして、提案を実装したかったらブランチとか切ってもらって番号指示して適用してみる流れ。

Figma MCP の Code to Canvas でFigmaのフレームとして書き出したもの（とかChromeの機能拡張も同じ）は、レイヤー名に Container とか Section とか付いてくるので、 tidy-up スキルを1回実行すると実はレイヤー名も綺麗になります。Figma版は既にコミュニティに公開中。 figma.com/community/skill/10…

Finds auto-generated Figma layer names (Frame 12, Group 4, Rectangle 7) in a whole frame, proposes semantic names from role and context, and renames only what you approve. Figma Layer Rename — Semantic Names for Frame/Group Layers agensi.io/skills/figma-layer…

Converts a plain CSS or Sass site to Tailwind v4 classes as a fast first pass, checks every class against Tailwind's own scale, and lists exactly what you still have to fix by hand. CSS to Tailwind — First-Pass Converter agensi.io/skills/css-to-tail…

Figma版の design-md スキル使ってくれてる人が急増してるな（ありがとう）。Claude版にも import / export できるスキルがあってGitHubで公開してるけど、Agensi.io に後で登録するからね〜 agensi.io/creators/masaaki-k… The number of people using the Figma version of the design-md skill is skyrocketing (thank you!). There’s also a skill for the Claude version that supports import/export, and I’ve published it on GitHub, but I’ll be registering it on Agensi.io soon. figma.com/@masaakikomori

場所とか部屋、料金の情報とか渡してないので簡素になっているけど、Figma版から移植した create-jp-lp スキルでブリーフを元にLP生成、 japanese-web-guideline と cognitive-ui-design を読ませて改善提案に基づいて調整。 mobile-polish でモバイル最適化までしてみた。 coral-terrace-claude.gaspani…

Claude版に移植した「create-jp-lp」に今度はFigma版で渡したブリーフの書類を渡してテスト。まあ、Figma版と同じ感じでできてますね。

Figma版にだけある「create-jp-lp」スキルもClaude版に移植してみてる。テストはブリーフも渡さずに「エステのLP作って」だけの簡素なプロンプトで実行。ちゃんと要件を詰めて渡せば、業種業態にマッチした日本式のLPができるんじゃないかな…、たぶん。細かい修正したかったらFigmaに移動すれば良い

せっかくなので、昨晩エージェントに作ってもらったAstroのサイトにモバイルデバイス向けの最適化と多言語化（英語）を適用してみました。こんなのもClaude版のスキルを使えば何もしなくても「あっ」と言う間に終わりますね。均等揃えの段落も英語では左揃えにしたりとか、全部自動。 coral-terrace-optimized.gasp…

いいね！してくれてる人も使ってくれてる人も増えてきたなぁ。ありがとう、ありがとう。 figma.com/@masaakikomori

昨日は思いつきでYouTubeのライブ配信をしてみました。Figma版のみで提供していたFigmaの最適化スキルのいくつかをClaude Code版に移植したので、実際にClaude Code側から実行してほったらかしで自動化するという内容です。 その裏側というかの話とFigma版「hey-optimize-me」の更新のお知らせになります。 【アップデート】Figma用スキル更新のお知らせ（2026.09.19） kmrvid.com/blogs/news/kmrvid… For English readers: Updated hey-optimize-me (added tidy-up as a 5th task, matching what the Claude Code port figma-optimize already had; execution order is now tidy-up → rename → tokenize → componentize → enhance). Existing buyers can re-download the latest package right away: gaspanik.gumroad.com/l/kmrvi…

丁寧に検証とかレビューしてくれたのでまあまあ時間かかりましたね。ベースがTailwind想定でないってのもあるけど。Astroで

先程はありがとうございました。ライブで最適化したFigmaのデータをそのままClaudeさんでコーディングしてもらっていますが、何の問題もなくそろそろ終わりそうです。丁寧に仕事してくれてるみたいなので30分ぐらいかかってますかね。あとで公開URLをコメント欄に追記しますね（YouTubeの概要欄にも）

Figma版のスキルだけにあったものをClaude版に移植して、最適化処理の連続実行スキルを走らせる。元はオートレイアウトも設定されてないFigmaのフレーム。 1. figma-tidy-up で全面オートレイアウト化（Hero部分の意図的な絶対配置以外） 2. figma-layer-rename は必要ないのでスキップ 3. figma-tokenize で色やサイズの変数化、テキストのローカルスタイル化とそれぞれ使用箇所へのバインド 4. figma-componentize で複数回使用されている要素を洗い出してコンポーネント化してインスタンスに置き換え。ヘッダとフッタは繰り返しではないけどコンポーネント化。ボタンはバリアント提案を受けて、サイズのバリアント追加 5. figma-enhance で前のステップでバインド漏れしていた箇所へのバインドし直し、ボタンコンポーネントへのコンポーネントプロパティの追加 以上、5ステップを figma-optimize で選択連続実行（各ステップで実行確認が入る）。 約20分でFigma側のフレーム内のデータに視覚的な崩れなどなく完璧に終了。

Figma版の「tidy-up」「componentize」「enchance」「hey-optimize-me」のClaude版への移植が完了。Claude版の optimize は tidy-up まで含めて全5ステップを選択実行できるように拡張されました。 これでFigmaを開かなくてもコンソールからあれこれ最適化できますよ。

tidy-up と figma-componetize の移植は終わってるのだけど再度別ファイルでチェック。やはりFigma側では起こってないけどMCPからだと編集時に起こる罠が見つかる。思いつきのプロンプトでの指示だと事故ってしまうところも、対応策を都度スキルに反映しているので大体うまくいくようになっています。

もう少しFigma版先行のスキルを移植してしまえば、Figma使ってデザイナーさんが最適化処理を直接やろうが、Claude Code側からエンジニアさんが最適化しようがまったく同じことができるってことになります。ハハハ

なーんの問題もなく行けちゃったな。

なーんの問題もなくいけそうだな、こりゃ

さっそくClaude版として figma-componentize を移植してみた。途中まではうまく動いてる（たぶん、うまくいく）。となると、Figma開かなくても最適化処理がほとんどできることになる。

講座限定にしてるのは「figma-node-check」という、Figma MCPを使ってノードを編集操作するときに起こりがちなバグ的な挙動を未然に防いだり補正する超重要な㊙スキルが含まれているからです。

Figma版のコミュニティスキルにも公開している「tidy-up」のClaude Code版（講座限定）を作りました。 デザイナーさんがあまりFigmaの作り方に詳しくないときとかに、Claude Code側から直接コーディングしやすい最適化されたFigmaのデータとして再構築ができるように（笑） figma.com/community/skill/10…

create-multi-pattern × create-jp-lp を併用して複数パターンで生成させることもできます。今回はモバイルメインとしてブリーフに指示があるので、モバイル版だけが生成されています。デスクトップサイズのWebサイト以外でもちゃんと作れるのでｗ（なお、所要時間5分）

今回は日本国外の皆さんには用がないであろう新スキル「create-jp-lp」の追加とそれにあわせた「hey-polish-me」スキルの更新です。新スキルはコミュニティには公開しません。パッケージ版限定です 【アップデート】Figma用新スキル追加と価格改定のお知らせ（2026.09.16） kmrvid.com/blogs/news/kmrvid…

hey-polish-me スキルに改善対象が日本式LPなのかどうか選べるオプションを付けた（この変更は未公開）。新しいスキルが登録されていれば、生成ステップは無視してその中にあるガイドラインだけを取り出して改善判定に使う仕組みにしたので、 hey-polish-me をかけたら微妙…みたいなことはなくなる

オリジナルのCSSをゼロから書くというのはナシにして、Tailwindでレスポンシブに実装できる前提で考えてもらうようにしている。図は cognitive-ui-design の有無での違い（左がなし、右があり）

そのままClaude Codeにcoding-prompterで生成したプロンプトを渡して（といっても、Claude Code側の figma-pipeline スキルを呼び出すだけなんだが 笑）、実装させ中。モバイル版とか作らなくてもTailwindベースで無理のない範囲でのデザインにおさえる方向でできているので何もしなくてもうまくいく

日本式LPの生成に特化したFigmaのエージェント用のスキルが記念すべき30本目になりそう。

一回作ったデザインに対して改善提案するスキルができました。完璧です。ブリーフを渡してそれを元に提案する、コンパニオンスキルがなければエージェント任せの1案、あれば複数の提案も可、ついでにテキストのリライトもしてしまうオプションも追加。提案内容はアノテーションにも書き記せる感じで。

スキルの検証ついでに。何も手を動かさなくてもパターン出しからブラッシュアップ、翻訳までできちゃうもんなぁ。小一時間で。