frontend-design

Guide UI/UX design with deliberate aesthetic choices, typography, and structure.

Updated Nov 18, 2025
One-click install
npx skills add https://github.com/bowoxdaily/SistemAbsensi-ptmingda --skill frontend-design-bowoxdaily
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/bowoxdaily/SistemAbsensi-ptmingda/tree/main/.windsurf/skills/frontend-design
Command: npx skills add https://github.com/bowoxdaily/SistemAbsensi-ptmingda --skill frontend-design-bowoxdaily

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill helps create distinctive visual identities for UI/UX design, breaking away from templated defaults and guiding aesthetic direction.

Core Features & Use Cases

  • Distinctive Aesthetics: Make deliberate choices in palette, typography, and layout.
  • Risk-Taking: Encourage one aesthetic risk per project.
  • Subject-Centric Design: Base design on subject, audience, and the page's single job.
  • Typography: Pair typefaces and set scales to carry page personality.
  • Structural Devices: Use numbering, dividers, and labels to encode content truthfully.
  • Motion: Apply motion deliberately to enhance user experience.
  • Content: Craft copy to aid understanding and usability.
  • Process: Follow a structured process of brainstorming, planning, building, and critique.
  • Restraint: Focus boldness on one signature element.
  • User-Centric: Design from the end user's perspective.

Quick Start

Generate a UI/UX design concept for a new app, starting with the subject, audience, and page's job. Define color, type, layout, and a 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 create a distinctive UI/UX design that breaks away from templated defaults?

To create a distinctive UI/UX design, make deliberate aesthetic choices in color palette, typography, and layout, and take at least one aesthetic risk per project to establish visual distinctiveness.

What is the best way to base user experience design on specific subject matter?

Subject-centric user experience design requires defining the specific audience and the single job the page must accomplish before determining layout, typography, and structural devices.

How do I use typography to carry personality in a visual identity?

Typography carries visual identity personality by deliberately pairing typefaces and setting typographic scales that align with the subject matter and user needs.

What structured design process should I follow for UI/UX planning and iteration?

A structured UI/UX design process involves brainstorming, planning, building, and critique, focusing bold aesthetic choices on one signature element while maintaining restraint elsewhere.

Can I apply motion and structural devices to enhance user experience?

Yes, applying motion deliberately enhances user experience, while structural devices like numbering, dividers, and labels encode content truthfully to aid user understanding.

How do I craft UI copy to improve usability and user-centric design?

Crafting UI copy to improve usability involves writing content that aids understanding from the end user's perspective, ensuring the page's single job is clearly communicated.