比較

frontend-design と canvas-design、仕事に合うのはどちらか

frontend-design は、コードとして出荷される画面のためのもので、判断はコンポーネント、レイアウト、状態に対して働きます。canvas-design は、キャンバス上で構成する視覚表現のためのものです。成果物がリポジトリに入るなら frontend-design です。

frontend-design

Anthropic

評価
frontend-design スキルは Claude に明示的なデザイン方針を与え、生成される画面が同じ中央寄せカード、同じグラデーションヘッダー、同じ丸みに収束するのを止めます。変わるのは出発点であって、最終判断ではありません。退屈な第一案を却下する役目は依然として人間側にあります。
向いている場面
見た目が目的の一部であるランディング、ダッシュボード、プロトタイプ、アーティファクト。
見送る場合
既存のデザインシステム内で作業していて、コンポーネントが視覚言語をすでに決めている場合。
どちらを入れるか
納品物が誰かの手で動くページやコンポーネントであり、扱っているリスクが「生成された画面が平凡になること」なら frontend-design です。最終的にコミットされるコードの水準で働きます。
レビュー全文を読む

canvas-design

Anthropic

評価
canvas-design スキルは、ポスター、表紙、図解、グラフィックのように、階層と余白が意味を運ぶビジュアル作品の構図に集中します。成果物が画像ならこちら、ボタンがあるなら frontend-design を使ってください。
向いている場面
ポスター、SNS 画像、表紙、イベント素材、単体で成立する画像。
見送る場合
操作可能なインターフェースが必要な場合。そこでは構図より状態設計が重要です。
どちらを入れるか
納品物が画像そのもの、つまり構成、ポスター、配置自体が製品であるような面なら canvas-design です。製品へ至る途中の一歩ではなく、配置が結論になる仕事です。
レビュー全文を読む

両方を入れる場合

同時に導入しても大きな干渉はありません。片方は画面を組むこと、もう片方は視覚を構成することで起動するからです。注意すべきは、あとから足す三つめのデザイン系スキルが両方を説明してしまう場合です。

比較の一覧