skills.rest
agwacom
agwacomOFFICIAL
Explore all skills by this author →
GitHub

avad-design-consultation

Plan a complete design system with typography, color, layout, and DESIGN.md.

Updated Mar 18, 2026
Search Tags:#typography#design-system#design-docs#color-palette#design-consultation#design-preview
One-click install
npx skills add https://github.com/agwacom/avadbot --skill avad-design-consultation
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: avad-design-consultation
Source: https://github.com/agwacom/avadbot/tree/main/skills/avad-design-consultation
Command: npx skills add https://github.com/agwacom/avadbot --skill avad-design-consultation

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps teams create a cohesive design system when launching new products or redesigning existing ones, ensuring a single source of truth for design decisions and consistent execution across teams.

Core Features & Use Cases

  • Propose a complete design system including aesthetic, typography, color, spacing, and a DESIGN.md source of truth.
  • Generate DESIGN.md and, if relevant, a CLAUDE.md note to guide team governance and decision-making.
  • If a DESIGN.md already exists, prompt the user to update it, start fresh, or cancel, and orchestrate Phase-driven workflows to align stakeholders.
  • Provide a ready-to-preview design page to visualize typography, color, spacing, and potential UI layouts before any code is written.
  • Adapt outputs for web apps, dashboards, marketing sites, or internal tools, based on the project context.

Quick Start

Provide your product context and I will deliver DESIGN.md plus a live preview to guide your design system.

Frequently Asked Questions about avad-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 web app?▼

A DESIGN.md file acts as a project-wide source of truth for design decisions, documenting aesthetic choices, typography, color, and spacing to ensure consistent execution across teams during product launches or redesigns.

Can I generate a design preview before implementing the actual UI code?▼

Yes, you can generate a ready-to-preview design page that visualizes typography, color, spacing, and potential UI layouts, allowing you to demonstrate and validate the design system before writing any code.

What is the best way to document design governance for my development team?▼

If a DESIGN.md already exists, the Skill detects it and prompts you to either update the existing document, start fresh with a new proposal, or cancel the workflow entirely.

Does this design consultation workflow support marketing sites and internal tools?▼

Yes, this design consultation workflow adapts its outputs specifically for web apps, dashboards, marketing sites, and internal tools based on the project context you provide.

Related Skills

Explore More Design & Creative Skills→
hfadhlullahhfadhlullah

PRD Generator

Generate Product Requirements Documents through an interview process.

Community
Advanced
fengjutianfengjutian

stitch-design-taste

Generate DESIGN.md files defining visual and interaction standards for Google Stitch.

Community
Advanced
Nikhil2005menariyaNikhil2005menariya

awesome-design-md

Access curated DESIGN.md files to guide UI design.

Community
Basic
aditisharma0204aditisharma0204

creative-director

Define visual direction and create Figma design systems with moodboards, color palettes, and typography tokens.

Community
Advanced