FIGMA PLUGIN — CLICK TO CODE — 日本語UI
ワンクリックで、HTML・CSSコードを生成。
Figmaで要素を選ぶだけで、CSS・Tailwind・HTML、そしてAIへの修正指示までコピーできるプラグイン。
買い切り $15・サブスクなし／Figma Communityで285人が利用中
Playground
これが、CodeLens Pro。
左の下のカンプをクリックしてみてください！
右側にその下にコードが出ます。タブを切り替えてコピーもできます。
自家焙煎コーヒースタンド
淹れたてを、
あなたのそばに。
オンライン注文
HAND DRIP ¥520
自家焙煎コーヒースタンド
淹れたてを、
あなたのそばに。
オンライン注文
HAND DRIP ¥520
CodeLens Pro
疑似デモです。出力の形式は実物のプラグインと同じ。AI指示タブでは、PCとSPの同じ要素を自動でペアリングした指示文が出ます。
コーディングの時間、どこに消えてる？
数値ひろい
カンプとエディタを往復して、font-sizeと余白を1個ずつ確認。1ページで何十回もクリックしてる。
写し間違い
余白が4px違うだけで修正依頼が1往復。「拾って写す」作業は、丁寧にやるほど時間が溶ける。
AIへの指示出し
AIにコーディングさせても、カンプと違う箇所は残る。正しい値を調べて指示文を書くのは、結局人間の仕事。
「拾う・写す・伝える」を、クリック1回に。
New in v6
AIに、そのまま渡せる
修正指示。
MCPでコーディングしても、手直しはゼロにならない。「AI指示」タブは、選択した要素の正しい指定値を、AIが誤解しない修正指示文にして出力します。PCとSPのカンプから要素をまとめて選べば、同じ要素同士を自動でペアリングして、レスポンシブの指定を1つの指示に統合します。
- 「指定箇所以外は変更しない」を自動で含む
- 複数要素もまとめて選択OK。PC・SPを自動ペアリング
- ChatGPT・Claude・Cursor、どのAIにも貼るだけ
実装がデザインカンプと違っています。
以下の指定に合わせて修正してください。
指定箇所以外は変更せず、
既存のクラス命名規則を維持してください。
対象: .order-button（「hero」内）
【PC（カンプ幅1440px）】
padding: 12px 32px;
border-radius: 999px;
【SP（カンプ幅375px）】
padding: 12px 24px;
width: 100%;Features
実案件でそのまま使える機能が、すべて入っています。
How it works
使い方は、3ステップ。
- 1Figmaで要素を選択する
- 2形式を選ぶ（CSS / Tailwind / rem / HTML / AI指示）
- 3コピーして、エディタかAIに貼る
Pricing
一度買ったら、ずっと使える。
アップデートも追加費用なし。海外の類似ツールは月額サブスク＋トークン制が主流ですが、CodeLens Proは買い切りです。
$15買い切り
- 5日間の無料トライアル（機能制限なし）
- すべての出力形式・今後のアップデート込み
- 端末制限なし・追加課金なし
お支払いはFigmaの決済システム（Figma Payments）経由。このサイトでの入力は不要です。
FAQ
よくある質問
無料トライアルで全機能を使えますか？
はい。5日間、機能制限なしですべて使えます。クレジットカードの事前登録も不要です。
対応している出力形式は？
CSS（px）／rem（SCSS関数形式にも対応）／Tailwind CSS／HTML（ネスト構造対応）／擬似要素（::before / ::after）／AI修正指示、の6種類です。
Auto Layoutを使っていないデザインでも使えますか？
使えます。色・サイズ・フォント・影などのスタイル抽出は要素単位で動きます。なお、レイアウト構造（Flexbox / Grid）の自動変換はAuto Layoutが組まれている場合に働きます。
購入後のアップデートは無料ですか？
はい。買い切り$15に今後のアップデートも含まれます。新バージョンはFigmaを開き直すと自動的に反映されます。
英語UIはありますか？
現在は日本語UIのみです。出力されるコード自体は言語に関係なく使えます。
まずは試しに、あなたのカンプで使ってみてください。
買い切り $15・サブスクなし・日本語UI