Codex ネイティブ
成功
👍 0 · 投票する
web-design-engineer
出力が常に HTML（ページ、ダッシュボード、プロトタイプ、スライド、データ可視化）になるフロントエンドデザイン skill です。最初にデザインの方向性を決めるステップがあり、25 種類のスタイルレシピを同梱しています。指示のみで、スクリプトは含みません。
- パス
skills/web-design-engineer· SKILL.md- 固定したコミット
2b9a89340b- ライセンス
- MIT
各プロンプトを、Codex ネイティブ、Codex + skill、Claude Code ネイティブ、Claude Code + skill の固定 2×2 で表示します。スクリーンショットをクリックするとページ全体を表示できます。インストールと使い方 ↓
得意なこと
skill 自身のドキュメントが主張している強みを、出典とともに挙げています。これは主張であって結果ではありません。下の実際のページと見比べてください。
- HTML/CSS/JavaScript による、洗練されたブラウザー描画のビジュアル成果物（ページ、ダッシュボード、データ可視化を含む） 出典
- 「機能する」だけでなく「見とれる」ものを目指す 出典
- 作り始める前にデザインシステムを宣言し、ありがちな表現の回避リストと 25 のスタイルレシピを使う 出典
テスト範囲：SaaS のランディングページ、データダッシュボード、個人ブログとポートフォリオ。範囲外のプロンプトは「未実行」ではなく「対象外」と表示します。
v0 の実行後に skill の原文と照合したものです（事前に決めたものではありません）。原文は 3 種類のページすべてを挙げています。
SaaS のランディングページ
landing-saas
データダッシュボード
dashboard
個人ブログとポートフォリオ
blog-portfolio
インストールと使い方
プロジェクト単位のインストール：固定したコミットの skill フォルダ（SKILL.md を含むフォルダ）をプロジェクトにコピーします。ギャラリーの実行でも同じ方法でインストールしました。
Claude Code
インストール
フォルダを <project>/.claude/skills/web-design-engineer/ にコピーします。
git clone https://github.com/ConardLi/garden-skills.git /tmp/web-design-engineer-src
git -C /tmp/web-design-engineer-src checkout 2b9a89340b70f632d31c0f1c69fce94a7912423e
mkdir -p .claude/skills
cp -R /tmp/web-design-engineer-src/skills/web-design-engineer .claude/skills/web-design-engineer使い方
# 対話モード
/web-design-engineer <タスク>
# または、任意のリクエストの末尾に次の 1 文を付ける
Use the web-design-engineer skill.
# ヘッドレス（ギャラリーの実行と同じ）
claude -p '<タスク> Use the web-design-engineer skill.'すべてのプロジェクトで使えるようにするには、代わりにフォルダを ~/.claude/skills/web-design-engineer/ に置いてください。Claude Code は、リクエストが skill の説明に一致すると、skill を自動的に読み込むこともあります。
Codex
インストール
フォルダを <project>/.agents/skills/web-design-engineer/ にコピーします。
git clone https://github.com/ConardLi/garden-skills.git /tmp/web-design-engineer-src
git -C /tmp/web-design-engineer-src checkout 2b9a89340b70f632d31c0f1c69fce94a7912423e
mkdir -p .agents/skills
cp -R /tmp/web-design-engineer-src/skills/web-design-engineer .agents/skills/web-design-engineer使い方
# 対話モード：メンションするか、/skills から選ぶ
$web-design-engineer <タスク>
# ヘッドレス（ギャラリーの実行と同じ）
codex exec -s workspace-write '<タスク> Use the $web-design-engineer skill.'すべてのプロジェクトで使えるようにするには、代わりにフォルダを ~/.agents/skills/web-design-engineer/ に置いてください。Codex も、skill の説明に基づいて skill を自動的に選ぶことがあります。
補足
- v0 では OpenAI の frontend-skill の代わりに採用しました。frontend-skill は OpenAI の公式カタログから削除され、読者がインストールできなくなったためです。
- React を使う場合は CDN から React と Babel を読み込みます。デフォルトの手書き CSS の場合はネットワークを必要としません。
メタデータ：skills/web-design-engineer/meta.yaml · Copyright (c) 2026 (no name given; attribute to ConardLi/garden-skills)