skills.rest
tiankong0101-byte
tiankong0101-byteCOMMUNITY
Explore all skills by this author →
GitHub

frontend-design

Design user interfaces, wireframes, mockups, and prototypes for product experiences.

Updated May 17, 2026
Search Tags:#accessibility#design system#ui design#wireframes#ux#mockups#prototypes
One-click install
npx skills add https://github.com/tiankong0101-byte/skills-registry --skill frontend-design-tiankong0101-byte
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/tiankong0101-byte/skills-registry/tree/main/skills/frontend-design
Command: npx skills add https://github.com/tiankong0101-byte/skills-registry --skill frontend-design-tiankong0101-byte

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps you move from vague product ideas to clear, production-ready UI/UX direction without starting from scratch. It is useful when you need fast clarity for a new screen, an improved flow, or a more consistent design system.

Core Features & Use Cases

  • New UI Design: Create wireframes, mockups, and prototypes for fresh product experiences.
  • Design Revision: Refine existing screens, improve layout decisions, and iterate on feedback.
  • Design System Guidance: Define tokens, components, accessibility considerations, and responsive behavior for scalable design work.
  • Use Case: A product team needs a landing page concept, a mobile app flow, or a cleaner component specification for engineering handoff.

Quick Start

Ask for a wireframe or UI concept for your product screen, including the platform, audience, and key actions.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I create wireframes and mockups for a new product UI?▼

A design system requires defining consistent design tokens, component specifications, accessibility considerations, and responsive behavior. This ensures scalable design work and reliable engineering handoff with structured visual requirements.

Can I use this to refine existing screens and improve layout decisions?▼

You can refine existing screens and improve layout decisions by applying iterative design revisions based on feedback. This process clarifies layout hierarchy and interaction details without needing to rebuild your product experience from scratch.

What do I need to prepare for engineering handoff and component specification?▼

For engineering handoff and component specification, you need to establish design token consistency, structured visual requirements, and layout hierarchy. This ensures developers receive reliable implementation details for the user interfaces.

How do I plan accessibility considerations for my UI design?▼

To plan accessibility considerations for your UI design, define specific accessibility rules within your design system guidance. This ensures your wireframes, mockups, and prototypes meet structured visual requirements for inclusive product experiences.

When do I need structured visual requirements for UI design?▼

You need structured visual requirements for UI design when creating new interfaces, specifying components, or planning responsive behavior. Providing layout hierarchy and interaction details upfront ensures reliable implementation and clear production-ready direction.

Related Skills

Explore More Design & Creative Skills→
FacuMFacuM

brainstorming

Transforms user ideas into detailed design specifications through iterative questioning and validation.

Community
Intermediate
fieldspherefieldsphere
37

mockup

Create UI mockups aligned with API states and design-system constraints.

Official
Intermediate
virajpvirajp
1

design-system-authoring

Define product design system contracts for semantic tokens, typography, spacing, motion, and accessibility.

Community
Intermediate
partme-aipartme-ai
610

axure

Guide Axure RP prototyping for wireframes, interactions, and dynamic panels.

Official
Basic