気に入ったデザインシステムを「Remix」して自分のDESIGN.mdにする(DesignMD)/サイトを読み取ってDESIGN.mdを書き出す(AssetSnip)
ゼロから DESIGN.md を書かず、既存のデザインを土台に色・書体・角丸・余白・影だけ変えて、プレビューを見ながら自分用に仕上げる。
どんな問題を解決するか / いつ使うか
エージェントに「このサイトっぽく」と頼むと、近い青・違うフォント・ずれた余白で推測されてしまうとき。また、DESIGN.md を書きたいが何から決めるか迷うとき。
やり方
DesignMD の Remix(designmd.me/remix)
- 好きなデザインシステムを選ぶ(Discover に並ぶサイト、自分のファイル、他人の Remix のどれでも)。
- 色・フォント・角丸・余白・影を変える。サンプルページがライト/ダーク両方でその場で描き直される。
- 保存すると自分の DESIGN.md になり、Claude Code・Cursor・Figma で使える(保存は無料と告知)。
AssetSnip(参考サイトから実際の値を抜く)
- ページを読み取り、実際の色・フォント・グラデーションを DESIGN.md として書き出す。
- 投稿者のまとめ:「スキルはエージェントの働き方を教え、DESIGN.md はブランドが実際にどう見えるかを教える」。両方を渡す。
注意点
- 他社サイトの見た目をそのまま使うのは避け、Remix で自分のブランドの値に置き換える。
- 書き出された値は、使う前に人が見直して「なぜこの値か」を書き足すと、AIが守りやすい(DESIGN.mdは「雰囲気の言葉」より「値」を書き、値には「なぜ」を添えて、使いながら育てる)。
- どちらもツール側の告知ベースで、未検証。