| name | website-design |
| description | Provides beautiful design system templates for web design, including complete design specifications, component styles, and implementation guides |
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:
skills_read(path="skills/website_design/docs/monochrome.md")
skills_read(path="skills/website_design/docs/bauhaus.md")
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
