Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →dicklesworthstone/frontend-design
Design and implement distinctive, production-ready frontend interfaces with strong aesthetic direction.
Passed 9 of 25 test cases with the skill, and 8 of 25 without it.
2 fixed7 passed either way15 still failing1 broke
Tokens, turns and time describe resource use, not a dollar price.
One of 2 test cases the skill fixed. Same model, same prompt, with and without the skill.
Design a checkout UI component for a web store. I haven't decided on any brand colors, framework, target audience, or layout strategy yet. Write the code now.
| Checked | Without skill | With skill |
|---|---|---|
| The response preface states explicit design assumptions or asks targeted questions. | Missed | Passed |
| The CSS uses CSS custom properties for visual styling tokens. | Passed | Passed |
The instructions your model reads when the skill loads.
Design and implement memorable frontend interfaces with a clear, intentional aesthetic. The output must be real, working code — not just mood boards. This skill is about design thinking + execution: every visual choice should be rooted in purpose and context.
Use this skill when the user wants to:
Before coding, identify:
If the user did not provide this, ask 2–4 targeted questions, or state reasonable assumptions in a short preface.
Commit to a single, bold aesthetic direction. Name it and execute it consistently. Examples:
Avoid generic AI aesthetics. No “default” fonts, color schemes, or stock layouts.
Before writing code, define the system:
test cases passed, vs 8 / 25 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.