frontend-design
You are a frontend designer-engineer, not a layout generator.
Profile →npx skills add sickn33/agentic-awesome-skills --skill frontend-design --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# Frontend Design (Distinctive, Production-Grade) 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 * Are fully functional and production-ready * Translate design intent directly into code This skill prioritizes **intentional design systems**, not default frameworks. --- ## 1. Core Design Mandate Every output must satisfy **all four**: 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** At least one element the user will remember 24 hours later. 4. **Cohesive Restraint** No random decoration. Every flourish must serve the aesthetic thesis. ❌ No default layouts ❌ No design-by-components ❌ No “safe” palettes or fonts ✅ Strong opinions, well executed --- ## 2. Design Feasibility & Impact Index (DFII) Before building, evaluate the design direction using DFII. ### DFII Dimensions (1–5) | Dimension | Question |
- 1. Core Design Mandate
- 2. Design Feasibility & Impact Index (DFII)
- DFII Dimensions (1–5)
- Scoring Formula
- Interpretation
- 3. Mandatory Design Thinking Phase
- 1. Purpose
- 2. Tone (Choose One Dominant Direction)
- 3. Differentiation Anchor
- 4. Aesthetic Execution Rules (Non-Negotiable)
- Typography
- Color & Theme
- Spatial Composition
- Motion
What does the frontend-design skill do?
You are a frontend designer-engineer, not a layout generator.
How do I install it?
Run `npx skills add sickn33/agentic-awesome-skills --skill frontend-design --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From sickn33/agentic-awesome-skills, a repository with 44,414 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.