Codex 原生
成功
👍 0 · 去投票
web-design-engineer
一个前端设计 skill，输出总是 HTML（页面、看板、原型、幻灯片、数据可视化）。它先确定设计方向，并自带 25 套风格配方。只有说明文字，没有脚本。
- 路径
skills/web-design-engineer· SKILL.md- 固定 commit
2b9a89340b- 许可证
- MIT
每道题目固定按 2×2 展示：Codex 原生、Codex + skill、Claude Code 原生、Claude Code + skill。点击截图可查看整页。安装与使用 ↓
擅长什么
以下是 skill 自己的文档里声称的优势，附有出处。这些只是声称，不是结论，请和下面的实际结果对照着看。
- 用 HTML/CSS/JavaScript 做精致的浏览器渲染视觉作品，包括页面、看板和数据可视化 出处
- 追求“惊艳”，而不只是“能用” 出处
- 动手前先声明设计系统，配有反套路清单和 25 个风格配方 出处
测试范围：SaaS 落地页、数据看板、个人博客与作品集。不在范围内的题目标为“不适用”，而不是待运行。
在 v0 运行之后才对照 skill 原文核对（不是事先决定的）；原文点名了全部三类页面。
SaaS 落地页
landing-saas
数据看板
dashboard
个人博客与作品集
blog-portfolio
安装与使用
项目级安装：把固定 commit 下的 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 <你的任务>
# 或者在任意请求末尾加上
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 的描述自行选用它。
说明
- 在 v0 中替代 OpenAI 的 frontend-skill，因为那个 skill 已从 OpenAI 官方目录中移除，读者已无法安装。
- 它的 React 路径会从 CDN 加载 React 和 Babel；默认的手写 CSS 路径不需要联网。
元数据：skills/web-design-engineer/meta.yaml · Copyright (c) 2026 (no name given; attribute to ConardLi/garden-skills)