skills/rknall__claude-skills
1
0
Fork 0
mirror of https://github.com/rknall/claude-skills.git synced 2026-09-14 19:37:34 +08:00
Code Issues Packages Projects Releases Wiki Activity

Add Web Design Builder and SVG Logo Designer skills

Browse Source 
Added two new design-focused skills for creative web development:

## Web Design Builder (v1.0.0)
Professional HTML5/JavaScript design generation with automatic verification.

Features:
- Complete web design generation from specifications
- Playwright MCP integration for automatic verification
- Accessibility testing (WCAG 2.1 Level AA)
- Visual verification with responsive screenshots
- Functionality testing (forms, interactions, JS)
- Performance analysis and optimization
- Multiple framework support (Vanilla, Tailwind, React, Vue, Alpine.js)
- Design templates for common patterns
- Graceful fallback when Playwright MCP unavailable

Workflow:
1. Requirements gathering
2. Design generation (HTML/CSS/JS)
3. Playwright verification (if available)
4. Comprehensive report with findings
5. Iteration and refinement

Resources:
- SKILL.md: Complete design generation workflow
- design-templates.md: Ready-to-use templates (landing pages, forms, dashboards)
- README.md: User documentation

## SVG Logo Designer (v1.0.0)
Professional logo generation with multiple concepts and variations.

Features:
- Multiple design concepts (3-5 per request)
- All logo types (wordmark, lettermark, pictorial, abstract, combination, emblem)
- Layout variations (horizontal, vertical, square, icon-only, text-only)
- Color variations (full color, monochrome, reversed)
- Professional, optimized SVG code
- Color psychology guidance
- Complete usage guidelines
- Export instructions (SVG to PNG)
- File organization best practices

Workflow:
1. Requirements and brand information gathering
2. Concept development (3-5 unique approaches)
3. Layout variations for each concept
4. SVG generation with clean code
5. Professional presentation with rationale
6. Complete deliverables package

Resources:
- SKILL.md: Complete logo design workflow with examples
- README.md: User documentation and usage guide

## Marketplace Updates
- Updated to version 3.0.0
- Added "design" category for creative skills
- Updated main README with new skills documentation
- Repository structure updated

Total skills in marketplace: 4
- Python Architecture Review
- UI/UX Design Review
- Web Design Builder (NEW)
- SVG Logo Designer (NEW)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Roland Knall
2025-10-18 12:43:25 +02:00
parent 8afb5b10e6
commit a3c2dadbd5
7 changed files with 2673 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.claude-plugin/marketplace.json
+16 -2
View File
@@ -1,8 +1,8 @@
{
"$schema": "https://anthropic.com/claude-code/marketplace.schema.json",
"name": "rknall-custom-skills",
"version": "2.0.0",
"description": "Custom Claude Code skills marketplace for advanced development workflows with architecture review and accessibility expertise",
"version": "3.0.0",
"description": "Custom Claude Code skills marketplace for architecture review, accessibility expertise, and creative design generation",
"owner": {
"name": "rknall"
},
@@ -20,6 +20,20 @@
"description": "Comprehensive UI/UX design review for websites and desktop applications with extensive WCAG 2.1/2.2 accessibility analysis, usability evaluation, and visual design assessment",
"version": "1.0.0",
"category": "development"
},
{
"name": "web-design-builder",
"source": "./web-design-builder",
"description": "Create professional HTML5/JavaScript web designs from specifications with automatic Playwright MCP verification for accessibility and functionality testing",
"version": "1.0.0",
"category": "design"
},
{
"name": "svg-logo-designer",
"source": "./svg-logo-designer",
"description": "Generate professional SVG logos with multiple concepts, layouts, and variations. Creates scalable vector graphics with comprehensive usage guidelines",
"version": "1.0.0",
"category": "design"
}
]
}
README.md
+89
View File
@@ -102,6 +102,74 @@ A production-ready skill that provides expert-level design reviews covering:
[View Full Documentation](./ui-design-review/README.md)
### 3. Web Design Builder
**Version:** 1.0.0
**Category:** Design
**Description:** Create professional HTML5/JavaScript web designs with Playwright verification
A production-ready skill that generates complete, accessible web designs from specifications:
- **Design Generation**: HTML5, CSS3, JavaScript for any web interface
- **Playwright Integration**: Automatic verification when MCP is available
- **Accessibility Testing**: WCAG 2.1 Level AA compliance checking
- **Visual Verification**: Screenshots at mobile, tablet, desktop breakpoints
- **Functionality Testing**: Forms, interactions, JavaScript validation
- **Performance Analysis**: Load time, resource optimization
- **Framework Support**: Vanilla, Tailwind CSS, React, Vue, Alpine.js
**Key Features:**
- Automatic Playwright MCP detection and graceful fallback
- Responsive, mobile-first designs
- Complete accessibility compliance (WCAG AA)
- Interactive component testing
- Performance metrics and optimization
- Design templates for common patterns
- Comprehensive verification reports
**When to Use:**
- Create landing pages or web applications
- Build responsive web interfaces
- Generate design mockups
- Refactor existing HTML/CSS/JS
- Create accessible WCAG-compliant designs
- Build component libraries
[View Full Documentation](./web-design-builder/README.md)
### 4. SVG Logo Designer
**Version:** 1.0.0
**Category:** Design
**Description:** Generate professional SVG logos with multiple variations
A production-ready skill that creates scalable vector graphic logos:
- **Multiple Concepts**: 3-5 different design directions per request
- **Layout Variations**: Horizontal, vertical, square, icon-only, text-only
- **Logo Types**: Wordmarks, lettermarks, pictorial, abstract, combination, emblems
- **Color Variations**: Full color, monochrome dark/light, reversed
- **Professional SVG**: Clean, optimized, accessible code
- **Usage Guidelines**: Complete brand identity documentation
- **Export Instructions**: SVG to PNG conversion guidance
**Key Features:**
- Multiple logo concepts exploring different visual approaches
- Comprehensive layout options for all use cases
- Color psychology guidance and palette selection
- Scalable vector graphics work at any size
- Accessibility with title/desc elements
- Complete usage documentation
- File organization and naming conventions
**When to Use:**
- Create brand logos or visual identities
- Design icons or symbols
- Generate logo variations and concepts
- Produce scalable graphics for branding
- Create wordmarks or lettermarks
- Design for both digital and print applications
[View Full Documentation](./svg-logo-designer/README.md)
## Repository Structure
```
@@ -120,6 +188,13 @@ Skills/
│ ├── wcag-checklist.md # WCAG 2.1/2.2 compliance checklist
│ ├── design-patterns-library.md # Accessible component patterns
│ └── testing-resources.md # Testing tools and methods
├── web-design-builder/ # Web Design Builder Skill
│ ├── SKILL.md # Main skill definition
│ ├── README.md # Skill documentation
│ └── design-templates.md # Ready-to-use templates
├── svg-logo-designer/ # SVG Logo Designer Skill
│ ├── SKILL.md # Main skill definition
│ └── README.md # Skill documentation
└── README.md # This file
```
@@ -242,6 +317,20 @@ Users install it with a single command:
## Version History
### 3.0.0 (2025-10-18)
- Added Web Design Builder skill v1.0.0
- HTML5/JavaScript design generation
- Playwright MCP integration for automatic verification
- Accessibility, visual, and functionality testing
- Multiple framework support (Vanilla, Tailwind, React, Vue, Alpine.js)
- Design templates for common patterns
- Added SVG Logo Designer skill v1.0.0
- Professional logo generation with multiple concepts
- Layout variations (horizontal, vertical, square, icon, text)
- All major logo types supported
- Color psychology guidance
- Complete usage guidelines
### 2.0.0 (2025-10-18)
- Added UI/UX Design Review skill v1.0.0
- Comprehensive WCAG 2.1/2.2 compliance framework
svg-logo-designer/README.md
+288
View File
@@ -0,0 +1,288 @@
# SVG Logo Designer Skill
Create professional, scalable vector graphic (SVG) logos with multiple variations and layouts.
## Overview
This skill generates professional SVG logos from design specifications, providing multiple concepts, layout variations, and comprehensive usage guidelines.
## Key Features
- **Multiple Concepts**: 3-5 different design directions
- **Layout Variations**: Horizontal, vertical, square, icon-only, text-only
- **Color Variations**: Full color, monochrome, reversed
- **Professional SVG Code**: Clean, optimized, accessible
- **Usage Guidelines**: Complete documentation for proper logo usage
- **Export Instructions**: SVG to PNG conversion guidance
- **Scalable Designs**: Works at any size without quality loss
## Logo Types Supported
### Wordmark
Text-based logos (Google, Coca-Cola style)
- Typography-focused
- Brand name as primary element
- Best for: Distinctive names
### Lettermark
Initials/abbreviation logos (IBM, HBO style)
- Condensed brand representation
- Memorable monograms
- Best for: Long names
### Pictorial Mark
Icon/symbol logos (Apple, Twitter style)
- Recognizable imagery
- Strong visual identity
- Best for: Established brands
### Abstract Mark
Abstract geometric logos (Pepsi, Adidas style)
- Unique visual forms
- Modern and versatile
- Best for: Tech, innovative brands
### Combination Mark
Icon + text logos (Burger King, Lacoste style)
- Flexibility in applications
- Clear brand communication
- Best for: Most businesses
### Emblem
Text inside symbol (Starbucks, Harley-Davidson style)
- Traditional and classic
- Badge-like appearance
- Best for: Organizations, schools
## Workflow
### Phase 1: Requirements Gathering
- Brand information and industry
- Target audience
- Design preferences and style
- Color palette
- Logo type preference
- Number of concepts needed
### Phase 2: Concept Development
- Create 3-5 unique concepts
- Different visual approaches
- Various style treatments
- Explore visual metaphors
### Phase 3: Layout Variations
For each concept:
- Horizontal lockup (website headers)
- Vertical lockup (social media)
- Square/centered (app icons)
- Icon only (small sizes)
- Text only (minimal applications)
### Phase 4: SVG Generation
- Clean, semantic SVG code
- Optimized paths and shapes
- Accessible with title/desc elements
- Color management with CSS classes
- Scalable viewBox
### Phase 5: Presentation
- Design rationale for each concept
- SVG code for all variations
- Usage context explanations
- Color specifications
### Phase 6: Deliverables
- All SVG files (30-75 typically)
- Usage guidelines
- Technical specifications
- Export instructions
- Optional mockups
## Color Psychology
**Blue** - Trust, professionalism, stability
- Finance, technology, healthcare
**Green** - Growth, health, eco-friendly
- Environment, wellness, finance
**Red** - Energy, passion, urgency
- Food, entertainment, retail
**Purple** - Creativity, luxury, spirituality
- Beauty, tech, creative industries
**Orange** - Friendly, energetic, affordable
- Retail, food, entertainment
**Yellow** - Optimism, clarity, warmth
- Food, children, energy
**Black/Gray** - Sophisticated, modern, classic
- Luxury, fashion, technology
## Installation
```bash
/plugin marketplace add rknall/claude-skills
/plugin install svg-logo-designer
```
## Example Usage
### Tech Startup Logo
```
Create a logo for "CloudSync", a cloud storage startup.
Industry: Technology, SaaS
Style: Modern, trustworthy, clean
Colors: Blue tones preferred
Type: Combination mark (icon + text)
Concepts: 3-4 different approaches
Include horizontal, vertical, and icon-only layouts.
```
### Restaurant Logo
```
Design a logo for "Bella Cucina", an Italian restaurant.
Industry: Food & dining, Italian cuisine
Style: Elegant, traditional, warm
Colors: Red, green, gold
Type: Emblem or combination mark
Concepts: 3 concepts
Need full color and monochrome versions.
```
### Fitness Brand Logo
```
Create a logo for "PeakFit", a fitness coaching service.
Industry: Health & fitness
Style: Bold, energetic, motivational
Colors: Vibrant orange and black
Type: Abstract mark or lettermark
Concepts: 4 different directions
Must work well on merchandise.
```
## SVG to PNG Export
### Option 1: Using Inkscape (Free)
```bash
inkscape logo.svg --export-png=logo.png --export-width=1000
```
### Option 2: Using ImageMagick
```bash
convert -background none logo.svg logo.png
```
### Option 3: Online Converter
- CloudConvert: https://cloudconvert.com/svg-to-png
- Vectr: https://vectr.com/
- SVGtoPNG: https://svgtopng.com/
### Option 4: Design Tools
- Adobe Illustrator: File → Export → PNG
- Figma: Import SVG, export as PNG
- Sketch: Import SVG, export as PNG
## File Naming Convention
```
brand-name-logo-concept1-horizontal.svg
brand-name-logo-concept1-vertical.svg
brand-name-logo-concept1-icon.svg
brand-name-logo-concept1-horizontal-monochrome.svg
brand-name-logo-concept2-horizontal.svg
```
## Usage Guidelines Included
Every logo package includes:
### Clear Space Rules
- Minimum distance around logo
- No text or graphics in clear space
### Minimum Sizes
- Digital: 100px width minimum
- Print: 1 inch width minimum
### Color Specifications
- Hex codes for all colors
- Pantone equivalents (if requested)
- CMYK values for print
### Incorrect Usage Examples
- Don't stretch or distort
- Don't change colors
- Don't add effects
- Don't rotate/skew
- Don't use on busy backgrounds
### Application Examples
- Website headers
- Business cards
- Social media profiles
- Print materials
- Merchandise
## Best Practices
Great logos are:
- **Simple**: Easy to recognize and remember
- **Memorable**: Unique and distinctive
- **Timeless**: Won't look dated quickly
- **Versatile**: Works across all applications
- **Appropriate**: Fits the brand and industry
## Deliverables
1. **SVG Files** (30-75 files)
- 3-5 concepts
- 3-5 layouts per concept
- 3-4 color variations
2. **Documentation**
- Design rationale for each concept
- Usage guidelines
- Color specifications
- Technical specs
3. **Export Instructions**
- SVG to PNG conversion
- File organization
- Web implementation examples
4. **Optional: Mockups**
- Logo on business card
- Logo on website
- Logo on merchandise
## Design Templates
The skill includes example patterns for:
- Geometric icons
- Wordmarks
- Abstract marks
- Combination marks
- Emblems
See SKILL.md for complete code examples.
## Version History
- **1.0.0** (2025-10-18): Initial release
- Multiple logo types supported
- Layout variations system
- Comprehensive usage guidelines
- Professional SVG generation
## License
This skill is provided as-is for use with Claude Code.
svg-logo-designer/SKILL.md
+639
View File
@@ -0,0 +1,639 @@
---
name: "SVG Logo Designer"
description: "Create professional SVG logos from descriptions and design specifications. Generates multiple logo variations with different layouts, styles, and concepts. Produces scalable vector graphics that can be used directly or exported to PNG. Use this skill when users ask to create logos, brand identities, icons, or visual marks for their designs."
---
# SVG Logo Designer
This skill creates professional, scalable vector graphic (SVG) logos from design specifications, offering multiple variations and layout options.
## When to Use This Skill
Activate this skill when the user requests:
- Create a logo from a description or specification
- Design a brand identity or visual mark
- Generate logo variations and concepts
- Create icons or symbols
- Design wordmarks or lettermarks
- Produce scalable graphics for branding
- Export logos in different layouts and styles
## Core Workflow
### Phase 1: Requirements Gathering
When a user requests a logo, gather comprehensive design requirements:
1. **Brand Information**
- Company/product name
- Industry and market
- Target audience
- Brand personality (modern, classic, playful, serious, etc.)
- Brand values and messaging
- Competitors (for differentiation)
2. **Design Preferences**
- Logo type:
- **Wordmark**: Text-based logo (Google, Coca-Cola style)
- **Lettermark**: Initials/abbreviation (IBM, HBO style)
- **Pictorial Mark**: Icon/symbol (Apple, Twitter style)
- **Abstract Mark**: Abstract geometric form (Pepsi, Adidas style)
- **Mascot**: Character-based (KFC Colonel, Michelin Man style)
- **Combination Mark**: Icon + text (Burger King, Lacoste style)
- **Emblem**: Text inside symbol (Starbucks, Harley-Davidson style)
3. **Style Guidelines**
- Color palette (specific colors or let AI choose)
- Color psychology considerations
- Font preferences (if text-based)
- Visual style:
- Minimalist
- Geometric
- Organic/flowing
- Bold/strong
- Elegant/refined
- Playful/friendly
- Tech/modern
- Vintage/retro
4. **Technical Requirements**
- Size constraints (will it be used small? large?)
- Application contexts (website, print, merchandise, etc.)
- Color vs monochrome versions needed
- Background usage (light, dark, transparent)
- Scalability requirements
5. **Number of Variations**
- How many different concepts? (Recommend 3-5)
- How many layouts per concept? (Horizontal, vertical, square, circular)
- Color variations needed?
### Phase 2: Design Concept Development
Create multiple logo concepts based on requirements:
#### Concept 1: Primary Direction
Develop the main design direction:
**Design Thinking:**
- Research visual metaphors related to brand
- Consider negative space opportunities
- Ensure memorability and uniqueness
- Balance simplicity with distinctiveness
- Consider cultural appropriateness
**SVG Structure:**
```xml
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" width="200" height="200">
<defs>
<!-- Gradients, patterns, filters -->
<linearGradient id="gradient1" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#4F46E5;stop-opacity:1" />
<stop offset="100%" style="stop-color:#7C3AED;stop-opacity:1" />
</linearGradient>
</defs>
<!-- Logo elements -->
<g id="logo-symbol">
<!-- Symbol/icon elements -->
</g>
<g id="logo-text">
<!-- Text elements (if applicable) -->
</g>
</svg>
```
#### Concept 2-5: Alternative Directions
Create variations exploring different visual approaches:
- Different visual metaphors
- Different style treatments
- Different layouts and compositions
- Different color applications
### Phase 3: Layout Variations
For each concept, create multiple layout options:
#### Layout A: Horizontal Lockup
- Icon on left, text on right
- Best for website headers, business cards
- Wider aspect ratio
#### Layout B: Vertical Lockup
- Icon on top, text below
- Best for social media profiles, app icons
- Taller aspect ratio
#### Layout C: Square/Centered
- Icon and text centered
- Best for favicon, app icon, profile picture
- 1:1 aspect ratio
#### Layout D: Icon Only
- Symbol without text
- Best for small sizes, watermarks
- Compact, recognizable
#### Layout E: Text Only
- Wordmark without icon
- Best for minimal applications
- Typography-focused
### Phase 4: SVG Generation
Create professional, optimized SVG code:
**Best Practices:**
1. **Clean, Semantic Code**
```xml
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 60">
<!-- Use groups for organization -->
<g id="icon">
<!-- Icon elements -->
</g>
<g id="wordmark">
<!-- Text elements -->
</g>
</svg>
```
2. **Scalable Design**
- Use viewBox for scalability
- Avoid pixel-specific sizes
- Use relative units
- Design at multiple sizes to test
3. **Color Management**
```xml
<!-- Define colors once, reuse throughout -->
<defs>
<style>
.primary { fill: #4F46E5; }
.secondary { fill: #10B981; }
.text { fill: #1F2937; }
</style>
</defs>
<rect class="primary" x="0" y="0" width="100" height="100" />
```
4. **Optimization**
- Remove unnecessary attributes
- Combine paths where possible
- Use symbols for repeated elements
- Minimize decimal precision
- Remove invisible elements
5. **Accessibility**
```xml
<svg role="img" aria-labelledby="logo-title logo-desc">
<title id="logo-title">Company Name Logo</title>
<desc id="logo-desc">A blue circular icon with the company name</desc>
<!-- Logo content -->
</svg>
```
### Phase 5: Presentation
Present logos in an organized, professional manner:
```markdown
# Logo Design Concepts
## Concept 1: [Concept Name/Theme]
### Design Rationale
[Explain the thinking behind this design, visual metaphors used, and how it represents the brand]
### Primary Logo (Horizontal)
```xml
<svg><!-- SVG code here --></svg>
```
**Usage:** Headers, website navigation, business cards
**Dimensions:** 200×60px (scalable)
### Vertical Layout
```xml
<svg><!-- SVG code here --></svg>
```
**Usage:** Social media profiles, mobile apps
**Dimensions:** 100×120px (scalable)
### Icon Only
```xml
<svg><!-- SVG code here --></svg>
```
**Usage:** Favicon, app icon, small spaces
**Dimensions:** 64×64px (scalable)
### Color Variations
**Full Color:**
- Primary: #4F46E5 (Indigo)
- Secondary: #10B981 (Emerald)
**Monochrome (Dark):**
- Single color: #1F2937 (Gray-900)
**Monochrome (Light):**
- Single color: #FFFFFF (White)
**Reversed:**
- For dark backgrounds
---
## Concept 2: [Concept Name/Theme]
[Repeat structure for additional concepts]
```
### Phase 6: File Generation
Save SVG files with proper naming:
```javascript
// File naming convention
company-name-logo-concept1-horizontal.svg
company-name-logo-concept1-vertical.svg
company-name-logo-concept1-icon.svg
company-name-logo-concept2-horizontal.svg
// etc.
```
Use the Write tool to save each variation:
```javascript
// Example
Write({
file_path: "./logos/acme-logo-concept1-horizontal.svg",
content: svgCode
});
```
### Phase 7: Usage Guidelines
Provide comprehensive usage documentation:
```markdown
# Logo Usage Guidelines
## File Formats Provided
### SVG (Scalable Vector Graphics)
- **Use for:** Websites, digital applications, large prints
- **Benefits:** Infinitely scalable, small file size, editable
- **How to use:** Embed directly in HTML or open in design tools
### Exporting to PNG
If you need PNG format:
**Option 1: Using Inkscape (Free)**
```bash
inkscape logo.svg --export-png=logo.png --export-width=1000
```
**Option 2: Using ImageMagick**
```bash
convert -background none logo.svg logo.png
```
**Option 3: Online Converter**
- Visit: https://cloudconvert.com/svg-to-png
- Upload SVG, download PNG
## Clear Space
Maintain minimum clear space around logo:
- Distance = Height of logo symbol
- No text or graphics in clear space
## Minimum Sizes
- **Digital:** 100px width minimum
- **Print:** 1 inch width minimum
## Color Usage
### Primary Color Palette
- Use full color on white/light backgrounds
- Use monochrome white on dark backgrounds
- Use monochrome dark on light backgrounds
### Color Variations by Context
**Website Headers:**
- Full color version preferred
- Ensure 4.5:1 contrast with background
**Social Media:**
- Use square/circular crops
- Provide background color if needed
**Print Materials:**
- Full color for color printing
- Monochrome black for B&W printing
- Consider spot color for cost-effective printing
## Incorrect Usage
❌ Do Not:
- Stretch or distort the logo
- Change colors outside approved palette
- Add effects (shadows, glows, etc.)
- Rotate or skew the logo
- Place on busy backgrounds without clear space
- Recreate or modify logo elements
## File Organization
```
logos/
concept-1/
horizontal/
full-color.svg
monochrome-dark.svg
monochrome-light.svg
vertical/
[same variations]
icon/
[same variations]
concept-2/
[same structure]
```
## Technical Specifications
### Web Usage
```html
<!-- Inline SVG (Recommended for control) -->
<svg><!-- SVG code --></svg>
<!-- Image tag (Simpler) -->
<img src="logo.svg" alt="Company Name Logo" />
<!-- CSS Background -->
.logo {
background-image: url('logo.svg');
background-size: contain;
}
```
### Responsive Implementation
```css
.logo {
width: 100%;
max-width: 200px;
height: auto;
}
/* Mobile */
@media (max-width: 768px) {
.logo {
max-width: 150px;
}
}
```
```
## Design Patterns & Examples
### Wordmark Logo
```xml
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 80">
<defs>
<style>
.wordmark {
font-family: 'Helvetica', sans-serif;
font-size: 48px;
font-weight: 700;
fill: #1F2937;
}
</style>
</defs>
<text x="10" y="60" class="wordmark">COMPANY</text>
</svg>
```
### Geometric Icon
```xml
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<defs>
<linearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#4F46E5" />
<stop offset="100%" style="stop-color:#7C3AED" />
</linearGradient>
</defs>
<!-- Hexagon shape -->
<polygon
points="50,5 95,27.5 95,72.5 50,95 5,72.5 5,27.5"
fill="url(#grad)"
stroke="#312E81"
stroke-width="2"
/>
<!-- Inner element -->
<circle cx="50" cy="50" r="20" fill="#FFFFFF" />
</svg>
```
### Abstract Mark
```xml
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<!-- Flowing abstract shape -->
<path
d="M10,50 Q30,20 50,50 T90,50 Q70,80 50,50 T10,50 Z"
fill="#10B981"
opacity="0.8"
/>
<path
d="M15,55 Q35,25 55,55 T95,55"
fill="none"
stroke="#059669"
stroke-width="3"
stroke-linecap="round"
/>
</svg>
```
### Combination Mark
```xml
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 80">
<!-- Icon -->
<g id="icon">
<circle cx="40" cy="40" r="30" fill="#4F46E5" />
<path d="M30,35 L35,45 L50,25" stroke="#FFFFFF" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round" />
</g>
<!-- Text -->
<g id="text">
<text x="85" y="45" font-family="Arial, sans-serif" font-size="28" font-weight="700" fill="#1F2937">
COMPANY
</text>
</g>
</svg>
```
## Color Psychology Guide
Help users choose appropriate colors:
**Blue** (#0066CC, #4F46E5)
- Trust, professionalism, stability
- Industries: Finance, technology, healthcare
**Green** (#10B981, #059669)
- Growth, health, eco-friendly
- Industries: Environment, wellness, finance
**Red** (#DC2626, #EF4444)
- Energy, passion, urgency
- Industries: Food, entertainment, retail
**Purple** (#7C3AED, #8B5CF6)
- Creativity, luxury, spirituality
- Industries: Beauty, tech, creative
**Orange** (#F97316, #FB923C)
- Friendly, energetic, affordable
- Industries: Retail, food, entertainment
**Yellow** (#FBBF24, #FCD34D)
- Optimism, clarity, warmth
- Industries: Food, children, energy
**Black/Gray** (#1F2937, #6B7280)
- Sophisticated, modern, classic
- Industries: Luxury, fashion, technology
## Iteration Process
After presenting initial concepts:
1. **Gather Feedback**
- Which concept resonates most?
- What elements to keep/change?
- Any concerns or issues?
2. **Refine Selected Concept**
- Adjust colors if needed
- Tweak proportions
- Refine details
- Test at different sizes
3. **Create Final Variations**
- All layout options
- All color variations
- Special use cases
4. **Deliver Final Package**
- All SVG files
- Usage guidelines
- Technical specs
- Export instructions
## Communication Style
When working with users:
1. **Understand the Brand**
- Ask about brand personality
- Understand target audience
- Research industry context
2. **Explain Design Choices**
- Share rationale for visual metaphors
- Explain color psychology
- Justify composition decisions
3. **Provide Options**
- Offer multiple concepts
- Show layout variations
- Demonstrate color options
4. **Be Flexible**
- Accept feedback gracefully
- Iterate based on input
- Explain limitations when necessary
5. **Educate**
- Explain SVG benefits
- Guide on proper usage
- Share best practices
## Deliverables
Provide complete logo package:
1. **SVG Files**
- All concepts (3-5)
- All layouts per concept (3-5)
- All color variations (3-4)
- Total: 30-75 files typically
2. **Documentation**
- Usage guidelines
- Color specifications
- Size recommendations
- Do's and don'ts
3. **Technical Info**
- File organization structure
- Export instructions (SVG to PNG)
- Web implementation examples
- Print specifications
4. **Optional: Mockups**
- Logo on business card
- Logo on website header
- Logo on product
- Logo on signage
## Example Workflow
**User Request:**
> "Create a logo for my tech startup called 'CloudSync'. We provide cloud storage solutions. Looking for something modern and trustworthy."
**Your Response:**
1. **Clarify:**
- "I'll create a modern, tech-focused logo for CloudSync. A few questions:
- Preferred colors? (Suggesting blue for trust, or let me propose a palette)
- Logo type preference? (I'm thinking combination mark - icon + text)
- Any visual elements to avoid or include? (clouds, sync symbols, etc.)
- How many concepts would you like to see? (I recommend 3-4)"
2. **Develop Concepts:**
- **Concept 1**: Abstract cloud with sync arrows, modern geometric style
- **Concept 2**: Minimalist wordmark with stylized 'C' incorporating cloud
- **Concept 3**: Circular badge with cloud and connection nodes
- **Concept 4**: Bold lettermark 'CS' with cloud integration
3. **Create Variations:**
- For each concept: horizontal, vertical, icon-only layouts
- Color variations: full color, monochrome, reversed
4. **Present:**
- Show all concepts with rationale
- Provide SVG code for each
- Include usage guidelines
- Offer iteration based on feedback
5. **Refine:**
- User selects favorite concept
- Make requested adjustments
- Finalize all variations
- Deliver complete package
Remember: Great logos are simple, memorable, timeless, versatile, and appropriate. Focus on creating designs that will work across all applications and stand the test of time!
web-design-builder/README.md
+227
View File
@@ -0,0 +1,227 @@
# Web Design Builder Skill
Create professional, accessible HTML5/JavaScript web designs with automatic Playwright verification.
## Overview
This skill generates complete, production-ready web designs from specifications, with automatic accessibility and functionality testing using Playwright MCP integration.
## Key Features
- **Complete Design Generation**: HTML5, CSS3, JavaScript from specifications
- **Automatic Verification**: Playwright MCP integration for testing (when available)
- **Accessibility First**: WCAG 2.1 Level AA compliance built-in
- **Responsive Design**: Mobile-first, tested across breakpoints
- **Modern Frameworks**: Vanilla, Tailwind CSS, React, Vue, Alpine.js support
- **Interactive Testing**: Keyboard navigation, form validation, component functionality
- **Visual Verification**: Screenshots at multiple breakpoints
- **Performance Optimization**: Load time analysis, resource optimization
## When to Use
- Create landing pages, websites, or web applications
- Build responsive web interfaces from specifications
- Generate design mockups or prototypes
- Refactor existing HTML/CSS/JavaScript code
- Create accessible, WCAG-compliant designs
- Build component libraries or design systems
## Playwright MCP Integration
### Automatic Detection
The skill automatically detects if Playwright MCP is installed. If not available:
- User is informed before starting
- Verification steps are skipped
- Manual testing guidance is provided
- Installation instructions are offered
### When Playwright MCP is Available
Automatic verification includes:
1. **Accessibility Testing**
- WCAG compliance checking
- Color contrast verification
- Keyboard navigation testing
- Screen reader compatibility
2. **Visual Testing**
- Screenshots at mobile (375px), tablet (768px), desktop (1440px)
- Full-page captures
- Responsive layout verification
3. **Functionality Testing**
- Form validation
- Interactive components
- JavaScript functionality
- Error handling
4. **Performance Analysis**
- Load time measurement
- Resource size analysis
- Optimization recommendations
## Workflow
### Phase 1: Requirements Gathering
- Design scope and type
- Target audience and use case
- Technical preferences (framework, browser support)
- Accessibility requirements
- **Check Playwright MCP availability**
### Phase 2: Design Generation
- Create semantic HTML5 structure
- Responsive CSS with mobile-first approach
- Accessible JavaScript with progressive enhancement
- Save to file
### Phase 3: Verification (if Playwright MCP available)
- Launch browser and load design
- Run accessibility tests
- Capture responsive screenshots
- Test interactive functionality
- Analyze performance
### Phase 4: Verification Report
- Comprehensive accessibility compliance report
- Visual testing results
- Functionality test outcomes
- Performance metrics
- Prioritized recommendations
### Phase 5: Iteration
- Fix critical issues
- Apply improvements
- Re-verify
- Deliver final design
## Supported Frameworks
### Vanilla HTML/CSS/JS
- No dependencies
- Simple and fast
- Best for: Static sites, simple interactions
### Tailwind CSS
- Utility-first CSS
- Rapid development
- Best for: Prototypes, modern interfaces
### React
- Component-based
- Virtual DOM
- Best for: Complex SPAs, interactive apps
### Vue
- Progressive framework
- Easy to learn
- Best for: Medium complexity apps
### Alpine.js
- Lightweight (15KB)
- Declarative syntax
- Best for: Progressive enhancement
## Installation
```bash
/plugin marketplace add rknall/claude-skills
/plugin install web-design-builder
```
## Example Usage
### Basic Landing Page
```
Create a landing page for a SaaS product with:
- Hero section with CTA
- Features grid (3 columns)
- Pricing table
- Contact form
Use Tailwind CSS and make it fully accessible.
```
### Dashboard Interface
```
Build an admin dashboard with:
- Sidebar navigation
- Top header with user menu
- Stats cards
- Data table
- Charts
Responsive design, dark mode support.
```
### Contact Form
```
Create an accessible contact form with:
- Name, email, message fields
- Real-time validation
- Success/error states
- WCAG AA compliant
Include keyboard navigation support.
```
## Installing Playwright MCP
If Playwright MCP is not installed:
```bash
# Install Playwright MCP server
npm install -g @playwright/mcp-server
# Configure in Claude Code
claude code mcp add playwright
# Restart Claude Code
```
## Design Templates
The skill includes templates for:
- SaaS Landing Pages
- Contact Forms
- Admin Dashboards
- Product Pages
- Portfolio Sites
See `design-templates.md` for complete examples.
## Accessibility Features
All designs include:
- ✅ Semantic HTML5 elements
- ✅ ARIA landmarks and labels
- ✅ Keyboard navigation support
- ✅ Focus indicators (3:1 contrast)
- ✅ Color contrast compliance (4.5:1 minimum)
- ✅ Skip links
- ✅ Screen reader friendly
- ✅ Responsive and zoomable
- ✅ Form labels and validation
- ✅ Alt text for images
## Deliverables
- Complete HTML/CSS/JavaScript files
- Verification report (if MCP available)
- Screenshots at multiple breakpoints
- Usage documentation
- Customization guide
- Deployment instructions
## Version History
- **1.0.0** (2025-10-18): Initial release
- Playwright MCP integration
- Multiple framework support
- Accessibility-first approach
- Comprehensive verification
## License
This skill is provided as-is for use with Claude Code.
web-design-builder/SKILL.md
+728
View File
@@ -0,0 +1,728 @@
---
name: "Web Design Builder"
description: "Create and refactor HTML5/JavaScript web designs from specifications or descriptions. Generates complete, accessible, responsive web designs with modern frameworks. Automatically verifies designs using Playwright MCP for accessibility and functionality testing. Use this skill when users ask to create web designs, mockups, landing pages, web applications, or refactor existing HTML/CSS/JS designs."
---
# Web Design Builder
This skill creates professional HTML5/JavaScript web designs from specifications, with automatic accessibility and functionality verification using Playwright MCP.
## When to Use This Skill
Activate this skill when the user requests:
- Create a web design from a specification or description
- Build a landing page, website, or web application
- Create a design mockup or prototype
- Refactor or improve existing HTML/CSS/JavaScript code
- Build responsive web interfaces
- Create component libraries or design systems
- Generate accessible web designs with WCAG compliance
## Core Workflow
### Phase 1: Requirements Gathering
When a user requests a web design, start by understanding their needs:
1. **Clarify the Design Scope**
- What type of design? (landing page, dashboard, form, etc.)
- Target audience and use case
- Required features and functionality
- Content and copy (provided or placeholder?)
- Brand colors, fonts, or design system
- Responsive requirements (mobile-first?)
2. **Technical Preferences**
- Framework preference:
- **Vanilla HTML/CSS/JS** (simple, no dependencies)
- **Tailwind CSS** (utility-first, recommended for rapid development)
- **React** (component-based, for complex interactions)
- **Vue** (progressive framework)
- **Alpine.js** (lightweight reactivity)
- Browser support requirements
- Accessibility requirements (WCAG level)
- Performance constraints
3. **Check Playwright MCP Availability**
**IMPORTANT**: Before starting the design process, check if Playwright MCP is available:
```javascript
// Check if mcp__playwright tools are available
// Look for tools like: mcp__playwright__navigate, mcp__playwright__screenshot, etc.
```
**If Playwright MCP is NOT available:**
- Inform the user: "Playwright MCP is not installed. Design verification will be skipped."
- Provide installation instructions (see MCP Setup section below)
- Continue with design generation but skip verification phase
- Mark this clearly in the output
**If Playwright MCP IS available:**
- Inform the user: "Playwright MCP detected. Design will be automatically verified."
- Include verification in the workflow
### Phase 2: Design Generation
#### Step 1: Create Design Mockup
Generate a complete HTML/CSS/JS mockup including:
**HTML Structure:**
- Semantic HTML5 elements
- Proper heading hierarchy (h1 → h6)
- ARIA landmarks (header, nav, main, aside, footer)
- Accessible form labels and inputs
- Alt text for images
- Unique page title
**CSS Styling:**
- Responsive design (mobile-first)
- CSS Grid or Flexbox for layouts
- Custom properties (CSS variables) for theming
- Smooth transitions and animations
- Print styles (if applicable)
- Dark mode support (optional)
**JavaScript Functionality:**
- Progressive enhancement
- Accessible interactions (keyboard support)
- Form validation
- Dynamic content loading
- Event handling
- Error handling
**Accessibility Features:**
- WCAG 2.1 Level AA compliance minimum
- Keyboard navigation support
- Focus indicators
- Screen reader friendly
- Color contrast compliance (4.5:1 minimum)
- Skip links
- ARIA attributes where needed
**Example Output Structure:**
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Page Title</title>
<style>
/* Modern CSS with custom properties */
:root {
--primary-color: #0066cc;
--text-color: #1a1a1a;
--bg-color: #ffffff;
--spacing: 1rem;
}
/* Reset and base styles */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
line-height: 1.6;
color: var(--text-color);
background: var(--bg-color);
}
/* Responsive layout */
@media (max-width: 768px) {
/* Mobile styles */
}
</style>
</head>
<body>
<!-- Accessible skip link -->
<a href="#main-content" class="skip-link">Skip to main content</a>
<!-- Semantic structure -->
<header role="banner">
<nav aria-label="Main navigation">
<!-- Navigation -->
</nav>
</header>
<main id="main-content" role="main">
<!-- Main content -->
</main>
<footer role="contentinfo">
<!-- Footer -->
</footer>
<script>
// Progressive enhancement JavaScript
(function() {
'use strict';
// Feature detection
if (!('querySelector' in document)) return;
// Your JavaScript here
})();
</script>
</body>
</html>
```
#### Step 2: Save Design to File
Save the generated design to a file:
```javascript
// Recommended file structure
project-name/
index.html // Main HTML file
styles.css // Separate CSS (if needed)
script.js // Separate JS (if needed)
assets/
images/ // Image assets
fonts/ // Custom fonts
```
Use the Write tool to create the file:
- Save to user's current directory or ask for preferred location
- Use descriptive filename (e.g., `landing-page.html`, `dashboard.html`)
- Create single-file HTML for mockups (CSS/JS inline)
- Create separate files for production builds
### Phase 3: Design Verification (ONLY if Playwright MCP is available)
**IMPORTANT**: Only execute this phase if Playwright MCP was detected in Phase 1.
#### Step 1: Launch Browser and Load Design
Use Playwright MCP to open the design:
```javascript
// Navigate to the local HTML file
await mcp__playwright__navigate({
url: 'file:///path/to/design.html'
});
```
#### Step 2: Accessibility Testing
Run comprehensive accessibility checks:
1. **Automated Accessibility Scan**
- Check for WCAG violations
- Verify color contrast ratios
- Check heading hierarchy
- Verify ARIA attributes
- Check form labels
- Verify alt text on images
2. **Keyboard Navigation Test**
- Tab through all interactive elements
- Verify focus indicators are visible
- Check tab order is logical
- Test Escape key behavior (modals, dropdowns)
- Verify no keyboard traps
3. **Screen Reader Compatibility**
- Check ARIA landmarks
- Verify semantic HTML usage
- Check dynamic content announcements
- Verify form error messages
#### Step 3: Visual Testing
Capture screenshots and verify layout:
```javascript
// Take full-page screenshot
await mcp__playwright__screenshot({
fullPage: true,
path: 'design-screenshot.png'
});
// Test responsive breakpoints
const breakpoints = [
{ width: 375, height: 667, name: 'mobile' },
{ width: 768, height: 1024, name: 'tablet' },
{ width: 1440, height: 900, name: 'desktop' }
];
for (const bp of breakpoints) {
await mcp__playwright__setViewportSize({
width: bp.width,
height: bp.height
});
await mcp__playwright__screenshot({
path: `design-${bp.name}.png`
});
}
```
#### Step 4: Functionality Testing
Test interactive elements:
1. **Form Validation**
- Test required fields
- Test input validation
- Test error messages
- Test success states
2. **Interactive Components**
- Test buttons and links
- Test modals and dialogs
- Test dropdowns and menus
- Test tabs and accordions
- Test carousels and sliders
3. **JavaScript Functionality**
- Verify event handlers work
- Test dynamic content loading
- Check console for errors
- Verify progressive enhancement
#### Step 5: Performance Check
Evaluate performance metrics:
1. **Load Time**
- Measure page load time
- Check resource loading
- Identify bottlenecks
2. **Resource Optimization**
- Check CSS file size
- Check JavaScript file size
- Verify image optimization
- Check for unused CSS/JS
### Phase 4: Verification Report
Generate a comprehensive report:
```markdown
# Design Verification Report
## Overview
- **Design Type**: [Landing Page / Dashboard / etc.]
- **Framework**: [Vanilla / Tailwind / React / etc.]
- **Verification Date**: [Date]
- **Playwright MCP**: [Available / Not Available]
## Accessibility Compliance
### WCAG 2.1 Level AA
✅ **PASSED**: Color contrast (4.5:1 minimum)
✅ **PASSED**: Keyboard navigation
✅ **PASSED**: Semantic HTML structure
⚠️ **WARNING**: Missing alt text on 2 images
❌ **FAILED**: Form missing associated labels
### Issues Found
1. **HIGH**: Form input #email missing label
- Location: Line 45
- Fix: Add `<label for="email">Email</label>`
2. **MEDIUM**: Image missing alt text
- Location: Line 78
- Fix: Add `alt="Description of image"`
## Visual Testing
### Responsive Breakpoints
✅ **Mobile (375px)**: Layout renders correctly
✅ **Tablet (768px)**: Layout renders correctly
✅ **Desktop (1440px)**: Layout renders correctly
### Screenshots
- [x] Full page screenshot saved
- [x] Mobile screenshot saved
- [x] Tablet screenshot saved
- [x] Desktop screenshot saved
## Functionality Testing
### Interactive Elements
✅ Navigation menu works
✅ Form submission works
✅ Modal opens and closes
⚠️ Focus not returned to trigger after modal close
### JavaScript
✅ No console errors
✅ Event handlers working
✅ Progressive enhancement implemented
## Performance
### Metrics
- **Page Load Time**: 1.2s
- **Total File Size**: 45KB
- **CSS Size**: 12KB
- **JavaScript Size**: 8KB
### Optimization Opportunities
- Consider minifying CSS (potential 30% reduction)
- Lazy load images below the fold
- Consider code splitting for JavaScript
## Recommendations
### High Priority
1. Fix form label associations
2. Add missing alt text to images
3. Implement focus management for modal
### Medium Priority
1. Minify CSS and JavaScript for production
2. Add loading states for dynamic content
3. Implement error boundaries for JavaScript
### Low Priority
1. Add dark mode support
2. Enhance animations with reduced motion support
3. Add print styles
## Next Steps
1. Review and fix high-priority issues
2. Re-run verification after fixes
3. Test with actual screen readers
4. Conduct user testing
5. Deploy to staging environment
```
### Phase 5: Iteration and Refinement
Based on verification results:
1. **Fix Critical Issues**
- Address all accessibility violations
- Fix broken functionality
- Resolve layout issues
2. **Apply Improvements**
- Implement recommended optimizations
- Enhance visual design based on feedback
- Refine interactions and animations
3. **Re-verify**
- Run verification again after fixes
- Ensure all issues are resolved
- Generate updated report
4. **Deliver Final Design**
- Provide clean, production-ready code
- Include documentation
- Provide deployment instructions
- Share verification report
## Design Patterns & Best Practices
### Responsive Design
**Mobile-First Approach:**
```css
/* Base styles for mobile */
.container {
padding: 1rem;
}
/* Tablet and up */
@media (min-width: 768px) {
.container {
padding: 2rem;
max-width: 960px;
margin: 0 auto;
}
}
/* Desktop and up */
@media (min-width: 1024px) {
.container {
padding: 3rem;
max-width: 1200px;
}
}
```
### Accessible Forms
```html
<form class="contact-form">
<div class="form-field">
<label for="name">
Name <span aria-label="required">*</span>
</label>
<input
type="text"
id="name"
name="name"
required
aria-required="true"
aria-describedby="name-error"
/>
<span id="name-error" class="error" role="alert" hidden>
Please enter your name
</span>
</div>
</form>
```
### Interactive Components
**Accessible Modal:**
```javascript
function openModal(modalId) {
const modal = document.getElementById(modalId);
const lastFocused = document.activeElement;
modal.hidden = false;
modal.setAttribute('aria-modal', 'true');
// Focus first focusable element
const firstFocusable = modal.querySelector('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
firstFocusable?.focus();
// Store last focused for return
modal.dataset.lastFocused = lastFocused;
// Trap focus
trapFocus(modal);
}
function closeModal(modalId) {
const modal = document.getElementById(modalId);
modal.hidden = true;
// Return focus
const lastFocused = document.querySelector(`[data-last-focused="${modal.id}"]`);
lastFocused?.focus();
}
```
## Framework-Specific Guidelines
### Tailwind CSS
**Pros:**
- Rapid development
- Consistent design system
- Built-in responsive utilities
- Excellent for prototyping
**Setup:**
```html
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#0066cc',
}
}
}
}
</script>
```
**Example:**
```html
<div class="container mx-auto px-4">
<h1 class="text-4xl font-bold text-gray-900 mb-4">
Welcome
</h1>
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
Click Me
</button>
</div>
```
### React
**Pros:**
- Component reusability
- Virtual DOM performance
- Large ecosystem
- Great for SPAs
**Example:**
```jsx
function DesignComponent() {
const [isOpen, setIsOpen] = React.useState(false);
return (
<div className="container">
<button
onClick={() => setIsOpen(!isOpen)}
aria-expanded={isOpen}
>
Toggle
</button>
{isOpen && (
<div className="content">
Content here
</div>
)}
</div>
);
}
```
### Alpine.js
**Pros:**
- Lightweight (15KB)
- Declarative syntax
- No build step needed
- Good for progressive enhancement
**Example:**
```html
<div x-data="{ open: false }">
<button @click="open = !open" :aria-expanded="open">
Toggle
</button>
<div x-show="open" x-transition>
Content here
</div>
</div>
```
## MCP Setup Instructions
If Playwright MCP is not available, provide these instructions to the user:
### Installing Playwright MCP
**Option 1: Via NPM (Recommended)**
```bash
# Install Playwright MCP server
npm install -g @playwright/mcp-server
# Configure in Claude Code
claude code mcp add playwright
```
**Option 2: Manual Setup**
1. Create MCP configuration file:
```json
{
"mcpServers": {
"playwright": {
"command": "npx",
"args": ["@playwright/mcp-server"],
"env": {}
}
}
}
```
2. Restart Claude Code
**Verification:**
After installation, verify Playwright MCP is working:
```bash
# Check MCP servers
claude code mcp list
```
You should see `playwright` in the list of available MCP servers.
## Communication Style
When working with users:
1. **Clarify Requirements First**
- Ask about design goals and constraints
- Understand technical requirements
- Confirm framework preferences
2. **Provide Context**
- Explain design decisions
- Justify framework choices
- Describe accessibility considerations
3. **Show Progress**
- Inform when generating design
- Update during verification (if MCP available)
- Share findings incrementally
4. **Be Actionable**
- Provide specific fixes for issues
- Include code examples
- Offer alternatives when appropriate
5. **Handle MCP Unavailability Gracefully**
- Clearly state when verification is skipped
- Provide manual testing guidance
- Offer installation instructions
## Deliverables
At the end of the design process, provide:
1. **Complete Design Files**
- HTML, CSS, JavaScript files
- Assets (if any)
- README with setup instructions
2. **Verification Report** (if MCP available)
- Accessibility compliance results
- Visual testing screenshots
- Functionality test results
- Performance metrics
- Prioritized recommendations
3. **Documentation**
- Component usage guide
- Customization instructions
- Browser support information
- Deployment guidelines
4. **Next Steps**
- Suggested improvements
- Testing recommendations
- Production checklist
## Example Workflow
**User Request:**
> "Create a landing page for a SaaS product with a hero section, features, pricing, and contact form."
**Your Response:**
1. **Clarify Requirements:**
- "I'll create a modern SaaS landing page. A few questions:
- Do you have brand colors or should I use a professional default palette?
- Framework preference? I recommend Tailwind CSS for rapid development.
- Any specific features to highlight?
- Contact form fields needed?"
2. **Check Playwright MCP:**
- "Checking for Playwright MCP... Not detected. Design verification will be skipped. Would you like installation instructions?"
3. **Generate Design:**
- Create complete HTML/CSS/JS file
- Include hero, features, pricing, contact form
- Make it responsive and accessible
- Save to `saas-landing-page.html`
4. **Manual Verification Guide** (since MCP not available):
- Provide checklist for manual testing
- Share accessibility testing tools
- Suggest browser testing approach
5. **Deliver:**
- Share complete design file
- Provide customization guide
- Offer iteration if needed
Remember: The goal is to create beautiful, accessible, functional web designs that work for all users, with automatic verification when possible!
web-design-builder/design-templates.md
+686
View File
@@ -0,0 +1,686 @@
# Web Design Templates
Ready-to-use templates for common web design patterns.
## Landing Page Template
### Modern SaaS Landing Page
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Product Name - Tagline</title>
<style>
:root {
--primary: #4F46E5;
--primary-dark: #4338CA;
--secondary: #10B981;
--text: #1F2937;
--text-light: #6B7280;
--bg: #FFFFFF;
--bg-alt: #F9FAFB;
}
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
line-height: 1.6;
color: var(--text);
background: var(--bg);
}
.skip-link {
position: absolute;
top: -40px;
left: 0;
background: var(--primary);
color: white;
padding: 8px 16px;
text-decoration: none;
z-index: 100;
}
.skip-link:focus {
top: 0;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 1rem;
}
/* Header */
header {
padding: 1rem 0;
border-bottom: 1px solid #E5E7EB;
}
nav {
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
font-size: 1.5rem;
font-weight: 700;
color: var(--primary);
}
.nav-links {
display: flex;
gap: 2rem;
list-style: none;
}
.nav-links a {
color: var(--text);
text-decoration: none;
font-weight: 500;
}
.nav-links a:hover,
.nav-links a:focus {
color: var(--primary);
}
.btn {
padding: 0.75rem 1.5rem;
border-radius: 6px;
font-weight: 600;
text-decoration: none;
display: inline-block;
transition: all 0.2s;
}
.btn-primary {
background: var(--primary);
color: white;
}
.btn-primary:hover,
.btn-primary:focus {
background: var(--primary-dark);
}
/* Hero Section */
.hero {
padding: 4rem 0;
text-align: center;
}
.hero h1 {
font-size: clamp(2rem, 5vw, 3.5rem);
margin-bottom: 1.5rem;
font-weight: 800;
}
.hero p {
font-size: 1.25rem;
color: var(--text-light);
margin-bottom: 2rem;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
.hero-cta {
display: flex;
gap: 1rem;
justify-content: center;
flex-wrap: wrap;
}
/* Features Section */
.features {
padding: 4rem 0;
background: var(--bg-alt);
}
.section-title {
text-align: center;
font-size: 2.5rem;
margin-bottom: 3rem;
}
.features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
}
.feature-card {
background: white;
padding: 2rem;
border-radius: 12px;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.feature-icon {
width: 48px;
height: 48px;
background: var(--primary);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 1rem;
color: white;
font-size: 1.5rem;
}
.feature-card h3 {
margin-bottom: 0.5rem;
}
/* Mobile Menu */
.mobile-toggle {
display: none;
background: none;
border: none;
font-size: 1.5rem;
cursor: pointer;
}
@media (max-width: 768px) {
.nav-links {
display: none;
position: absolute;
top: 100%;
left: 0;
right: 0;
background: white;
flex-direction: column;
padding: 1rem;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
.nav-links.active {
display: flex;
}
.mobile-toggle {
display: block;
}
}
</style>
</head>
<body>
<a href="#main" class="skip-link">Skip to main content</a>
<header role="banner">
<nav class="container" aria-label="Main navigation">
<div class="logo">Logo</div>
<button class="mobile-toggle" aria-label="Toggle menu" aria-expanded="false">
☰
</button>
<ul class="nav-links">
<li><a href="#features">Features</a></li>
<li><a href="#pricing">Pricing</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<main id="main" role="main">
<section class="hero">
<div class="container">
<h1>Build Something Amazing</h1>
<p>The best solution for your business needs. Fast, reliable, and easy to use.</p>
<div class="hero-cta">
<a href="#signup" class="btn btn-primary">Get Started</a>
<a href="#demo" class="btn">Watch Demo</a>
</div>
</div>
</section>
<section id="features" class="features">
<div class="container">
<h2 class="section-title">Features</h2>
<div class="features-grid">
<div class="feature-card">
<div class="feature-icon" aria-hidden="true">⚡</div>
<h3>Fast Performance</h3>
<p>Lightning-fast speeds that keep your users engaged.</p>
</div>
<div class="feature-card">
<div class="feature-icon" aria-hidden="true">🔒</div>
<h3>Secure by Default</h3>
<p>Enterprise-grade security built into every layer.</p>
</div>
<div class="feature-card">
<div class="feature-icon" aria-hidden="true">📊</div>
<h3>Powerful Analytics</h3>
<p>Gain insights with comprehensive analytics tools.</p>
</div>
</div>
</div>
</section>
</main>
<footer role="contentinfo">
<div class="container">
<p>&copy; 2025 Company Name. All rights reserved.</p>
</div>
</footer>
<script>
(function() {
'use strict';
const toggle = document.querySelector('.mobile-toggle');
const nav = document.querySelector('.nav-links');
if (toggle && nav) {
toggle.addEventListener('click', function() {
const expanded = this.getAttribute('aria-expanded') === 'true';
this.setAttribute('aria-expanded', !expanded);
nav.classList.toggle('active');
});
}
})();
</script>
</body>
</html>
```
## Form Template
### Accessible Contact Form
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact Us</title>
<style>
/* Add styles from above template */
.form-container {
max-width: 600px;
margin: 4rem auto;
padding: 2rem;
background: white;
border-radius: 12px;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
.form-field {
margin-bottom: 1.5rem;
}
label {
display: block;
margin-bottom: 0.5rem;
font-weight: 600;
color: var(--text);
}
label .required {
color: #DC2626;
}
input,
textarea,
select {
width: 100%;
padding: 0.75rem;
border: 2px solid #E5E7EB;
border-radius: 6px;
font-size: 1rem;
font-family: inherit;
transition: border-color 0.2s;
}
input:focus,
textarea:focus,
select:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}
input[aria-invalid="true"],
textarea[aria-invalid="true"] {
border-color: #DC2626;
}
.hint {
display: block;
margin-top: 0.25rem;
font-size: 0.875rem;
color: var(--text-light);
}
.error {
display: block;
margin-top: 0.25rem;
font-size: 0.875rem;
color: #DC2626;
}
.success {
padding: 1rem;
background: #D1FAE5;
color: #065F46;
border-radius: 6px;
margin-bottom: 1rem;
}
</style>
</head>
<body>
<main class="form-container">
<h1>Contact Us</h1>
<p>Fill out the form below and we'll get back to you soon.</p>
<form id="contact-form" novalidate>
<div class="form-field">
<label for="name">
Name <span class="required" aria-label="required">*</span>
</label>
<input
type="text"
id="name"
name="name"
required
aria-required="true"
aria-describedby="name-error"
autocomplete="name"
/>
<span id="name-error" class="error" role="alert" hidden>
Please enter your name
</span>
</div>
<div class="form-field">
<label for="email">
Email <span class="required" aria-label="required">*</span>
</label>
<input
type="email"
id="email"
name="email"
required
aria-required="true"
aria-describedby="email-hint email-error"
autocomplete="email"
/>
<span id="email-hint" class="hint">
We'll never share your email with anyone else.
</span>
<span id="email-error" class="error" role="alert" hidden>
Please enter a valid email address
</span>
</div>
<div class="form-field">
<label for="message">
Message <span class="required" aria-label="required">*</span>
</label>
<textarea
id="message"
name="message"
rows="5"
required
aria-required="true"
aria-describedby="message-error"
></textarea>
<span id="message-error" class="error" role="alert" hidden>
Please enter a message
</span>
</div>
<button type="submit" class="btn btn-primary">Send Message</button>
</form>
</main>
<script>
(function() {
'use strict';
const form = document.getElementById('contact-form');
form.addEventListener('submit', function(e) {
e.preventDefault();
// Clear previous errors
const errors = form.querySelectorAll('.error');
errors.forEach(error => error.hidden = true);
const fields = form.querySelectorAll('input, textarea');
fields.forEach(field => field.removeAttribute('aria-invalid'));
let isValid = true;
// Validate each required field
const name = document.getElementById('name');
if (!name.value.trim()) {
showError(name, 'name-error');
isValid = false;
}
const email = document.getElementById('email');
if (!email.value.trim() || !isValidEmail(email.value)) {
showError(email, 'email-error');
isValid = false;
}
const message = document.getElementById('message');
if (!message.value.trim()) {
showError(message, 'message-error');
isValid = false;
}
if (isValid) {
// Submit form
console.log('Form is valid, submitting...');
showSuccess();
}
});
function showError(field, errorId) {
field.setAttribute('aria-invalid', 'true');
const error = document.getElementById(errorId);
error.hidden = false;
field.focus();
}
function isValidEmail(email) {
return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
}
function showSuccess() {
const success = document.createElement('div');
success.className = 'success';
success.setAttribute('role', 'status');
success.textContent = 'Thank you! Your message has been sent.';
form.insertBefore(success, form.firstChild);
form.reset();
}
})();
</script>
</body>
</html>
```
## Dashboard Template
### Admin Dashboard Layout
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dashboard</title>
<style>
/* Base styles */
:root {
--sidebar-width: 250px;
--header-height: 60px;
}
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
background: #F3F4F6;
}
/* Layout Grid */
.dashboard {
display: grid;
grid-template-areas:
"sidebar header"
"sidebar main";
grid-template-columns: var(--sidebar-width) 1fr;
grid-template-rows: var(--header-height) 1fr;
min-height: 100vh;
}
/* Sidebar */
.sidebar {
grid-area: sidebar;
background: #1F2937;
color: white;
padding: 1rem;
}
.sidebar nav ul {
list-style: none;
padding: 0;
}
.sidebar nav a {
display: block;
padding: 0.75rem 1rem;
color: #D1D5DB;
text-decoration: none;
border-radius: 6px;
transition: background 0.2s;
}
.sidebar nav a:hover,
.sidebar nav a[aria-current="page"] {
background: #374151;
color: white;
}
/* Header */
.header {
grid-area: header;
background: white;
border-bottom: 1px solid #E5E7EB;
padding: 0 2rem;
display: flex;
align-items: center;
justify-content: space-between;
}
/* Main Content */
.main-content {
grid-area: main;
padding: 2rem;
}
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1.5rem;
margin-bottom: 2rem;
}
.stat-card {
background: white;
padding: 1.5rem;
border-radius: 8px;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.stat-value {
font-size: 2rem;
font-weight: 700;
color: #1F2937;
}
.stat-label {
color: #6B7280;
font-size: 0.875rem;
}
@media (max-width: 768px) {
.dashboard {
grid-template-areas:
"header"
"main";
grid-template-columns: 1fr;
grid-template-rows: var(--header-height) 1fr;
}
.sidebar {
position: fixed;
left: -250px;
top: 0;
bottom: 0;
z-index: 100;
transition: left 0.3s;
}
.sidebar.active {
left: 0;
}
}
</style>
</head>
<body>
<div class="dashboard">
<aside class="sidebar" role="navigation" aria-label="Main navigation">
<h2>Dashboard</h2>
<nav>
<ul>
<li><a href="#overview" aria-current="page">Overview</a></li>
<li><a href="#analytics">Analytics</a></li>
<li><a href="#users">Users</a></li>
<li><a href="#settings">Settings</a></li>
</ul>
</nav>
</aside>
<header class="header" role="banner">
<h1>Dashboard Overview</h1>
<button class="mobile-menu-toggle" aria-label="Toggle menu">☰</button>
</header>
<main class="main-content" role="main">
<div class="stats-grid">
<div class="stat-card">
<div class="stat-value">1,234</div>
<div class="stat-label">Total Users</div>
</div>
<div class="stat-card">
<div class="stat-value">$12,345</div>
<div class="stat-label">Revenue</div>
</div>
<div class="stat-card">
<div class="stat-value">98.5%</div>
<div class="stat-label">Uptime</div>
</div>
</div>
</main>
</div>
</body>
</html>
```
These templates provide solid starting points for common web design patterns with accessibility and responsiveness built in.