site-design-director
CommunityDesign premium websites with strategy and code.
Authormarcus
Version1.0.0
Installs0
System Documentation
What problem does it solve?
The Site Design Director helps teams translate strategic intent into concrete site design directions and production-ready code, ensuring typography, layout systems, tokens, and implementation guidance are aligned and actionable.
Core Features & Use Cases
- Design Brief (Fast): quickly align goals, constraints, and success criteria with stakeholders.
- Design Spine & Systems: pick a spine and define typography, color, motion, and component inventory to build coherent design direction.
- Implementation-Oriented Outputs: deliver tokens, grids, and patterns suitable for production HTML/CSS/React code.
- Use Cases: redesign SaaS landing pages, portfolio sites, dashboards, and marketing sites, all with a repeatable process.
Quick Start
Define a design brief in 1–2 sentences, select Spine A/B/C/D, and specify typography and layout preferences to receive a complete design direction and implementation guidelines.
Dependency Matrix
Required Modules
None requiredComponents
references
💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: site-design-director Download link: https://github.com/marcus/marcus-skills/archive/main.zip#site-design-director Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.