design-taste-frontend
Designs custom landing pages and portfolios. Use this to avoid generic UI and ensure a specific, refined aesthetic.
Install
mkdir -p .claude/skills/design-taste-frontend-khairbeos && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/18825" && unzip -o skill.zip -d .claude/skills/design-taste-frontend-khairbeos && rm skill.zipInstalls to .claude/skills/design-taste-frontend-khairbeos
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
Anti-slop frontend skill for landing pages, portfolios, and redesigns. The agent reads the brief, infers the right design direction, and ships interfaces that do not look templated. Real design systems when applicable, audit-first on redesigns, strict pre-flight check.Key capabilities
- →Infer user's design intent from brief signals
- →Output a one-line 'Design Read' before generating code
- →Set core configuration dials for design variance, motion intensity, and visual density
- →Map brief signals to dial values
- →Select appropriate design systems based on brief
- →Implement web glassmorphism approximations
How it works
The skill infers the user's design intent from the brief, sets core design configuration dials, and selects suitable design systems. It then generates frontend UI code adhering to these parameters.
Inputs & outputs
When to use design-taste-frontend
- →Style a new landing page
- →Build a developer portfolio
- →Improve design consistency for marketing sites
- →Audit current frontend design
About design-taste-frontend
Analyzes the design brief to infer aesthetic direction and builds interfaces that avoid template-like outputs. It prioritizes design systems and contextual visual polish for specific project types.
Anti-slop frontend skill for landing pages, portfolios, and redesigns. The agent reads the brief, infers the right design direction, and ships interfaces that do not look templated. Real design systems when applicable, audit-first on redesigns, strict pre-flight check.
When not to use it
- →For dashboards, data tables, or multi-step product UI
- →When the user wants to default to common LLM design aesthetics
Limitations
- →Not for dashboards, data tables, or multi-step product UI
- →Requires explicit inference of user intent
- →Web glassmorphism is an approximation, not official Apple Liquid Glass
How it compares
This skill prioritizes contextual design inference and avoids default aesthetics by explicitly setting design parameters and selecting appropriate design systems, unlike generic design tools that might produce templated outputs.
Compared to similar skills
design-taste-frontend side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| design-taste-frontend (this skill) | 0 | 1mo | Review | Advanced |
| scroll-experience | 101 | 7mo | No flags | Intermediate |
| anthropic-frontend-design | 12 | 7mo | No flags | Intermediate |
| infographic-structure-creator | 1 | 6mo | No flags | Intermediate |
Try saying
Example prompts that trigger this skill in your AI assistant.
More by KhairBeos
View all by KhairBeos →You might also like
scroll-experience
davila7
Expert in building immersive scroll-driven experiences - parallax storytelling, scroll animations, interactive narratives, and cinematic web experiences. Like NY Times interactives, Apple product pages, and award-winning web experiences. Makes websites feel like experiences, not just pages. Use when: scroll animation, parallax, scroll storytelling, interactive story, cinematic website.
anthropic-frontend-design
chaibuilder
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.
infographic-structure-creator
antvis
Generate or update infographic Structure components for this repo (TypeScript/TSX in src/designs/structures). Use when asked to design, implement, or modify structure layouts (list/compare/sequence/hierarchy/relation/geo/chart), including layout logic, component composition, and registration.
logo-with-variants
crafter-station
Create logo components with multiple variants (icon, wordmark, logo) and light/dark modes. Use when the user provides logo SVG files and wants to create a variant-based logo component following the Clerk pattern in the Elements project.
design-context
WellApp-ai
Refresh UI/UX context from design system, Storybook, and codebase
add-template
TonnyWong1052
Add new UI style template to the ui-style-react project. This skill should be used when users want to add a new style template with HTML/CSS code, create a new preview page, or register a template in the system. Triggers include "add template", "create new style", "add new template", or when users provide HTML code for a new UI style.