Design Visual Frontend
Forces browser-verified UI work: real archetype, no fake metrics, no motif pile
Test report
- Verdict
- Tested · Works
- Score
- Tested
- Aug 10, 2026
- Environment
- Claude Code 2.x (agent harness)
Built the same trucking-dispatch login page twice and measured both in a real browser. The no-skill page shipped three invented metrics, five stacked generic motifs, 41px touch targets, a stat clipped off the mobile hero, no error, loading or disabled state, and at 2560x1080 a 380px card marooned in an empty half — 15 percent of the viewport, which is the exact failure the skill's Gate C names as an example. The skill-guided page came back with zero invented facts, zero motifs, 44px targets, no clipping, a role=alert error that moves focus, a real loading state, and 37 meaningful nodes across the wide viewport against the baseline's 17. Worth knowing that its own gates are not a rubber stamp: they still flagged empty gutters at 2560 and a truncated terminal selector at 390 on the skill-built page, both only visible in the screenshot and not in the markup.
Scored on four weighted criteria — install, triggering, output vs. baseline, docs. How scoring works
- Installs cleanly 5/5
- Triggers reliably 5/5
- Output vs. baseline 8/10
- Docs & honesty 5/5
What Design Visual Frontend does
A frontend design discipline for coding agents: classify the surface archetype, write a compact decision sheet before any UI code, then verify the rendered page against eight non-compensating review gates at a fixed viewport matrix from 390x844 to 2560x1080. It caps generic motifs such as background grids, glass panels and gradient glow at one, and bans invented metrics, testimonials and logos used as credibility. Triggers on building, redesigning or reviewing websites, login and form flows, dashboards, admin tools and product pages.
How to install Design Visual Frontend
git clone https://github.com/Xialiang98/design-visual-frontend.git ~/.claude/skills/design-visual-frontend
Skills live in ~/.claude/skills/ (global) or .claude/skills/
(per-project). Restart Claude Code after installing.
Commands — how to trigger Design Visual Frontend
-
/design-visual-frontendForces browser-verified UI work: real archetype, no fake metrics, no motif pile
It also activates on plain-language prompts like these:
-
Build a login page for a trucking dispatch platform, dispatcher use -
Review this UI against responsive breakpoints from mobile to 4K -
Classify this page's archetype and write a UI decision sheet first
Frequently asked questions
- Is the Design Visual Frontend skill free?
- Yes. The skill itself is free from Xialiang98/design-visual-frontend. SkillProof publishes the install command and an independent test verdict at no cost.
- Does Design Visual Frontend work with Claude Code?
- We tested it with Claude Code 2.x (agent harness) on Aug 10, 2026. Verdict: Tested · Works. Built the same trucking-dispatch login page twice and measured both in a real browser. The no-skill page shipped three invented metrics, five stacked generic motifs, 41px touch targets, a stat clipped off the mobile hero, no error, loading or disabled state, and at 2560x1080 a 380px card marooned in an empty half — 15 percent of the viewport, which is the exact failure the skill's Gate C names as an example. The skill-guided page came back with zero invented facts, zero motifs, 44px targets, no clipping, a role=alert error that moves focus, a real loading state, and 37 meaningful nodes across the wide viewport against the baseline's 17. Worth knowing that its own gates are not a rubber stamp: they still flagged empty gutters at 2560 and a truncated terminal selector at 390 on the skill-built page, both only visible in the screenshot and not in the markup.
- What is the Design Visual Frontend SkillProof Score?
- 9.2/10 — installs cleanly 5/5, triggers reliably 5/5, output vs. baseline 8/10, docs & honesty 5/5.
- How do I install Design Visual Frontend?
- Copy the install command from this page, run it in your terminal, and restart Claude Code. Skills live in ~/.claude/skills/ (global) or .claude/skills/ inside a project.
- Can I use Design Visual Frontend with Cursor, Copilot, Gemini CLI, Codex or other AI tools?
- The SKILL.md format is native to Claude (Claude Code, Desktop, claude.ai). The instructions inside adapt to other assistants: Cursor rules, GitHub Copilot instructions, Windsurf rules, Custom GPTs, AGENTS.md for OpenAI Codex, and GEMINI.md for Google Gemini CLI — our conversion guides cover each, and the free converter on the tools page does the wrapping for you.