skills.rest
mrkhachaturov
mrkhachaturovCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

design-consultation

Plan and implement a cohesive design system with DESIGN.md and visual guidelines.

Updated Mar 26, 2026
Search Tags:#typography#design-system#color-palette#design-automation#ui-guidelines#design-consultation
One-click install
npx skills add https://github.com/mrkhachaturov/rkstack --skill design-consultation-mrkhachaturov
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-consultation
Source: https://github.com/mrkhachaturov/rkstack/tree/main/skills/design-consultation
Command: npx skills add https://github.com/mrkhachaturov/rkstack --skill design-consultation-mrkhachaturov

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Design teams and product squads often struggle to define a cohesive visual language and keep design decisions in sync across products. This skill collects discovery, decision-making, and delivery into a single, maintainable DESIGN.md that serves as the project’s design-source of truth.

Core Features & Use Cases

  • Research landscape and landscape-wide patterns to ground typography, color, spacing, and layout decisions.
  • Propose a complete design system (aesthetic, typography, color, layout, spacing, motion) and generate a DESIGN.md that acts as the living source of truth.
  • Create a preview page to demonstrate the system in action, and update CLAUDE.md with guidance to maintain coherence and safety in future decisions.
  • For existing sites, infer a design system via /plan-design-review or start fresh to establish STYLE GUIDELINES.

Quick Start

Ask the design-consultation skill to generate a complete DESIGN.md for your project.

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 cohesive design system for a web app?▼

A design system unifies typography, color palettes, spacing, and motion into a single DESIGN.md document, serving as the living source of truth to keep visual decisions synchronized across product squads and web apps.

How do I document UI guidelines and design decisions in a maintainable way?▼

Documenting UI guidelines requires generating a DESIGN.md file that captures typography, color, and layout rules, alongside a live preview page and updated project metadata to enforce safety checks and future design coherence.

Can I infer a design system from an existing website?▼

Yes, you can infer a design system from an existing site by running a design review to extract visual patterns and establish style guidelines, then compiling them into a comprehensive DESIGN.md document.

What is the best way to automate design system generation for dashboards and internal tools?▼

Automating design system generation uses a phased workflow to gather context, propose aesthetics, and deliver a complete visual guideline set, a preview page, and a DESIGN.md file tailored for dashboards and internal tools.

Does this design consultation approach update project documentation automatically?▼

Yes, the design consultation process automatically updates CLAUDE.md with decision guidance and structured metadata to maintain visual coherence and enforce safety checks for future design updates.

Related Skills

Explore More Design & Creative Skills→
HuijiroHuijiro

impeccable-teach-impeccable

Gather design context and persist it to a config file.

Community
Basic
erclxerclx
2

claude-design-extract

Extract visual design tokens from source code into a structured DESIGN.md file.

Community
Intermediate
ChildoftheVibeChildoftheVibe

minimalist-ui

Generate CSS tokens and layout rules for minimalist bento-grid UI systems.

Community
Advanced
AradotsoAradotso
3

figma-mcp-bridge

Stream live Figma document data to AI tools via MCP.

Official
Intermediate