emil-design-eng (emilkowalski/skills)

评测

在 Codex CLI（SOTA 档）上跑 3 个任务、对照、一句话提示、装 skill 三组，共 18 次运行，由规则脚本打分（没有 LLM 评委），断网沙箱、每次运行独立临时目录。具体做法见下方英文评测原文。

三组对比

Codex CLI 实测，18 次运行，规则脚本打分，没有 LLM 评委。总分 26.2 / 30，结论 推荐。

下面是评测原文，英文。

Verdict: Recommended (26.2 / 30). Source: emilkowalski/skills, skills/emil-design-eng, pinned at commit a81dbca. Install: npx skills@latest add emilkowalski/skills --skill emil-design-eng. Licence: MIT (repo LICENSE).

What it is

The emil-design-eng skill from emilkowalski/skills: Emil Kowalski's design-engineering rules for UI polish, about 4,000 words in one SKILL.md. It covers when to animate at all, custom ease-out curves instead of the defaults, 150-300 ms durations, animating only transform and opacity, press feedback (scale(0.97) on :active), never animating from scale(0), stagger, gating hover with (hover: hover), reduced motion and invisible details like hit targets. No scripts.

How we tested

Codex CLI 0.166 (gpt-6-astra, low reasoning) on a dedicated Windows test PC, a fresh temporary project and temporary HOME/TMPDIR/caches per run, skill installed (treatment) or absent (control) or absent with the skill's core requirement squeezed into one sentence appended to the prompt (one-liner group), 2 runs per group per task, network off, /tmp writes blocked. The prompts never mention the skill (except the wording noted below).

Same three brief as the frontend-design test (a Tidepool landing page, a water-quality dashboard, a redesign of a climbing-gym homepage), written as single self-contained HTML files. The prompts do not mention animation or the skill; the skill group simply has the skill installed.

1. New landing page from a brief — Create a single-page landing site for Tidepool, a small-batch seaweed snack brand that sells by subscription (three flavours, $14/box, ships monthly). Write one self-contained index.html with inline CSS and minimal JS only if needed. No frameworks, no build st…
2. Data-dense dashboard UI — Build a dashboard page for a municipal water-quality monitoring team: current readings for 6 stations (pH, turbidity, chlorine, temperature), a 7-day trend for each, and an alerts panel. Single self-contained dashboard.html with inline CSS/JS and hard-coded re…
3. Reshape an existing bland page — old.html is the current homepage of Granite Peak Climbing Gym (Boulder, CO). Redesign it into new.html: keep all of its real content (pricing, classes, hours, address) but make the page look like it belongs to this specific gym. Self-contained HTML/CSS, no fra…

Scoring is programmatic (hidden tests / planted-issue recall / constraint checks / render+OCR where relevant), 0–5 per run. No LLM judge decided any score. Because this skill is about motion and interaction details that a screenshot cannot show, the score is a rule-based checklist run over the generated CSS (10 checks: :active press feedback, custom cubic-bezier, no ease-in/linear/default ease, no transition: all, only transform/opacity/colour animated, durations <= 300 ms, reduced motion, stagger, no scale(0), hover gated by (hover: hover)), 0-5 per run. This is closely aligned with the skill's own rules, so it measures 'did it follow the skill', not 'is the page better'.

Results

The one-liner given to the third group: "Polish like a design engineer: custom easing curves (ease-out for entrances, never the default or ease-in), 150-300 ms durations, animate only transform and opacity, press feedback such as scale(0.97) on :active, never animate from scale(0), stagger entrances, honour prefers-reduced-motion, and sweat the invisible details (hover, active and focus states, 44 px hit targets)."

Mean score: 3.33 without vs 4.75 with the skill (delta +1.42). Tokens per run: 133k vs 149k (1.12x); time 178s vs 163s. One-liner group: 4.5 (the skill's gain over the one-liner: +0.25; one-liner's own gain over no skill: +1.17); one-liner tokens 127k per run, so the skill costs 1.17x the one-liner.

What happened

• Plain Codex never writes press feedback or a custom easing curve: 0/6 control pages have an :active scale rule or a cubic-bezier, against 6/6 for the one-sentence group and 6/6 (press) and 5/6 (curve) with the skill. Score 3.33 control, 4.50 one-sentence, 4.75 skill.
• The only rule the one-sentence prompt did not carry, gating hover styles with @media (hover: hover), was followed by 5/6 skill pages and 0/12 of the other pages. That is the skill's whole margin over the sentence (+0.25).
• Already-good habits were common everywhere: no transition: all, only transform/opacity/colour animated, reduced-motion support, no scale(0). Controls got these right 6/6 times, so the skill adds the specific polish rules, not the basics.
• Looking at the pages blind (desktop screenshots, shuffled), all 18 are polished and none is broken; the static design quality of the three groups is indistinguishable. The skill changes behaviour you feel, not what a screenshot shows.
• Cost: 149k tokens per run against 133k (1.12x) and 127k for the one-sentence group, the cheapest skill overhead we have measured among design skills.

Dimension scores

Limits of this test

• The motion rules are checked from CSS text, not by watching the page; a transition can exist and still feel wrong.
• The checklist is derived from the skill's own rules, and the one-sentence prompt states most of them, so the one-sentence arm is an upper bound for a short prompt.
• Only three static page briefs; interactive components (dropdowns, toasts, drawers), which the skill spends most words on, were not requested.
• n = 2 per group per task: differences under about 1 point are noise.
• Rule-based scoring measures what the checks can see; it cannot judge taste or whether a result is the best possible.

Security

See security.md. Scan: 0 CRITICAL / 0 HIGH / 0 MEDIUM. Verdict: safe to run (no-network sandbox). A clean scan does not prove a skill safe.

Bottom line

If you want pages that have press feedback, ease-out curves and hover gating without asking for them, the skill delivers it at almost no token cost. A sentence that lists the same rules gets 94% of the way there, so the skill's value is that you do not have to know the rules.