Website Design System
Overview
This skill provides frontend developers and designers with carefully crafted design system templates. Each template includes complete design philosophy, design tokens, component styles, and responsive strategies. These are not ordinary UI templates, but unique style guides that can make your website stand out and avoid the "AI-generated look".
Use Cases
- 🎨 Need to choose a design style for a new project
- 🔧 Integrate design system into existing codebase
- 📐 Need complete design specifications (colors, typography, spacing, animations)
- 🚀 Want to quickly build high-quality, non-generic UI
Available Styles
| Style |
Description |
Suitable For |
| Monochrome |
Minimalist black & white style, pure black and white, large typography, line dividers |
High-end brands, fashion magazines, art galleries, luxury websites |
| Bauhaus |
Bauhaus geometric style, primary colors (red, blue, yellow), hard shadows, geometric shapes |
Creative agencies, design studios, art exhibitions, architecture websites |
| Corporate Trust |
Modern enterprise SaaS aesthetic, indigo-violet gradients, dimensional depth, isometric elements |
SaaS products, enterprise platforms, tech startups, B2B websites |
Usage
Review Design Specifications
Each design system includes complete implementation guides. Read the corresponding documentation as needed:
# Monochrome minimalist black & white style
skills_read(path="skills/website_design/docs/monochrome.md")
# Bauhaus geometric style
skills_read(path="skills/website_design/docs/bauhaus.md")
# Corporate Trust modern SaaS style
skills_read(path="skills/website_design/docs/modern_dark.md")
Document Structure
Each design document contains the following:
- Design Philosophy - Core concepts and visual keywords of the style
- Design Token System - Colors, typography, spacing, border radius, shadows and other design variables
- Component Styles - Specific styles for buttons, cards, inputs and other common components
- Layout Strategy - Container widths, grid system, responsive breakpoints
- Animation & Interaction - Transitions, hover states, focus styles
- Accessibility Design - Contrast, focus states, touch targets, etc.
- Anti-Generic Points - Key design decisions to avoid "template look"
Style Overview
Monochrome Minimalist Black & White
Colors: Pure black #000000 + Pure white #FFFFFF (no gray as primary)
Typography: Playfair Display (serif) + Source Serif 4
Border Radius: 0px (all sharp corners)
Shadows: None
Features: Large headlines, line dividers, color inversion for emphasis, editorial layout
Bauhaus
Colors: Red #D02020 + Blue #1040C0 + Yellow #F0C020 + Black #121212
Typography: Outfit (geometric sans-serif)
Border Radius: 0px or 100% (binary extremes)
Shadows: Hard shadows with 4px/8px offset
Features: Geometric shape decorations, color block backgrounds, 45° rotated elements, constructivism
Corporate Trust
Colors: Indigo #4F46E5 + Violet #7C3AED + Slate backgrounds
Typography: Plus Jakarta Sans (geometric sans-serif)
Border Radius: rounded-xl (12px) for cards, rounded-full for buttons
Shadows: Colored shadows with blue/purple tints
Features: Isometric 3D transforms, gradient text, blur orbs, elevated cards on hover
Tech Stack Compatibility
These design systems are compatible with various frontend tech stacks:
- React / Next.js
- Vue / Nuxt
- Tailwind CSS
- shadcn/ui
- Native CSS
Notes
- Read Complete Documentation: Each design document contains important "anti-generic points". Skipping may cause the design to lose its uniqueness
- Maintain Consistency: Once a style is chosen, maintain consistency throughout the project
- Understand User Goals: Before implementation, confirm with users whether they want to redesign components, refactor existing styles, or build from scratch
- Responsive First: All design specifications consider mobile adaptation
File Structure
website_design/
├── SKILL.md # This file - Skill entry guide
└── docs/
├── monochrome.md # Monochrome minimalist black & white style complete specification
├── bauhaus.md # Bauhaus style complete specification
└── modern_dark.md # Corporate Trust modern SaaS style complete specification
1---2name: website-design3description: Provides beautiful design system templates for web design, including complete design specifications, component styles, and implementation guides4---56# Website Design System78## Overview910This skill provides frontend developers and designers with **carefully crafted design system templates**. Each template includes complete design philosophy, design tokens, component styles, and responsive strategies. These are not ordinary UI templates, but unique style guides that can make your website stand out and avoid the "AI-generated look".1112## Use Cases1314- 🎨 Need to choose a design style for a new project15- 🔧 Integrate design system into existing codebase16- 📐 Need complete design specifications (colors, typography, spacing, animations)17- 🚀 Want to quickly build high-quality, non-generic UI1819## Available Styles2021| Style | Description | Suitable For |22|-------|-------------|--------------|23| **Monochrome** | Minimalist black & white style, pure black and white, large typography, line dividers | High-end brands, fashion magazines, art galleries, luxury websites |24| **Bauhaus** | Bauhaus geometric style, primary colors (red, blue, yellow), hard shadows, geometric shapes | Creative agencies, design studios, art exhibitions, architecture websites |25| **Corporate Trust** | Modern enterprise SaaS aesthetic, indigo-violet gradients, dimensional depth, isometric elements | SaaS products, enterprise platforms, tech startups, B2B websites |2627## Usage2829### Review Design Specifications3031Each design system includes complete implementation guides. Read the corresponding documentation as needed:3233```python34# Monochrome minimalist black & white style35skills_read(path="skills/website_design/docs/monochrome.md")3637# Bauhaus geometric style38skills_read(path="skills/website_design/docs/bauhaus.md")3940# Corporate Trust modern SaaS style41skills_read(path="skills/website_design/docs/modern_dark.md")42```4344### Document Structure4546Each design document contains the following:47481. **Design Philosophy** - Core concepts and visual keywords of the style492. **Design Token System** - Colors, typography, spacing, border radius, shadows and other design variables503. **Component Styles** - Specific styles for buttons, cards, inputs and other common components514. **Layout Strategy** - Container widths, grid system, responsive breakpoints525. **Animation & Interaction** - Transitions, hover states, focus styles536. **Accessibility Design** - Contrast, focus states, touch targets, etc.547. **Anti-Generic Points** - Key design decisions to avoid "template look"5556## Style Overview5758### Monochrome Minimalist Black & White5960```61Colors: Pure black #000000 + Pure white #FFFFFF (no gray as primary)62Typography: Playfair Display (serif) + Source Serif 463Border Radius: 0px (all sharp corners)64Shadows: None65Features: Large headlines, line dividers, color inversion for emphasis, editorial layout66```6768### Bauhaus6970```71Colors: Red #D02020 + Blue #1040C0 + Yellow #F0C020 + Black #12121272Typography: Outfit (geometric sans-serif)73Border Radius: 0px or 100% (binary extremes)74Shadows: Hard shadows with 4px/8px offset75Features: Geometric shape decorations, color block backgrounds, 45° rotated elements, constructivism76```7778### Corporate Trust7980```81Colors: Indigo #4F46E5 + Violet #7C3AED + Slate backgrounds82Typography: Plus Jakarta Sans (geometric sans-serif)83Border Radius: rounded-xl (12px) for cards, rounded-full for buttons84Shadows: Colored shadows with blue/purple tints85Features: Isometric 3D transforms, gradient text, blur orbs, elevated cards on hover86```8788## Tech Stack Compatibility8990These design systems are compatible with various frontend tech stacks:9192- React / Next.js93- Vue / Nuxt94- Tailwind CSS95- shadcn/ui96- Native CSS9798## Notes991001. **Read Complete Documentation**: Each design document contains important "anti-generic points". Skipping may cause the design to lose its uniqueness1012. **Maintain Consistency**: Once a style is chosen, maintain consistency throughout the project1023. **Understand User Goals**: Before implementation, confirm with users whether they want to redesign components, refactor existing styles, or build from scratch1034. **Responsive First**: All design specifications consider mobile adaptation104105## File Structure106107```108website_design/109├── SKILL.md # This file - Skill entry guide110└── docs/111 ├── monochrome.md # Monochrome minimalist black & white style complete specification112 ├── bauhaus.md # Bauhaus style complete specification113 └── modern_dark.md # Corporate Trust modern SaaS style complete specification114```
nemori-ai