skills.rest
marcus
marcusCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

site-design-director

Guide designers from strategic brief to production-ready website design.

3|1|Updated Dec 23, 2025
Search Tags:#typography#design#layout#website#design-system#motion
One-click install
npx skills add https://github.com/marcus/marcus-skills --skill site-design-director
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: site-design-director
Source: https://github.com/marcus/marcus-skills/tree/main/skills/site-design-director
Command: npx skills add https://github.com/marcus/marcus-skills --skill site-design-director

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

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.

Frequently Asked Questions about site-design-director

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a design system for a SaaS landing page from scratch?▼

To create a design system for a SaaS landing page, define a strategic brief, select a design spine, and specify typography and layout preferences to generate coherent color tokens, motion guidelines, and component inventories.

What is a website design spine and how does it guide layout rhythm?▼

A website design spine is a foundational structural choice that guides layout rhythm, typography systems, and motion guidelines, ensuring all components and grids align into a coherent design direction for marketing sites or dashboards.

Can I generate production-ready HTML and CSS tokens from a design brief?▼

Yes, you can generate production-ready HTML and CSS tokens by translating strategic intent into a design direction, which outputs standardized implementation patterns, color tokens, and layout grids suitable for React code.

Does this website design process work for portfolios and marketing sites?▼

Yes, this website design process works for portfolios and marketing sites by applying a repeatable workflow that delivers content architecture, typography systems, and full component inventories tailored to those specific site types.

What is the best way to align stakeholders on website typography and color systems?▼

The best way to align stakeholders on website typography and color systems is to start with a fast design brief, establishing goals, constraints, and success criteria before selecting design spines and generating standardized tokens.

Related Skills

Explore More Design & Creative Skills→
jasonmichaelbell78-creatorjasonmichaelbell78-creator

brainstorm

Generate at least three ideation directions with a BRAINSTORM.md artifact.

Community
Advanced
open-gsdopen-gsd
1.0k

frontend-design

Convert design briefs into frontend interfaces with typography, color tokens, and responsive layouts.

Official
Intermediate
wasintohwasintoh
90

design-mastery

Selects design patterns and generates branded UI for specified business types.

Community
Basic
OpenElementsLabsOpenElementsLabs

implement-design

Translate Figma designs into UI code using design tokens and validation.

Official
Advanced