web-video-presentation Web 動画 / プレゼンテーション |
web-design-engineer デザイン / フロントエンド |
gpt-image-2 画像生成 / プロンプト |
beautiful-article あらゆる素材 → 美しい記事 |
![]() creative-voltageクリエイティブトーク |
![]() blueprint技術アーキテクチャ |
![]() swiss-ikbデータレポート |
![]() chalk-garden科学解説 |
↑ 23 種類のテーマを一望 — 完全なギャラリーを開くと、ライブ 16:9 プレビュー、デザインシグネチャ、用途タグ付きで閲覧できます。
リンク: [README](./skills/web-video-presentation/README.md) · [SKILL.md](./skills/web-video-presentation/SKILL.md) · [Download v1.2.2 .zip](https://github.com/ConardLi/garden-skills/releases/download/web-video-presentation-v1.2.2/web-video-presentation-1.2.2.zip)
---
### [`web-design-engineer`](./skills/web-design-engineer)

**カテゴリ:** デザイン / フロントエンド
**用途:** Web ページ、ランディングページ、ダッシュボード、インタラクティブプロトタイプ、HTML スライドデッキ、アニメーション、UI モックアップ、データビジュアライゼーション、デザインシステムの探求。
`web-design-engineer` は、AI が生成する Web 成果物を単に機能するだけのものから、洗練され、意図的で、視覚的に印象に残るフロントエンド作品へと変えます。エージェントをデザインエンジニアとして扱い、まず製品コンテキストを理解し、次にデザインシステムを宣言し、初期 v0 を示し、フルエクスペリエンスを構築し、結果を検証します。
主な特徴:
- 5 つのダイヤルによる Design Read で、構図変化、モーション、密度、アセット依存度、ブランド忠実度を brief から導出
- 既存プロダクトを変更する前に Extension / Preserve / Overhaul を分類
- 実行可能なブラウザ受け入れテストは、ユーザーが受け入れ確認、QA、ブラウザテストを明示的に依頼した場合のみ実行
- アンチクリシェのブロックリストとより強いビジュアル判断力で、一般的な AI UI パターンを超える
- **デザインディレクション・アドバイザー(6 学派の差別化された 3 択推薦)と、anchor 付きスタイルレシピ 25 種類**(Linear / Aesop / Pentagram / Bloomberg / Stripe Press / Mid-Century など)を内蔵。各レシピにはコピー可能なパレット、タイポグラフィ、シグネチャムーブ、アンチパターンが揃っており、デザインシステム宣言にそのまま貼り込める
- HTML / CSS / JavaScript / React プロトタイプをカバーし、レスポンシブレイアウト、モーション、インタラクションの仕上げに関するガイダンスを提供
- インライン React + Babel、CSS トークン、`oklch()` カラー処理、コンテナクエリ、reduced-motion 対応の実装ルールを含む
- デバイスフレーム、スライドエンジン、アニメーションタイムライン、ダッシュボード、その他の再利用可能な Web 成果物のための高度なパターンリファレンスを同梱
![]() tufte |
![]() press |
![]() bayer |
![]() bodoni |
![]() vignelli |
![]() sottsass |
![]() freddie |
![]() andy |