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:

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.

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)

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;
" primary color]';this.style.boxShadow='0 0 0 3px [your primary tint]'"
   />

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)