skills.rest
yolopunk
yolopunkCOMMUNITY
Explore all skills by this author →
GitHub

design-consultation

Generate a complete design system and DESIGN.md with aesthetic, typography, color, layout, spacing, and motion guidelines.

Updated Apr 6, 2025
Search Tags:#typography#design#layout#color#design-system#motion#design-consultation
One-click install
npx skills add https://github.com/yolopunk/jedi --skill design-consultation-yolopunk
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-consultation
Source: https://github.com/yolopunk/jedi/tree/main/.claude/skills/gstack/design-consultation
Command: npx skills add https://github.com/yolopunk/jedi --skill design-consultation-yolopunk

SYSTEM DOCUMENTATION & REQUIREMENTS

## What problem does it solve?
Design processes are often scattered across briefs, briefs, and docs, leading to inconsistencies across product interfaces. This skill consolidates product context, research, and design decisions into a single DESIGN.md to establish a cohesive, scalable design system as the single source of truth.

## Core Features & Use Cases

  • Generates a complete design system (aesthetic, typography, color, layout, spacing, and motion) and outputs a centralized DESIGN.md for implementation.
  • Supports both new projects and existing sites, with guidance on how to infer or plan design systems.
  • Provides a reusable blueprint that teams can reference to align product teams and engineering.

### Quick Start
Create a complete DESIGN.md for the project based on the provided product context.

Frequently Asked Questions about design-consultation

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

FAQPage Schema
How do I create a complete design system for a new project?▼

A DESIGN.md file serves as a centralized design system document covering aesthetic, typography, color, layout, spacing, and motion guidelines. It acts as the single source of truth for product teams and engineering handoffs.

Can I generate design guidelines for an existing website?▼

Yes, you can generate design guidelines for an existing website. The process infers your current design system and consolidates the rules into a structured DESIGN.md for consistent future development.

What is the best way to document typography and color tokens for developer handoff?▼

The best way to document typography and color tokens for developer handoff is to consolidate them into a version-controlled DESIGN.md, ensuring engineering teams have a single source of truth for layout and spacing decisions.

Does this design system generation work without external competitor research?▼

Yes, design system generation works without external competitor research. You can rely entirely on internal product knowledge and context to plan and output your complete design guidelines.

Why do I need a DESIGN.md file for my product interface?▼

You need a DESIGN.md file to prevent inconsistencies across product interfaces. It consolidates scattered design briefs and decisions into a scalable, centralized document for team alignment.

Related Skills

Explore More Design & Creative Skills→
RenyEnnosRenyEnnos
1

design-md

Generate DESIGN.md design-system documentation from Stitch project assets.

Community
Advanced
viably-labsviably-labs

google-design-md

Lint DESIGN.md and export design tokens to CSS variables or framework formats.

Official
Intermediate
ZpankzZpankz
7

frontend-ui-ux

Guide frontend teams in aligning UI/UX decisions with design intent for interactive components.

Community
Intermediate
spontus-reachspontus-reach
1

figma-spacing-system

Generate tokenized spacing scales and responsive grid specifications for Figma design systems.

Official
Intermediate