skills.rest
TarunTeja44
TarunTeja44COMMUNITY
Explore all skills by this author →
GitHub

design-consultation

Generates a complete design system proposal and DESIGN.md through guided consultation.

1|Updated Feb 22, 2026
Search Tags:#typography#design system#color palette#brand guidelines#ui design#design.md#preview page
One-click install
npx skills add https://github.com/TarunTeja44/portfolio --skill design-consultation-tarunteja44
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-consultation
Source: https://github.com/TarunTeja44/portfolio/tree/main/.agents/skills/gstack-design-consultation
Command: npx skills add https://github.com/TarunTeja44/portfolio --skill design-consultation-tarunteja44

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Starting a new project's UI without a design system leads to inconsistent typography, ad-hoc colors, and generic-looking interfaces. This Skill acts as a design consultant that researches your product's landscape, proposes a coherent design system, and produces DESIGN.md as the project's design source of truth. ## Core Features & Use Cases - Complete Design System Proposal: Proposes aesthetic direction, typography, color palette with hex values, layout, spacing, and motion as one coherent package with safe choices and deliberate creative risks. - Competitive Research: Uses WebSearch and an optional headless browse binary to analyze what top products in your space are doing visually before proposing. - Font & Color Preview Page: Generates a self-contained HTML preview with real font specimens, palette swatches, sample UI components, and realistic product mockups with light/dark toggle. - Use Case: You are starting a new web app with no brand guidelines. Run the consultation, review the preview page in your browser, and get a DESIGN.md your whole team can build against. ## Quick Start Ask the assistant to run the design consultation to create a design system and DESIGN.md for this 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 design system for a new web project?▼

Run the design consultation, which gathers product context, optionally researches competitors in your space, and proposes a full system covering fonts, colors, layout, spacing, and motion. It then writes DESIGN.md to your repo root as the design source of truth.

What does the design consultation preview page include?▼

The preview is a single self-contained HTML file with Google Fonts loaded, palette swatches with hex values, sample buttons, cards, forms, and alerts, plus realistic product mockups and a light/dark mode toggle. It opens in your browser automatically.

Can I use this if my project already has a DESIGN.md?▼

Yes. The skill detects an existing DESIGN.md during pre-checks and asks whether you want to update it, start fresh, or cancel. For inferring a system from an existing live site, use the plan-design-review skill instead.

Does the design research work without the browse binary?▼

Yes. Visual research via the headless browse binary is optional. Without it, the skill falls back to WebSearch results, and if search is also unavailable it relies on built-in design knowledge, so the workflow always completes.

What fonts does the design consultation avoid recommending?▼

It blacklists fonts like Papyrus, Comic Sans, and Lobster, and avoids overused defaults such as Inter, Roboto, Arial, and Poppins as primary choices. It also steers away from common AI-generated design clichés like purple gradient accents.

Related Skills

Explore More Design & Creative Skills→
westnwestn
1

office-hours

Converts vague product ideas into a structured design brief and actionable plan via guided office-hours workflow.

Community
Advanced
vikingokftvikingokft

stitch::extract-design-md

Extract a Stitch-compatible DESIGN.md from frontend source code.

Official
Intermediate
DriveConnect-alphaDriveConnect-alpha
1

web-design-guidelines

Audit UI code against Web Interface Guidelines for accessibility and performance gaps.

Official
Intermediate
tiantangcao1980-webtiantangcao1980-web
4

bootstrap

Create responsive interfaces with Bootstrap 5 components and Sass theming.

Community
Intermediate