Communitygithub.com

minsu42/claude-skill-design-md

スクリーンショットからDESIGN.mdを自動生成するClaude Codeスキル(google-labs-code/design.md仕様準拠)

claude-skill-design-md とは?

このスキルは、Claude Code上で動作し、アプリケーションのスクリーンショットを解析してDESIGN.mdファイルを自動生成します。google-labs-code/design.md仕様に従い、生成されるドキュメントはUIコンポーネントの説明、レイアウト、配色、フォント、インタラクションなどの設計情報を構造化して記述します。開発者はプロトタイプや既存アプリのデザインを素早く文書化でき、チーム内での設計意図の共有や、AIによるコード生成の前提条件として利用できます。本スキルはClaude Code専用で、スクリーンショット画像を入力とし、指定のMarkdownテンプレートに基づいて出力を行います。

対応✓Claude Code~Codex CLI~Cursor
npx skills add minsu42/claude-skill-design-md

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

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

ドキュメント

claude-skill-design-md は何をしますか?

スクリーンショットからDESIGN.mdを自動生成するClaude Codeスキル(google-labs-code/design.md仕様準拠)

ソース: https://github.com/minsu42/claude-skill-design-md

Awesome Skillsの日次スキルハンターによって発見されました。

関連スキル