skills.rest
NaKMiers
NaKMiersCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

design-consultation

Propose a complete design system and generate DESIGN.md with typography, color, layout, spacing, and motion.

1|2|Updated Jan 4, 2024
Search Tags:#typography#design#branding#color#ui-design#design-system#design-consultation
One-click install
npx skills add https://github.com/NaKMiers/Port4lio --skill design-consultation-nakmiers
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-consultation
Source: https://github.com/NaKMiers/Port4lio/tree/main/.agents/skills/design-consultation
Command: npx skills add https://github.com/NaKMiers/Port4lio --skill design-consultation-nakmiers

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Design leaders struggle to translate product goals into a cohesive visual language. This skill understands your product, researches the landscape, and proposes a complete design system covering typography, color, layout, spacing, and motion. It generates font+color preview pages and creates DESIGN.md as the project's design source of truth. For existing sites, use /plan-design-review to infer the system. Use when you need brand guidelines or DESIGN.md.

Core Features & Use Cases

  • Proposes a complete design system that covers aesthetics, typography, color, layout, spacing, and motion.
  • Generates font+color preview pages and DESIGN.md as the design source of truth.
  • Works for new UI projects or revamps, and can infer systems from existing sites via plan-design-review.

Quick Start

Design and deliver a complete design system for my product and generate a DESIGN.md with typography, color palette, layout, spacing, and motion.

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 UI project?▼

To create a complete design system, you need to define typography, color, layout, spacing, and motion guidelines. This process researches the visual landscape and generates a DESIGN.md file to serve as the project's single source of truth for brand consistency.

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

Yes, you can infer a design system from an existing site by running a plan-design-review. This analyzes the current visual landscape to extract typography, color, and spacing rules, generating a DESIGN.md to document the inferred system.

What is a DESIGN.md file used for in product development?▼

A DESIGN.md file acts as the source of truth for a project's design system. It documents typography, color palette, layout, spacing, and motion guidelines, ensuring developers and designers maintain brand consistency across new UI projects or revamps.

What's the best way to document brand guidelines for both print and UI design?▼

Documenting brand guidelines requires defining typography, color, layout, spacing, and motion. Generating font and color preview pages alongside a comprehensive DESIGN.md file ensures the design system is practically validated and accessible for UI updates.

Do I need prior design assets to generate a color palette and typography previews?▼

No, prior design assets are not required. The system can understand your product goals and research the visual landscape to propose a complete design system, generating font and color previews from scratch for new UI projects or brand updates.

Why does my design system lack consistency across different UI components?▼

Your design system lacks consistency because it lacks a documented source of truth. Generating a DESIGN.md file that explicitly defines typography, color, layout, spacing, and motion rules ensures visual alignment across all product interfaces.

Related Skills

Explore More Design & Creative Skills→
batdorj-sbatdorj-s

product-marketing

Create and maintain a product marketing context document from codebase and marketing materials.

Community
Advanced
I194I194
9

design-consultation

Generate design tokens and a DESIGN.md for product design systems.

Community
Advanced
omanjayaomanjaya

frontend-design

Provide typography, color, spacing, and motion guidelines for web UI design.

Community
Intermediate
mrodrigues1mrodrigues1

visual-design-foundations

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

Community
Intermediate