frontend-design

Create distinctive user interfaces with typography, layout, and interaction choices.

140|20|Updated Jun 20, 2026
One-click install
npx skills add https://github.com/zekiriabd/SDD-Pro --skill frontend-design-zekiriabd
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/zekiriabd/SDD-Pro/tree/main/.sdd/skills/frontend-design
Command: npx skills add https://github.com/zekiriabd/SDD-Pro --skill frontend-design-zekiriabd

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps create interfaces with a distinctive visual identity instead of relying on generic, templated layouts, palettes, typography, and interaction patterns.

Core Features & Use Cases

  • Aesthetic Direction: Establishes deliberate choices for color, typography, layout, motion, and visual hierarchy.
  • Design Planning: Guides brainstorming, token systems, ASCII wireframes, critique, iteration, and implementation planning.
  • Content and Usability: Improves interface copy, accessibility, responsive behavior, keyboard focus, reduced-motion support, and error or empty states.
  • Use Case: Use it to shape a product landing page or application interface around a memorable visual concept that reflects its subject, audience, and primary user goal.

Quick Start

Use the frontend-design skill to create a distinctive, responsive interface for the specified product brief with an intentional visual direction and one justified signature element.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I design a distinctive user interface instead of using generic templates?

To design a distinctive user interface, you need a concrete subject, audience, and a compact design token system to establish deliberate aesthetic direction for typography, layout, and visual hierarchy. This ensures the final interface reflects its primary user goal rather than generic templated patterns.

What is the process for creating an intentional visual identity for a product landing page?

Creating an intentional visual identity involves brainstorming aesthetic direction, establishing a design token system, generating ASCII wireframes, and performing iterative critique. This process shapes a memorable visual concept around your product's specific subject and target audience.

Can I build responsive web pages that support keyboard focus and reduced-motion?

Yes, you can build responsive web pages that explicitly support keyboard focus, reduced-motion, and clear user-centered copy. The design process incorporates accessibility, responsive behavior, and error or empty states directly into the interface planning.

What do I need to start a UI redesign with an intentional visual direction?

To start a UI redesign, you need a concrete product brief specifying the subject and audience. The design process then applies an intentional visual direction and at least one justified signature element to replace generic layouts.

Does this approach to frontend design work for application interfaces and visual redesigns?

Yes, this frontend design approach works for web pages, product interfaces, landing pages, and visual redesigns. It requires a concrete subject and audience to guide deliberate typography, layout, content, and interaction choices.