How many design styles are available?

Three: Monochrome, Bauhaus, and Corporate Trust, each with dedicated docs and implementations.

Which tech stacks are supported?

React / Next.js, Vue / Nuxt, Tailwind CSS, shadcn/ui, and Native CSS.

Do these templates consider accessibility?

Yes. Documentation includes Accessibility Design, contrast recommendations, focus styles, and appropriate touch targets.

website-design

npx machina-cli add skill nemori-ai/agent_skills/website_design --openclaw

Files (1)

SKILL.md

4.6 KB

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

Source

git clone https://github.com/nemori-ai/agent_skills/blob/main/agent_skills/skills/website_design/SKILL.mdView on GitHub

Overview

Website Design System provides frontend designers and developers with carefully crafted templates. Each template includes complete design philosophy, design tokens, component styles, and responsive strategies to avoid the generic AI look. These unique style guides help teams ship high-quality, distinctive websites.

How This Skill Works

First, choose a style from Monochrome, Bauhaus, or Corporate Trust. Next, read the corresponding design docs to understand the Design Philosophy, Design Token System, Components, Layout, and Accessibility considerations. Finally, implement the Design Token System and component styles in your project using the provided implementation guides and anti-generic points.

When to Use It

When starting a new project and you need a defined design direction
To integrate a complete design system into an existing codebase
When you require comprehensive specs for colors, typography, spacing, and animations
To avoid generic UI and achieve a distinctive style quickly
When you want to ensure consistent visuals across React, Vue, or CSS-based stacks

Quick Start

Step 1: Pick a style (Monochrome, Bauhaus, Corporate Trust) that fits your brand
Step 2: Read the design docs for tokens, components, layout, and accessibility
Step 3: Implement the Design Token System in your codebase and apply component styles

Best Practices

Define a primary style early and stick to its tokens across components
Document and reuse design tokens (colors, typography, spacing) via the Design Token System
Leverage the Layout Strategy with grid and breakpoints to ensure responsive design
Follow the Anti-Generic Points to preserve uniqueness and avoid template-like UI
Test accessibility: maintain contrast, focus states, and proper touch targets across components

Example Use Cases

Monochrome style applied to a luxury magazine website with editorial layouts and strong typography
Bauhaus style used by a creative agency portfolio featuring geometric shapes and color blocks
Corporate Trust style implemented for an enterprise SaaS product with isometric elements
Bold Bauhaus-based product landing page using color blocks and geometric decorations
Documentation site showcasing tokens, components, and implementation guidelines

Frequently Asked Questions

Add this skill to your agents