skills.rest
KunCheng-He
KunCheng-HeCOMMUNITY
Explore all skills by this author →
GitHub

frontend-design

Plan visual design systems with color palettes, typography scales, and layout structures.

8|3|Updated Apr 18, 2026
Search Tags:#typography#design#branding#ui#frontend#visual-identity
One-click install
npx skills add https://github.com/KunCheng-He/kk-ai --skill frontend-design-kuncheng-he
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/KunCheng-He/kk-ai/tree/main/skills/shared/frontend-design
Command: npx skills add https://github.com/KunCheng-He/kk-ai --skill frontend-design-kuncheng-he

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill addresses the tendency for AI-generated designs to default to generic, templated aesthetics, helping you create unique visual identities that feel bespoke and intentional.

Core Features & Use Cases

  • Visual Identity Planning: Develops a cohesive token system including color palettes, typography, and layout concepts.
  • Design Critique & Refinement: Provides a structured process for self-critique and iterative improvement to ensure high-quality, disciplined output.
  • Use Case: When building a landing page for a niche product, use this skill to move beyond standard cream-background-and-serif-font defaults to create a layout that reflects the specific subject matter and audience.

Quick Start

Use the frontend-design skill to generate a design plan for a new landing page for a high-end coffee subscription service.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I create a custom UI visual identity without defaulting to generic templates?▼

To create a custom UI visual identity, use a structured design system approach that develops bespoke color palettes, typography scales, and layout structures tailored to your specific project brief. This ensures your web interface feels intentional rather than templated.

What is the best way to plan a cohesive design token system for a web interface?▼

The best way to plan a cohesive design token system is to iteratively map out custom color palettes and typography scales, followed by a structured self-critique process to refine the aesthetic choices for your specific audience.

How does design critique and iterative improvement work for frontend visual design?▼

Design critique for frontend visual design works through a structured self-critique process that evaluates layout concepts against the project brief, ensuring disciplined output and high-quality refinement of your visual identity.

Can I generate a specific visual design system for a niche product landing page?▼

Yes, you can generate a specific visual design system for a niche product landing page by focusing on subject-specific aesthetic choices, moving beyond standard defaults to reflect the unique subject matter and target audience.

Why does my generated web interface design look generic and templated?▼

Your generated web interface design looks generic because it defaults to standard aesthetics rather than using intentional visual identity planning. You need custom color palettes, typography scales, and layout structures tailored to your specific brief.

Related Skills

Explore More Design & Creative Skills→
dtsongdtsong
1

intake-skill

Transform natural language project descriptions into structured engagement briefs.

Community
Advanced
robertlupo1997robertlupo1997

frontend-design

Design frontend systems with HTML/CSS/JS or framework code.

Community
Advanced
a747895159a747895159

ui-design-system

Generate design tokens, typography scaling, and component documentation for UI systems.

Community
Intermediate
pengelbrechtpengelbrecht
6

frontend-design

Design production-grade frontend interfaces with cohesive typography, theming tokens, and accessibility.

Community
Advanced