Agent skill · design visual · sickn33

frontend-design

Design and implement a distinctive frontend within the product’s existing brand, accessibility, performance and framework constraints.

Why this skill is useful

Provides a structured approach to intentional design systems that the AI wouldn't reliably generate on its own.

What it needs

About 5k tokens when loaded. Last updated 2026-08-07. 44,571 stars on the source repository.

What this skill does

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: 1. Intentional Aesthetic Direction A named, explicit design stance (e.g. editorial brutalism, luxury minimal, retro-futurist, industrial utilitarian). 2. Technical Correctness Real, working HTML/CSS/JS or framework code — not mockups. 3. Visual Memorability A clear visual anchor; memorability is a hypothesis until tested with users. 4. 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 Index (DFII) DFII is an optional, subjective discussion aid with no validated predictive power. Prefer concrete user tasks and measurable checks over a total score. …

How to use it

Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:

@skills sickn33/frontend-design--bbb331

View the source on GitHub

Browse the @skills marketplace