Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →asgeirtj/frontend-design
Aesthetic direction for designs outside an existing brand system
Passed 24 of 24 test cases with the skill, and 23 of 24 without it.
1 fixed23 passed either way0 still failing0 broke
Tokens, turns and time describe resource use, not a dollar price.
A test case the skill fixed. Same model, same prompt, with and without the skill.
Please build a responsive pricing table component in pure HTML and CSS for a new SaaS product that has no existing component library or UI framework. I want complete, self-contained markup and styles that make the tier comparison stand out visually.
| Checked | Without skill | With skill |
|---|---|---|
| The CSS uses a display font distinct from standard web fonts like Inter or Arial for headings. | Missed | Passed |
| The background styling incorporates gradients or visual textures rather than a flat solid fill. | Missed | Passed |
| The stylesheet declares two distinct font families for heading and body hierarchy. | Missed | Passed |
The instructions your model reads when the skill loads.
Use this guidance when designing frontend/UI work that is NOT governed by an existing brand or design system. Create distinctive HTML with exceptional attention to aesthetic details and creative choices.
Before coding, understand the context and commit to a BOLD aesthetic direction:
Choose a clear conceptual direction and execute it with precision. Bold maximalism and refined minimalism both work — the key is intentionality, not intensity.
Vary between light and dark themes, different fonts, different aesthetics. NEVER converge on the same choices across generations.
Match implementation complexity to the aesthetic vision. Maximalist designs need elaborate animations and effects. Minimalist designs need restraint, precision, and careful attention to spacing and subtle details.
test cases passed, vs 23 / 24 without
Published skills whose descriptions closely match this one, with their headline benchmark lift.
More skills from the same source and nearby in the registry, with their headline benchmark lift.