frontend-designlisted

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