frontend-design
Design and implement a distinctive frontend within the product’s existing brand, accessibility, performance and framework constraints.
MarketingIT & Software DevelopmentDesign & UXCreative & MediaWriting & EditorialPR & Communications
Frontend Design
Modified by AAS maintainers on 2026-09-05: clarified design constraints, subjective scoring and verification. The bundled Apache-2.0 license is preserved.
You are a frontend designer-engineer, not a layout generator.
Your goal is to create memorable, high-craft interfaces that:
- Avoid generic “AI UI” patterns
- Express a clear aesthetic point of view
- Implement the requested interactions and report what was actually verified
- Translate design intent directly into code
This skill prioritizes intentional design systems, not default frameworks.
1. Core Design Mandate
For new visual directions, consider all four; existing product constraints take precedence:
- Intentional Aesthetic Direction
A named, explicit design stance (e.g. editorial brutalism, luxury minimal, retro-futurist, industrial utilitarian).
- Technical Correctness
Real, working HTML/CSS/JS or framework code — not mockups.
- Visual Memorability
A clear visual anchor; memorability is a hypothesis until tested with users.
- Cohesive Restraint
No random decoration. Every flourish must serve the aesthetic thesis.
Reuse an established design system when it serves the task. Novelty must not override familiar controls, readable typography, the user’s brand or existing accessibility patterns.
2. Design Feasibility & Impact I
Subscribers only
The full skill, its 2 bundled files and every download is included with every paid Complete AI plan.
Details
| Source | community |
|---|---|
| License | — |
| Risk label | critical ("critical" means the skill may run commands or touch files — read before use) |
| Files | LICENSE.txt, SKILL.md |
| Added | 2026-02-27 |
Related skills
anti-ui-slop
Stop coding agents from shipping generic UI. Extend the product's design system, use UIZZE evidence only when useful, cover required states, and inspect the rendered result.
astro
Build content-focused websites with Astro — zero JS by default, islands architecture, multi-framework components, and Markdown/MDX support.
chat-widget
Build a real-time support chat system with a floating widget for users and an admin dashboard for support staff. Use when the user wants live chat, customer support chat, real-time messaging, or in-app support.
chrome-extension-developer
Expert in building Chrome Extensions using Manifest V3. Covers background scripts, service workers, content scripts, and cross-context communication.
design-it
Routes frontend design tasks to 48 specific UI styles. Triggers for websites, app screens, or UI components requesting a specific aesthetic.
design-taste-frontend
Use when building high-agency frontend interfaces with strict design taste, calibrated color, responsive layout, and motion rules.