# Frontend Design > Create distinctive, production-grade frontend interfaces in your product's brand voice. Use this skill when building web components, pages, prototypes, dashboards, HTML/CSS layouts, or any web UI. Generates polished, intentional code that feels genuinely yours, not generic AI-generated output. Always reads your design system tokens before producing any output. Triggers on: "build a page", "create a component", "make a dashboard", "prototype this", "HTML for", "design a screen", "landing page", or any request to style or beautify a web interface. - Skill: `talgacapri/frontend-design` (Agent Skill) - Install (CLI): `npx skillmds@latest add talgacapri/frontend-design` - Raw SKILL.md: https://api.skillmd.com/api/skills/talgacapri/frontend-design/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Design & Media - Author: talgacapri (https://skillmd.com/u/talgacapri) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/talgacapri/frontend-design --- # Frontend Design Skill This skill guides the creation of distinctive, production-grade frontend interfaces in your product's brand language. Every output is intentional. Not boilerplate, not generic, not "AI slop." It reflects a real product team's quality bar. ## Step 1: Read your design system Before generating any output, read your design system tokens. Most teams keep these in one of: - `context-library/design-system/` (recommended location for PM-OS workspaces) - A separate skill folder (e.g., `[product]-design-system/`) for products with multiple brand voices (e.g., one for product UI, one for documents) - A `tokens.json` or `tokens.css` file in your repo You need at minimum: | Token category | Why it matters | |---|---| | Color palette | Brand identity, semantic states (success/warning/error), surface and text | | Typography | One font for product UI, one for documents (different brand voices) | | Spacing scale | 8pt grid is standard. Don't invent values. | | Corner radius scale | Pick a scale and stick to it | | Shadows | 3 levels (sm/md/lg) is usually enough | | Logo assets | Don't render the logo as text. Use the actual asset. | If no design system exists, build one before continuing. Generating UI without tokens produces inconsistent output. ## Step 2: Choose a clear aesthetic direction Your brand language is the floor, not the ceiling. Within your tokens there is creative range. Pick one direction and commit. | Direction | What it looks like | |---|---| | **Refined minimalism** | Generous whitespace, surgical typography scale, single gradient moment, everything else pulled back | | **Data-forward** | Dense but organized, clear hierarchy, number-first layout, subtle color for signal not decoration | | **Celebratory / milestone** | Gradient hero, larger type scale, motion on load, emotion-forward copy | | **Editorial / report** | Column layouts, strong section headings, table-driven, heavy weight at scale | | **Playful / consumer** | Generous radius, soft shadows, friendly micro-copy, color used liberally for delight | Mixed directions produce generic output. Pick one. Execute precisely. ## Step 3: Apply implementation rules ### Spacing Always use an 8pt grid: ``` 2px / 4px / 8px / 12px / 16px / 24px / 32px / 40px / 48px / 64px ``` No arbitrary values like `11px`, `22px`, `37px`. ### Corner radius (example scale, override with yours) | Element | Radius | |---|---| | Buttons, pills, chips | `9999px` (fully round) or `12px` (squared) — pick one per brand | | Inputs | `16px` | | Small cards | `16px` | | Medium cards | `20px` | | Large cards, modals, sheets | `24px` | | Small inner elements | `8px` | ### Shadows ```css --shadow-sm: 0 1px 2px rgba(0,0,0,0.05); --shadow-md: 0 4px 6px rgba(0,0,0,0.07); /* cards */ --shadow-lg: 0 10px 15px rgba(0,0,0,0.10); /* modals */ ``` ### Motion Use animation purposefully. One well-orchestrated entrance is better than scattered micro-interactions. ```css .card { animation: slideUp 0.4s ease both; } .card:nth-child(2) { animation-delay: 0.08s; } .card:nth-child(3) { animation-delay: 0.16s; } @keyframes slideUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } ``` Always include `prefers-reduced-motion`: ```css @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } ``` ### Touch targets (mobile) Minimum 44px height on all interactive elements. Minimum 8px gap between targets. ### Accessibility WCAG 2.1 AA required. 4.5:1 contrast for body text. Never rely on color alone for status. Always pair with text or icon. ## Step 4: Avoid the AI-slop traps These are banned in any production-quality output: - **Colors outside your brand palette.** If it's not in the token list, it doesn't exist. - **Arbitrary or decorative fonts.** Pick your product font + document font and stick to them. - **Generic AI aesthetics:** cookie-cutter card stacks, centered hero + three columns, purple-on-white that screams "generated by ChatGPT." - **Emojis in formal documents.** Product UI prototypes can use them contextually. PDFs, PPTs, and Word docs cannot. - **Borders with non-brand colors.** Use your neutral border tokens (e.g., `#E5E5E5` light, `#262626` dark). - **Custom radius values.** Use the scale above. - **All-caps body text.** Sentence case or title case for headings. All-caps is only for chip/badge labels at 11px. - **Em dashes.** Use commas, hyphens, or parentheses. ## Component patterns (reference, swap in your tokens) ### Button ```html ``` ### Card ```html
...
``` ### Hero gradient card ```html
...
``` ### Status chip ```html Active Pending Overdue ``` ### Input ```html ``` ## Step 5: Pass the quality bar Every frontend output should feel like it shipped from a real product team. Ask before delivering: 1. Does every spacing value live on the 8pt grid? 2. Are all corner radii from the defined scale? 3. Are all colors from the brand token list? 4. Does the brand gradient appear in at most one or two hero moments? 5. Is the font the right one from your token system, imported from Google Fonts? 6. Are all interactive elements at least 44px tall? 7. Is there one clear aesthetic direction, not a mix of styles? 8. Does the output look like it belongs in your product, not a generic template? If the answer to any of these is no, fix it before outputting. ## Related skills - Your design system file or skill (read first, every time) - `/sketchnote` — visual feature overview from PRD - `/napkin-sketch` — ASCII wireframes for early ideation - `/prototype` — full prototype generation across Lovable, v0, Bolt, Figma Make - `/roadmap-view` — visual roadmap (uses these design patterns)