Design X-Ray

Inspect and reverse-engineer the design system of any website — typography, colors, spacing, components and more.

Design X-Ray helps designers, developers, marketers, and product teams instantly analyze any website's visual design system. 🔍 Scan any webpage and reveal: • Typography styles and font hierarchy • Color palettes and design tokens • Spacing systems and grid structure • Border radius usage • Shadows and elevation patterns • Buttons and UI components • Form inputs and interactive elements • Accessibility insights • Design consistency checks • Exportable design audit reports Perfect for: ✅ UI/UX Designers ✅ Product Designers ✅ Frontend Developers ✅ Agencies ✅ Design Systems Teams ✅ Marketing Teams Design X-Ray automatically inspects live websites and transforms visual patterns into structured design insights, helping you understand, replicate, document, and improve digital products faster. Save hours of manual inspection and uncover the design decisions behind any modern website. Built for professionals who want to learn from great products and create more consistent user experiences. ------------------------------------------------------------- Design X-Ray は、デザイナー、開発者、マーケティング担当者、そしてプロダクトチームが、あらゆるウェブサイトのビジュアルデザインシステムを瞬時に分析できるツールです。 🔍 あらゆるウェブページをスキャンして、以下を可視化します。 • タイポグラフィとフォント階層 • カラーパレットとデザイントークン • スペーシングシステムとグリッド構造 • ボーダー半径（角丸）の使用状況 • シャドウとエレベーションパターン • ボタンやUIコンポーネント • フォーム入力とインタラクティブ要素 • アクセシビリティ分析 • デザインの一貫性チェック • エクスポート可能なデザイン監査レポート 最適なユーザー： ✅ UI/UXデザイナー ✅ プロダクトデザイナー ✅ フロントエンド開発者 ✅ デザイン・クリエイティブエージェンシー ✅ デザインシステムチーム ✅ マーケティングチーム Design X-Ray は、実際のウェブサイトを自動解析し、視覚的なパターンを構造化されたデザインインサイトへ変換します。 これにより、デジタルプロダクトをより速く理解し、再現し、ドキュメント化し、改善することができます。 手作業による調査時間を大幅に削減し、現代的なウェブサイトのデザイン判断を簡単に把握できます。 優れたプロダクトから学び、一貫性のあるユーザー体験を構築したいプロフェッショナルのために開発されました。