CodeLens Pro

About this plugin

FigmaデザインからHTML・CSS・AIへの修正指示まで瞬時に生成CodeLens Pro は、Figma の選択要素からコーディングに必要なコードを即座に生成・コピーできる日本語対応の開発者向けプラグインです。CSS・HTML・TailwindCSS・px→rem変換に加え、AIコーディング時代の「修正指示文」まで出力できます。HTML構造も同時出力でき、ネスト構造にも対応。グラデーション、シャドウ、AutoLayoutまで完全対応し、デザインからコーディングへの橋渡しを劇的にスピードアップします。★ NEW：AI指示タブ✅ 選択要素から、AI（ChatGPT / Claude / Cursor等）にそのまま渡せる修正指示文を生成✅ PCカンプとSPカンプの同じ要素を2つ選択すると、レスポンシブ指定を1つの指示に自動統合✅ 「指定箇所以外は変更しない」を自動で含み、AIの書き換えすぎを抑制✅ AIにコーディングさせた後の「カンプと違う」の修正指示が、クリック1回で完成主な機能✅ HTML + CSS セット出力✅ HTML 構造の自動生成✅ ネスト構造での一括出力に対応✅ セマンティックタグ自動判定（header / nav / section 等の命名をタグに反映）NEW✅ クラス名の編集機能✅ スタイルとマークアップを同時取得✅ 擬似要素への変換機能（before/after）高度なスタイル抽出✅ グラデーション完全対応（線形・放射）✅ シャドウ自動変換（DROP_SHADOW → box-shadow）✅ Auto Layout → Flexbox / Grid 自動変換✅ line-height の自動計算・変換✅ 回転対応（transform: rotate()）✅ 画像アスペクト比の自動取得✅ 非表示プロパティの自動除外✅ 要素間の余白を取得柔軟な出力形式✅ CSS / rem / Tailwind CSS / HTML / AI指示 の 5 形式対応✅ rem ベースサイズ変更（10px〜20px）✅ SCSS 関数形式出力（rem(24) 形式）✅ カラーフォーマット切替（rgba ↔ hex）開発効率化✅ クラス名編集機能✅ 複数要素の一括取得✅ プロパティのみコピー✅ リアルタイムプレビュー安心の価格設定✅ 5 日間無料トライアル✅ 買い切り $15（サブスクなし・アップデート込み）フロントエンド開発者・デザイナーのワークフローを加速し、デザインからコードへの変換時間を大幅に削減します！------------------------Instantly Generate HTML, CSS & AI Fix Instructions from Figma DesignsCodeLens Pro is a developer-friendly plugin that instantly generates and copies HTML,CSS, and other code from selected Figma elements. Supports Tailwind CSS, px→remconversion — and now, ready-to-paste fix instructions for AI coding agents!Simultaneously outputs HTML structure with full support for nested elements. Completecoverage for gradients, shadows, and Auto Layout—dramatically accelerating thedesign-to-code workflow.★ NEW: AI Instruction Tab✅ Generate fix instructions you can paste directly into ChatGPT, Claude, or Cursor✅ Select the same element from your PC and SP comps to merge responsive specs into one instruction✅ Automatically includes "don't change anything outside the specified scope" to prevent AI overreach✅ Fixing "this doesn't match the design" after AI coding now takes one clickKey Features✅ HTML + CSS Set Output✅ Automatic HTML Structure Generation✅ Bulk Export with Nested Structure Support✅ Automatic Semantic Tag Detection (header / nav / section, etc.) NEW✅ Editable Class Names✅ Simultaneous Style & Markup Extraction✅ Pseudo-Element Conversion (::before/::after)Advanced Style Extraction✅ Full Gradient Support (Linear & Radial)✅ Automatic Shadow Conversion (DROP_SHADOW → box-shadow)✅ Auto Layout → Flexbox / Grid Auto-Conversion✅ Automatic line-height Calculation & Conversion✅ Rotation Support (transform: rotate())✅ Automatic Image Aspect Ratio Detection✅ Auto-Exclude Hidden Properties✅ Extract Spacing Between Elements Flexible Output Formats✅ 5 Format Options: CSS / rem / Tailwind CSS / HTML / AI Instructions✅ Adjustable rem Base Size (10px–20px)✅ SCSS Function Format Output (rem(24) syntax)✅ Color Format Toggle (rgba ↔ hex)Development Efficiency✅ Class Name Editing✅ Bulk Multi-Element Export✅ Properties-Only Copy✅ Real-Time PreviewSimple Pricing✅ 5-Day Free Trial✅ One-Time Purchase $15 (No Subscription, Updates Included)Accelerate frontend developer and designer workflows—drastically reduce design-to-code conversion time!