KMRVID Skills logo

KMRVID Skills

Figma AIとClaude Codeをつなぐ、実戦向け58のプロダクションスキル

Design Tools Artificial Intelligence Developer Tools

概要

  • Figma Design AgentとClaude Codeを一貫した開発フローで連携し、デザインから実装までの分断を埋める58個のカスタムスキル集です。
  • AIにありがちな画一的なレイアウトや配色、命名の乱れ、手作業による引き継ぎミスを減らし、本番利用を意識した制作を支援します。

主な機能

  • Figma向け18スキルで、ノードの準備状況を監査し、色・タイポグラフィ・余白の変数を紐付け、WCAGコントラストやDev Mode注釈を整備します。
  • Claude Code向け40スキルで、プロジェクト初期設定、Z/F/I型などの認知UIレイアウト、TailwindベースのReact・Astro・Vanilla開発を効率化します。
  • 画像をもとにした代替テキスト生成にも対応し、アクセシビリティを含むフロントエンド実装の品質向上を後押しします。

こんな人におすすめ

  • FigmaのAI生成デザインを、命名・レイヤー構造・変数・レスポンシブ実装まで整理して開発へ引き渡したいUI/UXデザイナーに適しています。
  • Claude Codeを使ったフロントエンド開発を標準化し、定型的なプロンプト作業やデザイン監査、アクセシビリティ対応を自動化したい開発者向けです。
投票数: 2
← 投稿一覧に戻る