frontend-design

Design distinctive frontend interfaces with typography, layout, and motion choices.

10|Updated Jul 7, 2026
One-click install
npx skills add https://github.com/joannanowakowska/plannning-poker-app --skill frontend-design-joannanowakowska
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/joannanowakowska/plannning-poker-app/tree/main/.github/skills/frontend-design
Command: npx skills add https://github.com/joannanowakowska/plannning-poker-app --skill frontend-design-joannanowakowska

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps you design and reshape user interfaces that feel intentional, original, and aligned with the product instead of looking like a generic template.

Core Features & Use Cases

  • Distinctive visual direction: Choose palette, typography, spacing, and layout with a clear point of view.
  • Subject-led design decisions: Ground the interface in the product's real world, audience, and primary job.
  • Intentional UI execution: Build hero sections, hierarchy, and motion that support the experience rather than decorating it.
  • Use case: A product team wants a landing page for a planning tool that feels credible and memorable, so the Skill can define a strong design system and page structure that matches the brand.

Quick Start

Ask for a distinctive frontend design plan for your interface, including palette, typography, layout, and one signature visual idea.

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 frontend UI that doesn't look like a generic template?

To design a distinctive frontend UI, you need a deliberate visual identity that grounds palette, typography, and layout choices in your product's real-world subject matter and audience, ensuring the interface feels specific and intentional rather than generic.

What is the best way to create a memorable landing page design system?

Creating a memorable landing page design system involves defining a compact set of rules for hierarchy, spacing, and motion that align with your brand's point of view, allowing you to build credible hero sections and responsive product experiences.

How do I choose typography and motion for a distinctive product screen?

Choosing typography and motion for a product screen requires grounding these visual identity decisions in the product's primary job and audience, applying intentional execution that supports the user experience rather than simply decorating the layout.

Can I build accessibility-aware responsive layouts for web pages using this approach?

Yes, you can build accessibility-aware responsive layouts for web pages. This approach ensures frontend interfaces include responsive execution and accessibility-aware details while maintaining a strong visual identity and deliberate layout structure.

Do I need a compact design system to execute distinctive frontend design?

Yes, a compact design system is required to execute distinctive frontend design. It provides the foundational rules for palette, typography, and spacing needed to translate subject-led design decisions into a cohesive, responsive interface.