skills.rest
DVNghiem
DVNghiemCOMMUNITY
Explore all skills by this author →
GitHub

ui-design

Create consistent web interfaces with reusable UI templates and patterns.

20|3|Updated Apr 30, 2026
Search Tags:#design#ui#templates#layout#frontend#components#design-system
One-click install
npx skills add https://github.com/DVNghiem/FlowDeck --skill ui-design-dvnghiem
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-design
Source: https://github.com/DVNghiem/FlowDeck/tree/main/src/skills/ui-design
Command: npx skills add https://github.com/DVNghiem/FlowDeck --skill ui-design-dvnghiem

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Design teams often spend excessive time assembling cohesive UI that adheres to a visual language. This skill provides ready-to-use UI patterns, templates, and layout guidance to accelerate shipping polished interfaces.

Core Features & Use Cases

  • Component templates for common UI elements (Buttons, Cards, Forms) with production-ready HTML/CSS snippets.
  • Layout patterns (Hero, Grid, Dashboard) and design tokens guidance to ensure consistency across pages and apps.
  • Use Case: When delivering a marketing site or admin panel, plug in templates to assemble pages quickly while maintaining accessibility and theming.

Quick Start

Apply the UI design templates to assemble a cohesive webpage layout for a marketing site.

Frequently Asked Questions about ui-design

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

FAQPage Schema
How do I assemble consistent web interfaces using reusable UI templates?▼

Assembling consistent web interfaces involves applying reusable UI templates and design tokens to generate production-ready HTML and CSS snippets for common components like buttons, cards, and forms. This ensures visual coherence across pages.

What's the best way to build a dashboard layout with semantic design tokens?▼

Building a dashboard layout with semantic design tokens requires utilizing pre-built layout patterns that support responsive components and accessibility. This approach enables rapid composition while maintaining theming consistency across admin panels.

Can I use these UI design patterns for frontend component libraries?▼

Yes, these UI design patterns apply directly to frontend component libraries. They provide production-ready templates and layout guidance for common elements, ensuring accessibility and semantic token integration across modern front-end projects.

How do I create a marketing landing page with responsive components?▼

Creating a marketing landing page with responsive components is done by plugging in provided Hero and Grid layout templates. These templates offer production-ready HTML and CSS snippets to assemble pages quickly while maintaining theming.

Do I need a specific frontend framework to use these UI layout templates?▼

No specific frontend framework is required. The UI layout templates provide generic, production-ready HTML and CSS snippets along with semantic token guidance, allowing integration across various modern front-end projects and component libraries.

Why does my UI design lack consistency across different pages?▼

UI design lacks consistency when cohesive visual language and design tokens are not applied. Utilizing reusable UI templates and layout patterns ensures semantic token integration and accessibility, streamlining consistent interface creation.

Related Skills

Explore More Design & Creative Skills→
PosteriotPosteriot

design-system

Translate design specifications into structured CSS variables and Tailwind tokens.

Community
Intermediate
kevinnguyen271090kevinnguyen271090
15

frontend-design

Convert design mockups into production-ready HTML/CSS/JS components with design guidelines.

Community
Basic
omeraltnomeraltn

agency-frontend-developer

Implement responsive frontend UI across React, Vue, and Angular with accessibility and Core Web Vitals.

Community
Advanced
traylinxtraylinx
2

web-artifacts-builder

Bundle React, Tailwind, and shadcn/ui artifacts into a single HTML file.

Official
Advanced