skills.rest
zaeem-rafiq
zaeem-rafiqCOMMUNITY
Explore all skills by this author →
GitHub

design-consultation

Generate a design-system proposal, preview, and DESIGN.md from project context.

Updated Mar 28, 2026
Search Tags:#typography#design-system#color-system#design-documentation#design-consultation#design-preview#ui-coherence
One-click install
npx skills add https://github.com/zaeem-rafiq/tatheer-swift-sdk --skill design-consultation-zaeem-rafiq
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-consultation
Source: https://github.com/zaeem-rafiq/tatheer-swift-sdk/tree/main/.claude/skills/gstack/design-consultation
Command: npx skills add https://github.com/zaeem-rafiq/tatheer-swift-sdk --skill design-consultation-zaeem-rafiq

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Design teams struggle to establish a consistent, well-documented design system that guides product UI decisions and aligns cross-functional stakeholders.

Core Features & Use Cases

  • Phase-based workflow guidance from context to a finalized DESIGN.md and CLAUDE.md.
  • Proactive design-system ideation including aesthetic direction, typography, color, spacing, and motion with a preview page.
  • Hands-off Quick Start that translates project context into concrete design-system deliverables.

Quick Start

Provide your project context and I will generate a complete design-system proposal, a preview, and DESIGN.md.

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 new product?▼

You create a cohesive design system by following a phase-based workflow from project context to final documentation. This process generates a complete proposal covering typography, color, spacing, and motion, delivering a DESIGN.md file and a preview page.

What is included in design system documentation for product teams?▼

Design system documentation includes aesthetic direction, typography rules, a defined color system, spacing metrics, and motion guidelines. Final deliverables provide a comprehensive DESIGN.md for stakeholder alignment and a CLAUDE.md for implementation guidance.

Can I generate a design system for a web app and marketing site at the same time?▼

Yes, you can generate a design system for web apps, marketing sites, dashboards, and internal tools simultaneously. The workflow ensures UI coherence across these platforms by applying explicit QA and coherence checks during the proposal phase.

How do I start building a design system if I only have basic project context?▼

You provide your initial project context to trigger a hands-off quick start that translates it into concrete deliverables. The workflow performs pre-checks, research, and drill-downs to output a complete design-system proposal, preview, and DESIGN.md.

Why does my product UI lack consistency across different pages?▼

Your product UI lacks consistency because it is missing a well-documented design system to guide decisions and align cross-functional stakeholders. Establishing a formal system with defined typography, color, and spacing rules solves this fragmentation.

Related Skills

Explore More Design & Creative Skills→
bfree-trainerbfree-trainer
60

teach-impeccable

Capture project design context and persist it to AI configuration.

Official
Intermediate
sami-abdulsami-abdul
3

frontend-design

Outline and implement bold frontend design systems with typography, color, motion, and CSS.

Community
Advanced
nocnocgroupnocnocgroup

design-consultation

Plan and deliver a complete design system with DESIGN.md and a preview page.

Official
Advanced
mrodrigues1mrodrigues1

visual-design-foundations

Define visual design systems using typography, color, spacing, and iconography.

Community
Intermediate