web-design-knowledge-claude-code-skill
🥈SilverAI skill provides expert web design guidance using a curated library of design books. Uses RAG with ChromaDB and sentence-transformers for semantic search. Benefits operations teams by automating design knowledge retrieval.
3030Updated 2mo ago
Intermediate30min to implementautomation
Saves ~90 min per use
Quick InstallView Source
git clone https://github.com/Zie619/web-design-knowledge-claude-code-skill.gitWorks with:
Claude
Overview
About This Skill
The Web Design Knowledge RAG Skill equips Claude Code with instant access to expert guidance from 20 professional design books covering 12 specialized topics: color theory, typography, layout, UX principles, UI patterns, responsive design, CSS techniques, visual hierarchy, branding, navigation, forms, and performance optimization. It uses ChromaDB and sentence-transformers for semantic search across 9,500+ indexed passages, eliminating the need for API keys through local embeddings. The skill provides four specialized MCP tools for querying design knowledge by topic, including dedicated tools for color advice, layout patterns, and UX reviews. Installation requires Python 3.10+, ~500MB disk space for indexed data, and optional GPU acceleration for faster queries. Once configured, it enables designers and developers to ask natural-language questions about design best practices and receive evidence-based recommendations grounded in professional design literature.
How to Use
Extract the skill to ~/.claude/skills/, create a Python virtual environment, install dependencies, and register the MCP server using the claude mcp add command with the provided ChromaDB path. Restart Claude Code and verify the server is connected via claude mcp list. Once installed, ask design questions naturally in Claude Code and the skill automatically retrieves relevant guidance from the indexed design books.
Use Cases
Getting color palette recommendations for specific app types or industries
Finding layout patterns and grid systems for dashboards, landing pages, or e-commerce
Reviewing UX best practices for checkout flows, forms, and navigation patterns
Resolving typography hierarchy questions for branding and visual consistency
Setup & Installation
Quick Install
No install command available. Check the GitHub repository for manual installation instructions.
Alternative Install (Git Clone)
git clone https://github.com/Zie619/web-design-knowledge-claude-code-skillRequirements
- Claude Code or compatible AI agent
- Works with: Claude
Quick Start Guide
1
Install the Skill
Copy the install command above and run it in your terminal.
2
Open Your AI Agent
Launch Claude Code, Cursor, or your preferred AI coding agent.
3
Try It Out
Use the prompt template or examples below to test the skill.
4
Customize
Adapt the skill to your specific use case and workflow.
Usage Examples
Prompt Template
I'm designing a [TYPE] website for [INDUSTRY]. What are the key design principles I should follow? Provide specific examples of successful [TYPE] websites in [INDUSTRY] and explain why they work. Also, suggest 3-5 design tools or frameworks that would be particularly useful for this project.
Example Output
Based on your request for a healthcare e-commerce website, here are key design principles to follow: 1) Prioritize accessibility with high contrast colors and readable fonts, 2) Build trust with clear security badges and professional imagery, 3) Simplify navigation with intuitive category structures. Successful examples include HealthPost (uses a clean, scannable layout with prominent product filters) and MedSupplyPro (features a robust search system with medical terminology support). For your project, consider these tools: Figma for collaborative wireframing, Webflow for visual development, and MUI for pre-designed healthcare UI components. Remember to implement WCAG 2.1 AA standards for maximum accessibility.
Apply to these tools
Browse all toolsEdge
AI-powered patent assistant
Automa
Automate your browser workflows effortlessly
Claude
AI assistant built for thoughtful, nuanced conversation
Squarespace
Create stunning websites effortlessly with customizable templates and e-commerce tools.
Wix
The new way to create a website
Rive
Create and collaborate on interactive animations with powerful, user-friendly tools.
Compatible MCP servers
Browse all MCP servers
Find the right skills for your stack
Take a free 3-minute scan and get personalized AI skill recommendations.
Take free scan