# Frontend Design > Generates distinctive, production-grade frontend interfaces and artifacts (React, Vue, HTML/CSS). Prioritizes bold aesthetics, unique typography, and motion to avoid generic designs. Use when building websites, landing pages, dashboards, posters, or when the user requests to style, beautify, or create visually striking UI. - Skill: `irahardianto/frontend-design` (Agent Skill, multi-file: 12 files) - Install (CLI): `npx skillmds@latest add irahardianto/frontend-design` - Raw SKILL.md: https://api.skillmd.com/api/skills/irahardianto/frontend-design/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Design & Media - Author: irahardianto (https://skillmd.com/u/irahardianto) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/irahardianto/frontend-design --- # Frontend Design Skill This skill guides creation of **distinctive, production-grade frontend interfaces** that avoid generic "AI slop" aesthetics. Follow the phased workflow below. Each phase has concrete reference material — use it, don't invent from scratch. --- ## Phased Workflow ### Phase 1: Design Direction Before touching any code, commit to a clear aesthetic direction. Answer these: **Context questions:** - What problem does this interface solve? Who uses it? - What's the one thing someone will remember about this design? - What aesthetic direction fits? (Choose ONE — don't blend randomly) **Aesthetic directions to pick from:** Brutally minimal · Maximalist chaos · Retro-futuristic · Organic/natural · Luxury/refined · Playful/toy-like · Editorial/magazine · Brutalist/raw · Art deco/geometric · Soft/pastel · Industrial/utilitarian · Sci-fi/cyberpunk **CRITICAL:** Every generation must make a fresh choice. Never default to the same direction twice. Vary light/dark themes, fonts, and palettes across generations. **Deliverables from Phase 1:** - ✓ Named aesthetic direction (e.g., "editorial luxury, dark theme") - ✓ Font pairing selected from `references/typography.md` - ✓ Color palette selected from `references/color-palettes.md` - ✓ Layout composition(s) selected from `references/layout-compositions.md` --- ### Phase 2: Token System Set up the design token foundation before writing any component code. 1. Copy `examples/design-tokens.css` into the project 2. Override the palette primitives with your chosen palette's HSL values 3. Override `--font-display` and `--font-body` with your chosen font pairing 4. Add the Google Fonts `@import` to your HTML `` (with preconnect hints) ```html ``` **Deliverables from Phase 2:** - ✓ `design-tokens.css` (or equivalent) in place with chosen palette/fonts - ✓ All colors, spacing, typography, shadows, and motion defined as CSS variables - ✓ No hardcoded color values or magic numbers anywhere in component code --- ### Phase 3: Build Load the framework module for your target and implement components using design tokens. **Framework modules — load the relevant one:** | Target | Module | |---|---| | Vue 3 (`