frogg435/frontend-design-styles

Frontend Design Styles

Accurately implement the four mainstream design languages into frontend code. The core goal is not "looks similar" but to achieve faithful restoration at three layers: semantic tokens + component patterns + motion curves, so the result is recognized by platform users as "This is iOS / This is Material / This is Windows."

When to Use / Not Use

Use: Generate or modify interfaces in a specified design style; compare and select among the four styles; produce design tokens and theme files; perform visual reviews against a design language.

Don't Use: The user has no style preference and just wants a "nice-looking page" → First ask if they want a specific style, or follow the recommendation logic in references/style-router.md; pure backend/algorithm tasks are unrelated to this skill.

Quick Reference of the Four Style Fingerprints

These are the most distinguishable features. Before implementing anything, review this table, and check the corresponding reference for details.

| | MIUIX / HyperOS | Apple HIG | Material Design 3 | Fluent 2 | |---|---|---|---| | Primary Color | #3482FF (Light) / #277AF7 (Dark) | #007AFF / #0A84FF | Role-based, baseline #6750A4 | #0F6CBD | | Font | MiSans | SF Pro (<20pt Text, ≥20pt Display) | Roboto / Roboto Flex | Segoe UI Variable | | Body Base Size | 16–17px | 17pt | 16sp (body-large) | 14px (body-1) | | Corner Radius Language | 16dp uniform radius + squircle (same origin as iOS, buttons not pill-shaped) | Continuous curvature (squircle), containers 10–20pt | 12dp cards / 28dp FAB & dialogs / fully round buttons | Small radii: controls 4px, dialogs 8px, nested -2px | | Layering Technique | Color scale layering (#FFFFFF / #F7F7F7 / #E8E8E8), almost no heavy shadows | Material blur (translucency) + grouped lists + content over UI | Tonal overlay prioritized, shadows secondary | Materials (Mica / Acrylic) + subtle multi-layer shadows | | Motion | Light, with spring bounce, 200–300ms | Spring physics, 200–300ms, no linear | Emphasized curve cubic-bezier(0.2,0,0,1), graded by duration tokens | Fast and restrained, 150–250ms, easyEase | | Touch/Click Target | ≥ 48dp | ≥ 44×44pt | ≥ 48dp | Control height 32px (compact/comfortable mode) | | One-sentence Vibe | Rounded, translucent, blue tech feel | Restrained, white space, content-first | Strong color expressiveness, layering via tones | Productivity, clarity, desktop-native |

Workflow

Step 1 · Determine Style. User has specified → use directly. Not specified → read references/style-router.md, and based on product type/platform/density, recommend 1 primary + 1 alternate style, then ask the user to confirm.

Step 2 · Read Tokens. Open the corresponding reference document and read all colors, type scales, spacing, corner radii, shadows, and motion before writing any code. Do not rely on memory:

• MIUIX / HyperOS → references/miuix-hyperos.md
• Apple HIG → references/apple-hig.md
• Material Design 3 → references/material-design-3.md
• Fluent 2 → references/fluent-2.md

Step 3 · Apply Tokens. Copy assets/tokens/<style>.css directly as the semantic token layer (already includes light/dark themes). Do not write hex values into component styles. Dark mode is toggled via [data-theme="dark"] or prefers-color-scheme.

Step 4 · Build Components. Implement components according to the style's specifications in references/components-playbook.md (button variants, inputs, cards, navigation, overlays, switches, list). Every interactive state (hover / focus / pressed / selected / disabled) must be included, not just the default state.

Step 5 · Add Motion + Self-check. Add transitions based on references/motion-and-accessibility.md, then run python3 scripts/lint_tokens.py <output> --style <style>, and go through the self-check checklist (below) item by item.

Hard Rules

1. No mixing styles. If Fluent is selected, do not use iOS #007AFF, Material pill FAB, or HyperOS large-radius cards. Mixing is the most common failure mode.
2. Tokens first. Component CSS should only contain var(--xxx). No literal color, font-size, or corner-radius values are allowed.
3. Light and dark themes together. All four systems have official dark values; look them up directly. Do not use filter: invert or manually darken colors.
4. Platform conventions are non-negotiable. For example, iOS minimum touch area 44pt, Material state layer opacity, Fluent control 1px bottom stroke, HyperOS dark background #242424 (not pure black surface).
5. Accessibility is a hard requirement. Body text contrast ≥ 4.5:1, UI elements ≥ 3:1, focus ring must be visible, respect prefers-reduced-motion.
6. Chinese typography must be handled separately. Roboto / Segoe UI / SF Pro lack complete Chinese glyphs. Chinese interfaces must fall back to Chinese fonts like PingFang / Source Han Sans / MiSans and reduce letter-spacing (Latin tracking does not apply to Chinese).

Delivery Specification

• Default output is a single-file runnable HTML (inline <style> + <script>), with tokens organized as :root CSS variables for easy preview and copy.
• Switch to framework-specific output only when the user specifies it, using mapping rules in references/framework-mappings.md: Tailwind uses assets/mappings/tailwind.css; React/Vue use token objects + CSS variables; Compose prefers official libraries (MIUIX uses MiuixTheme, M3 uses MaterialTheme).
• A component demo page can be based on assets/templates/showcase.html (side-by-side presentation of the same components in all four styles, with theme and dark mode toggles).
• Must run validation after output: python3 scripts/lint_tokens.py <output file> --style <style>. Fix any failures in the three checks (hardcoded colors / contrast / core tokens) before delivery.
• When delivering, explain: which system was used, any deliberate deviations, how dark mode is toggled, and the font fallback stack.

Self-check Checklist

Check each item after completion; fix any failures:

• All colors come from tokens, no hardcoded hex
• Type scale does not exceed 4 levels, base body font size matches the system
• Corner radius system is self-consistent (nested radius = outer radius − inner padding)
• Shadow/material usage matches the system (Material uses tonal overlay, Fluent uses Mica/Acrylic, iOS uses blur materials, HyperOS uses color scale)
• All interactive states present: hover / focus-visible / active / disabled / selected
• Both light and dark themes verified
• Touch target sizes meet requirements
• Contrast ratios met, focus ring visible
• prefers-reduced-motion degrades animations
• Chinese font fallback correct, letter-spacing adjusted
• No cross-system contamination

Reference Files

File	Content
references/style-router.md	Four-style selection decision tree, comparison matrix, mixing forbidden zones
references/miuix-hyperos.md	MIUIX full token table + HyperOS visual characteristics + component specifications
references/apple-hig.md	System colors full table + Dynamic Type 12 levels + materials + component specs
references/material-design-3.md	29 color roles full light/dark table + 15-level type scale + shapes/elevation/state layers
references/fluent-2.md	Neutral/brand color ramps + Type Ramp + control dimensions + Mica/Acrylic + shadow tokens
references/components-playbook.md	Per-style component implementation specs for buttons/inputs/cards/navigation/overlays/switches/lists
references/motion-and-accessibility.md	Four-system motion curves and durations, mandatory accessibility requirements, review checklist
references/framework-mappings.md	Token mapping rules for Tailwind / React / Vue / Compose / SwiftUI
scripts/lint_tokens.py	Executable validation: hardcoded colors, contrast, core token completeness
assets/mappings/tailwind.css	Tailwind v4 @theme token mapping, all four systems can coexist on one page