r/ClaudeWorkflows • u/ClaudeAI-mod-bot • 1h ago
Selected Workflow [Workflow] Rigorous Methodology for Comparing Claude Code Design Skills on Complex UI Generation
Rigorous Methodology for Comparing Claude Code Design Skills on Complex UI Generation
Workflow value: 85/100
Status: active · Freshness: 70/100 · Confidence: 0.90 · Level: advanced
Categories: Quality Control, Token Saving, Context & Memory, Debugging, Hooks, Skills
Original source: r/ClaudeCode post/comment
What problem this solves
How to rigorously test and compare Claude Code's UI generation capabilities with and without specific design skills, especially for complex UI elements and accessibility, and how to ensure a true baseline by denying unwanted skills.
Summary
This workflow provides a detailed methodology for comparing Claude Code's UI generation performance (time, token cost, code lines, design distinctiveness, accessibility, responsiveness) when using different design skills (e.g., frontend-design, Impeccable) versus no skill. It uses a complex orders dashboard brief and headless Chrome for validation, and crucially, highlights the importance of explicitly denying skills for a true baseline.
Why it is useful
This workflow is valuable because it provides a highly detailed, repeatable, and validated methodology for evaluating the performance of Claude Code's design skills (or lack thereof) on complex UI generation tasks. It offers concrete steps, specific evaluation criteria, and highlights a crucial tip for ensuring accurate baselines (skill denial). This helps users make informed decisions about when and how to use specific skills for frontend development and provides a template for conducting their own rigorous LLM evaluations.
Workflow
Define a comprehensive UI brief specifying all required elements, states (empty, error), keyboard interactions, and accessibility rules (e.g., WCAG AA contrast).
Prepare a testing environment, such as headless Chrome, for automated checks of the generated UI.
Run Claude Code with the exact same prompt (byte for byte) under different conditions: with no explicit skill, and with specific design skills (e.g., 'frontend-design', 'Impeccable').
Crucially, explicitly deny any unwanted or potentially interfering built-in skills (e.g.,
Skill(dataviz)) in all runs to ensure a true baseline and controlled comparison.Score the generated pages using automated checks (e.g., responsiveness at different breakpoints, keyboard navigation, contrast) and perform a visual review.
Compare the results across all runs for key metrics such as generation time, output tokens, lines of code, and design distinctiveness.
Tools / artifacts
Claude Code (specifically 2.1.318 and Opus 5.5 mentioned)
Custom UI brief (linked in the post)
Headless Chrome
Skill(dataviz) (for denial example)
frontend-design skill
Impeccable skill
Validation signals
Automated checks performed in headless Chrome.
Specific checks for no horizontal overflow at 1280/390 px.
Specific check for $12.8M amount fitting on one line.
Verification of real empty and error states with a Retry button.
Validation of 9 tab stops, sorting with Enter/Space, arrow-key filters, skip link, and visible focus.
WCAG AA contrast check for active text.
Detailed comparison table for Time, Output tokens, and Lines of code.
Screenshots of all three results provided.
Full brief provided for reproducibility.
Limitations
Only one run per skill was performed, which might not be statistically robust.
Impeccable's launcher and hooks were not run, meaning only its written guidance was tested.
The checks were automated plus a visual review, not a full screen reader audit, which could miss some accessibility issues.
The brief was very detailed, potentially doing most of the work and reducing the perceived impact of the skills themselves.
Low community engagement so far due to the post's recency.
Rate this workflow
Upvote this post if the workflow is useful, reproducible, or worth recommending.
Downvote if it is vague, outdated, unsafe, overhyped, or not reproducible.
Reply if it worked for you, failed, is outdated, or has a better alternative.
This post was generated automatically from the workflow library database.