Anti-Slop Frontend Design
Paste the following prompt into your AI chat to install this skill:
Please follow https://skillhub.cn/install/skillhub.md to install @user_3c6cb52e/design-taste-frontend-uke9.
About this skill
Problem
Generated frontends often look correct but tasteless: generic heroes, gradient buttons, card walls, and over-styled AI-ish layouts. Anti-Slop Frontend targets landing pages, portfolios, and redesigns, guiding models toward stronger visual hierarchy, information density, spacing, typography contrast, and restrained component use.
How it works
The skill is not a fixed template system; it is a set of contextual rules. A typical workflow is:
- Read the brief and identify page type, audience, and brand tone
- Select only the rules that fit the task, such as heading scale, paragraph length, button styling, and image treatment
- Avoid applying dashboard, data-table, or multi-step product UI conventions to marketing surfaces
It favors restraint: remove unnecessary components, combine related information, and leave room for content to breathe. It can be used as a design review pass after the first draft.
Boundaries
It is explicitly not aimed at dashboards, data tables, or multi-step product UI. For admin consoles, complex forms, or data dashboards, prefer product UI guidance. It works best when the brief already has copy, imagery, and brand assets, not when building a full product from scratch.
Use Cases
- After drafting SaaS hero copy, turn a generic button-heavy section into a more restrained information hierarchy.
- Redesign a personal portfolio by tightening typography contrast, spacing, and module order to reduce template feel.
- Condense an overfull card wall on a client brand site into a cleaner marketing-page rhythm.
- Review generated landing-page HTML for button style, image treatment, and paragraph length against the brief.
Best For
- Frontend engineers who generate landing-page drafts with LLMs and want less template-looking output
- Designers working on client site redesigns who want to reduce AI-ish component patterns
- Indie developers shipping product sites who need better copy, image, and hero hierarchy
- Web product owners reviewing marketing-page redesigns and constraining density and button usage
Related Skills
A one-shot coding agent built on Claude Code CLI that runs non-interactively, supports a specified workdir, and can be monitored in the foreground or background.
Preview and confirm file sorting by extension, with recursive cleanup, ignore rules, and transactional rollback.
An engineering assistant for static HTML/CSS/JS pages, design-token extraction, IE8-compatible review, and structured delivery.
An engineering workflow for requirement analysis, scenario modeling, risk planning, quality gates, testing, and knowledge capture, with lightweight, standard, and full modes.