Website design

Skill nemori-ai/agent_skills/agent_skills/skills/website_design

Enable any AI Agent to gain Skills capability with one click, driving Agent self-evolution

Install

npx -y skills add nemori-ai/agent_skills --skill website_design

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

2 things to look at

no licenseNo license file was found in the repository. Code published without one is not open source by default, so using it at work is a question for whoever answers licensing questions where you are.
7 stars7 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

Provides beautiful design system templates for web design, including complete design specifications, component styles, and implementation guides

SKILL.md

4.6 KB, as published. Nobody here has run it

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