Communitygithub.com

gbechtold/Hi-Fidelity-Design

Claude Codeスキル: ハイファイデザインと実装の監査(ピクセル差分ではなく、要素ごとの数値デルタ)。不変コア+交換可能なアダプター(IDML/Figma/PDF/PNG ↔ DOM)。

Hi-Fidelity-Design とは?

このスキルは、デザインと実装の間の高い忠実度での監査を可能にします。ピクセル単位の差分ではなく、個々の要素の数値的な差異(デルタ)を比較することで、より正確で実用的なフィードバックを提供します。不変のコアロジックと交換可能なアダプターにより、IDML、Figma、PDF、PNGなどの多様なデザインフォーマットを、実際のブラウザのDOMと直接比較できます。Claude Code上で動作し、開発者はコード内のスタイルやレイアウトの正確さを検証し、デザイン仕様とのずれを迅速に特定・修正できます。このスキルは、デザインと実装の一貫性を維持したいフロントエンド開発者やデザイナーにとって非常に有用です。

対応✓Claude Code~Codex CLI~Cursor
npx skills add gbechtold/Hi-Fidelity-Design

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント

Hi-Fidelity-Design は何をしますか?

Claude Codeスキル: ハイファイデザイン↔実装監査(ピクセル差分ではなく、要素ごとの数値デルタ)。不変コア+交換可能なアダプター(IDML/Figma/PDF/PNG ↔ DOM)。

関連スキル