skill-gallery
語言: 繁體中文

web-design-engineer

一個輸出一律是 HTML 的前端設計 skill（網頁、儀表板、原型、簡報、資料視覺化）。它先從確定設計方向的步驟開始，並附帶 25 套風格範本。只有指示，沒有腳本。

來源
ConardLi/garden-skills
路徑
skills/web-design-engineer · SKILL.md
固定 commit
2b9a89340b
授權
MIT

每個題目固定以 2×2 顯示：Codex 原生、Codex + skill、Claude Code 原生、Claude Code + skill。點選截圖可查看整頁。安裝與使用 ↓

擅長什麼

以下是 skill 自己的文件中宣稱的優勢，並附上出處。這些只是宣稱，不是結論，請與下方的實際結果對照著看。

測試範圍：SaaS 到達頁面、資料儀表板、個人部落格與作品集。不在範圍內的題目標示為「不適用」，而不是待執行。

在 v0 執行之後才對照 skill 原文核對（並非事先決定）；原文點名了全部三類頁面。

SaaS 到達頁面

landing-saas

Codex 原生

成功
Codex · 原生 — SaaS 到達頁面，桌面版截圖（頁面頂端）Codex · 原生 — SaaS 到達頁面，手機版截圖（頁面頂端）
模型
gpt-6.1-sol · high
時間
7m 51s
Token 數
in 424k · out 24.5k
是否使用 skill
不適用
外部資源
fonts.googleapis.com, fonts.gstatic.com
執行日期
2026-10-25

a11y 較嚴重 1▶ 錄影

👍 0 · 去投票

開啟頁面run.json

Codex + web-design-engineer

成功
Codex + web-design-engineer — SaaS 到達頁面，桌面版截圖（頁面頂端）Codex + web-design-engineer — SaaS 到達頁面，手機版截圖（頁面頂端）
模型
gpt-6.1-sol · high
時間
7m 02s
Token 數
in 330k · out 22.0k
是否使用 skill
是
外部資源
fonts.googleapis.com, fonts.gstatic.com
執行日期
2026-10-25

a11y 較嚴重 1▶ 錄影

👍 0 · 去投票

開啟頁面run.json

Claude Code 原生

成功
Claude Code · 原生 — SaaS 到達頁面，桌面版截圖（頁面頂端）Claude Code · 原生 — SaaS 到達頁面，手機版截圖（頁面頂端）
模型
claude-opus-5-5 · high
時間
7m 11s
Token 數
in 30 · cache 873k · out 37.6k
是否使用 skill
不適用
外部資源
fonts.googleapis.com, fonts.gstatic.com
執行日期
2026-10-26

a11y 較嚴重 1▶ 錄影

👍 0 · 去投票

開啟頁面run.json

Claude Code + web-design-engineer

成功
Claude Code + web-design-engineer — SaaS 到達頁面，桌面版截圖（頁面頂端）Claude Code + web-design-engineer — SaaS 到達頁面，手機版截圖（頁面頂端）
模型
claude-opus-5-5 · high
時間
8m 54s
Token 數
in 32 · cache 1.19M · out 54.4k
是否使用 skill
是
外部資源
fonts.googleapis.com, fonts.gstatic.com
執行日期
2026-10-26

a11y 較嚴重 1▶ 錄影

👍 0 · 去投票

開啟頁面run.json

資料儀表板

dashboard

Codex 原生

成功
Codex · 原生 — 資料儀表板，桌面版截圖（頁面頂端）Codex · 原生 — 資料儀表板，手機版截圖（頁面頂端）
模型
gpt-6.1-sol · high
時間
6m 56s
Token 數
in 326k · out 25.8k
是否使用 skill
不適用
外部資源
fonts.googleapis.com, fonts.gstatic.com
執行日期
2026-10-25

a11y 嚴重 1▶ 錄影

👍 0 · 去投票

開啟頁面run.json

Codex + web-design-engineer

成功
Codex + web-design-engineer — 資料儀表板，桌面版截圖（頁面頂端）Codex + web-design-engineer — 資料儀表板，手機版截圖（頁面頂端）
模型
gpt-6.1-sol · high
時間
6m 47s
Token 數
in 331k · out 30.2k
是否使用 skill
是
外部資源
fonts.googleapis.com, fonts.gstatic.com
執行日期
2026-10-25

a11y 嚴重 1▶ 錄影

👍 0 · 去投票

開啟頁面run.json

Claude Code 原生

成功
Claude Code · 原生 — 資料儀表板，桌面版截圖（頁面頂端）Claude Code · 原生 — 資料儀表板，手機版截圖（頁面頂端）
模型
claude-opus-5-5 · high
時間
8m 03s
Token 數
in 34 · cache 1.08M · out 46.4k
是否使用 skill
不適用
外部資源
無
執行日期
2026-10-26

a11y 較嚴重 1▶ 錄影

👍 0 · 去投票

開啟頁面run.json

Claude Code + web-design-engineer

成功
Claude Code + web-design-engineer — 資料儀表板，桌面版截圖（頁面頂端）Claude Code + web-design-engineer — 資料儀表板，手機版截圖（頁面頂端）
模型
claude-opus-5-5 · high
時間
6m 29s
Token 數
in 22 · cache 704k · out 41.1k
是否使用 skill
是
外部資源
fonts.googleapis.com, fonts.gstatic.com
執行日期
2026-10-26

a11y 較嚴重 2▶ 錄影

👍 0 · 去投票

開啟頁面run.json

個人部落格與作品集

blog-portfolio

Codex 原生

成功
Codex · 原生 — 個人部落格與作品集，桌面版截圖（頁面頂端）Codex · 原生 — 個人部落格與作品集，手機版截圖（頁面頂端）
模型
gpt-6.1-sol · high
時間
4m 59s
Token 數
in 218k · out 19.8k
是否使用 skill
不適用
外部資源
fonts.googleapis.com, fonts.gstatic.com
執行日期
2026-10-25

a11y 較嚴重 1▶ 錄影

👍 0 · 去投票

開啟頁面run.json

Codex + web-design-engineer

成功
Codex + web-design-engineer — 個人部落格與作品集，桌面版截圖（頁面頂端）Codex + web-design-engineer — 個人部落格與作品集，手機版截圖（頁面頂端）
模型
gpt-6.1-sol · high
時間
8m 31s
Token 數
in 324k · out 26.3k
是否使用 skill
是
外部資源
fonts.googleapis.com, fonts.gstatic.com
執行日期
2026-10-25

a11y 較嚴重 1▶ 錄影

👍 0 · 去投票

開啟頁面run.json

Claude Code 原生

成功
Claude Code · 原生 — 個人部落格與作品集，桌面版截圖（頁面頂端）Claude Code · 原生 — 個人部落格與作品集，手機版截圖（頁面頂端）
模型
claude-opus-5-5 · high
時間
10m 28s
Token 數
in 24 · cache 661k · out 41.1k
是否使用 skill
不適用
外部資源
fonts.googleapis.com, fonts.gstatic.com
執行日期
2026-10-26

a11y 較嚴重 1▶ 錄影

👍 0 · 去投票

開啟頁面run.json

Claude Code + web-design-engineer

成功
Claude Code + web-design-engineer — 個人部落格與作品集，桌面版截圖（頁面頂端）Claude Code + web-design-engineer — 個人部落格與作品集，手機版截圖（頁面頂端）
模型
claude-opus-5-5 · high
時間
7m 52s
Token 數
in 24 · cache 867k · out 49.1k
是否使用 skill
是
外部資源
fonts.googleapis.com, fonts.gstatic.com
執行日期
2026-10-26

a11y：未發現問題▶ 錄影

👍 0 · 去投票

開啟頁面run.json

安裝與使用

專案層級安裝：把 skill 資料夾（含有 SKILL.md 的那一個）以固定 commit 的版本複製到你的專案中。畫廊的執行也是用同樣的方式安裝。

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 <你的任務>

# 或在任何請求的結尾加上
Use the web-design-engineer skill.

# 非互動模式，與畫廊的執行方式相同
claude -p '<你的任務> Use the web-design-engineer skill.'

若要讓所有專案都能使用，請改把資料夾放到 ~/.claude/skills/web-design-engineer/。當請求符合 skill 的描述時，Claude Code 也可以自行載入這個 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 的描述自行選用。

備註

中繼資料：skills/web-design-engineer/meta.yaml · Copyright (c) 2026 (no name given; attribute to ConardLi/garden-skills)