skills.rest
lDuang
lDuangCOMMUNITY
Explore all skills by this author →
GitHub

frontend-design

Defines visual identity guidelines for UI projects from brand briefs.

Updated Jan 17, 2026
Search Tags:#typography#design#branding#ui#aesthetics#visual-identity
One-click install
npx skills add https://github.com/lDuang/mcp-skill-registry --skill frontend-design-lduang
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/lDuang/mcp-skill-registry/tree/main/skill/frontend-design
Command: npx skills add https://github.com/lDuang/mcp-skill-registry --skill frontend-design-lduang

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Guidance and structure for creating distinctive, intentional visual design in UI work, helping teams avoid templated defaults and establish a strong, ownable aesthetic.

Core Features & Use Cases

  • Clear design direction: palette, typography, layout decisions aligned to brief
  • Process-driven creativity: staged brainstorming, planning, critique, and build
  • Use Case: When starting a new product design brief, this Skill guides the design lead to articulate a unique visual identity and a plan to execute it.

Quick Start

Define a concrete brief for the product and choose a non-default palette and typography to anchor the design direction.

Frequently Asked Questions about frontend-design

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I establish a distinctive visual identity for a new UI project?▼

To establish a distinctive visual identity for a UI project, align palette, typography, and layout decisions with your brand brief to avoid templated defaults and ensure a strong, ownable aesthetic across all components.

What is the best way to maintain visual design consistency across UI pages?▼

Maintain visual design consistency across pages by applying established visual identity guidelines to design briefs, ensuring palette and typography decisions remain aligned during the brainstorming, critique, and build stages.

How do I structure the design workflow from brainstorming to final UI build?▼

Structure the UI design workflow by defining clear inputs and expected outputs for each stage, moving sequentially from initial brainstorming and planning through critique to the final build, supporting collaboration between designers and developers.

Does this approach help designers and developers collaborate on visual identity?▼

Yes, this approach helps designers and developers collaborate by applying structured visual identity guidelines across design briefs, ensuring consistent execution of pages, components, and interactions throughout the product development lifecycle.

When do I need to define a visual identity brief for my product design?▼

You need to define a visual identity brief when starting a new product design project to articulate a unique aesthetic direction, anchor non-default palette and typography choices, and guide the entire execution plan.

Related Skills

Explore More Design & Creative Skills→
SheshiyerSheshiyer

visual-identity-core

Generate a brand visual identity guide with color palettes, typography, logo rules, and imagery guidelines.

Community
Basic
quranquran
1.9k

frontend-design

Translate bold aesthetics into production-grade HTML/CSS/JS or React UI components.

Official
Advanced
soq123soq123

recreate-screenshot

Reproduce a UI screen from a screenshot with pixel-perfect fidelity.

Community
Intermediate
misty-stepmisty-step
13

frontend-design

Align typography, color, and layout to a subject and audience.

Official
Intermediate