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

--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.

.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:

@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

<!-- Primary -->
<button style="
  height: 52px; padding: 0 24px;
  background: [your primary color]; color: #fff;
  font-family: [your product font]; font-size: 15px; font-weight: 600;
  border: none; border-radius: 9999px; cursor: pointer;
">Get started</button>

<!-- Secondary -->
<button style="
  height: 52px; padding: 0 24px;
  background: transparent; color: [your primary color];
  font-family: [your product font]; font-size: 15px; font-weight: 600;
  border: 1.5px solid [your primary tint]; border-radius: 9999px; cursor: pointer;
">Learn more</button>

Card

<div style="
  background: #fff; border-radius: 20px;
  border: 1px solid #E5E5E5;
  box-shadow: 0 4px 6px rgba(0,0,0,0.07);
  padding: 16px;
">...</div>

Hero gradient card

<div style="
  background: linear-gradient(135deg, [your gradient start] 0%, [your gradient end] 100%);
  border-radius: 24px; padding: 24px; color: #fff;
">...</div>

Status chip

<!-- Success -->
<span style="
  font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em;
  padding: 3px 10px; border-radius: 9999px;
  background: #DCFCE7; color: #16A34A;
">Active</span>

<!-- Warning -->
<span style="
  font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em;
  padding: 3px 10px; border-radius: 9999px;
  background: #FFEDD5; color: #EA580C;
">Pending</span>

<!-- Error -->
<span style="
  font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em;
  padding: 3px 10px; border-radius: 9999px;
  background: #FEE2E2; color: #DC2626;
">Overdue</span>

Input

<input style="
  height: 52px; width: 100%;
  border: 1px solid #E5E5E5; border-radius: 16px;
  font-family: [your product font]; font-size: 15px;
  padding: 0 16px; outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
" onfocus="this.style.borderColor='[your primary color]';this.style.boxShadow='0 0 0 3px [your primary tint]'"
   onblur="this.style.borderColor='#E5E5E5';this.style.boxShadow='none'" />

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)