skills.rest
Badar-e-Alam
Badar-e-AlamCOMMUNITY
Explore all skills by this author →
𝕏@badaralam40GitHub

frontend-design

Create distinctive frontend visual designs with a two-pass planning process.

Updated Apr 18, 2026
Search Tags:#typography#visual identity#ux writing#ui design#frontend design#design critique#layout planning
One-click install
npx skills add https://github.com/Badar-e-Alam/KODA --skill frontend-design-badar-e-alam
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/Badar-e-Alam/KODA/tree/main/coding_agent/skills/frontend-design
Command: npx skills add https://github.com/Badar-e-Alam/KODA --skill frontend-design-badar-e-alam

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps when a UI design feels generic, overused, or disconnected from the actual subject matter. It guides you toward a distinctive visual direction with intentional choices in palette, typography, layout, motion, and interface copy.

Core Features & Use Cases

  • Distinctive Visual Direction: Defines a subject-specific design thesis instead of defaulting to common AI-generated aesthetics.
  • Structured Design Planning: Uses a two-pass process covering color tokens, type pairings, layout concepts, ASCII wireframes, and a memorable signature element before implementation.
  • Built-in Self-Critique: Evaluates whether the concept feels too generic, revises weak choices, and encourages restraint so one bold idea stands out.
  • UX Writing Guidance: Improves labels, actions, empty states, and errors so interface language is clear, active, and consistent.
  • Use Case: Ideal for designing a landing page, product interface, or redesign concept where the goal is to create a strong, non-templated identity tied to a specific audience and subject.

Quick Start

Ask the frontend-design skill to create a two-pass visual design plan for your product page, including a subject-specific palette, typography system, layout concept, signature element, and critique before any code is written.

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 visual identity for my UI without using generic templates?▼

To create a distinctive visual identity for your UI, use a two-pass design process that defines a subject-specific design thesis, applying intentional palette, typography, layout, and motion choices before implementation. This avoids generic, overused aesthetics.

What is the best way to plan a landing page layout and typography system before coding?▼

The best way to plan a landing page layout and typography system is through structured design planning featuring brainstorming, type pairings, ASCII wireframes, and a signature element, ensuring a non-templated identity before any code is written.

How does UX writing improve interface copy for empty states and error messages?▼

UX writing improves interface copy for empty states and error messages by guiding labels and actions to be clear, active, and consistent, ensuring the interface language is intentional and user-friendly.

Can I use this approach for product interface redesigns and brand-aligned UI work?▼

Yes, you can use this approach for product interface redesigns and brand-aligned UI work because it generates subject-specific design decisions tailored to a specific audience, ensuring the result feels crafted rather than templated.

How do I evaluate whether my UI design concept feels too generic?▼

You evaluate whether your UI design concept feels too generic by using a built-in self-critique step that reviews weak choices, encourages restraint, and ensures one bold signature element stands out distinctly.

What are the limitations of using AI-generated aesthetics for frontend design?▼

A limitation of using AI-generated aesthetics for frontend design is the risk of defaulting to common, overused visual directions that are disconnected from the actual subject matter, lacking a memorable signature element.

Related Skills

Explore More Design & Creative Skills→
duggal1duggal1
2

clarify

Rewrite unclear interface copy for labels, errors, placeholders, and calls to action.

Community
Advanced
huichenhuichen

design-html

Convert approved AI design mockups into Pretext-native HTML/CSS with responsive layouts.

Community
Advanced
oliverjone01-devoliverjone01-dev
1

clarify

Rewrite unclear interface copy into clear, actionable user-facing text.

Community
Basic
vuralserhat86vuralserhat86
43

frontend_design

Generate distinctive frontend UI designs with premium aesthetics and motion.

Community
Advanced