skills.rest
Javeria-Javaid
Javeria-JavaidCOMMUNITY
Explore all skills by this author →
GitHub

design-it

Routes frontend design requests to 48 opinionated UI style guides with palettes and code.

3|Updated Jul 17, 2026
Search Tags:#color palettes#frontend#css#ui design#swiftui#flutter#design styles
One-click install
npx skills add https://github.com/Javeria-Javaid/Alkhidmat_foundation_lahore --skill design-it-javeria-javaid
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-it
Source: https://github.com/Javeria-Javaid/Alkhidmat_foundation_lahore/tree/main/Users/Javeria/Desktop/Alkhidmat_foundation_lahore/.agents/skills/design-it
Command: npx skills add https://github.com/Javeria-Javaid/Alkhidmat_foundation_lahore --skill design-it-javeria-javaid

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Building frontend interfaces often results in generic, unstyled output when no design direction is given. This Skill maps user requests to one of 48 distinct UI design styles and enforces curated color palettes so generated web and app interfaces follow a coherent aesthetic. ## Core Features & Use Cases - Style Routing: Fuzzy-matches user keywords (e.g., "glass", "retro", "terminal") to one of 48 style guides covering modern, retro, futuristic, and data-dense aesthetics. - Universal Palettes: Provides 10 predefined color palettes with exact hex codes and a 60-30-10 application rule when the user does not specify colors. - Cross-Platform Implementation: Each style guide includes code examples for CSS, SwiftUI, Flutter, React Native, and Jetpack Compose. - Use Case: A user asks for a "Spotify-like playlist page" — the router maps this to the duotone-design style, reads its SKILL.md, and generates code using two-color imagery treatment. ## Quick Start Ask the AI to build a website or app screen in a specific aesthetic, such as "build a landing page with a soft pastel design."

Frequently Asked Questions about design-it

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

FAQPage Schema
How do I apply a specific UI design style to a website or app?▼

Describe the aesthetic in your request using keywords like minimal, glass, retro, or cyberpunk. The router fuzzy-matches your wording to one of 48 style guides, reads that style's SKILL.md, and generates code following its principles.

What UI design styles are available for frontend generation?▼

There are 48 styles grouped into categories: Modern UI (glassmorphism, bento-ui), Retro (vaporwave, y2k, frutiger-aero), Futuristic (cyberpunk-ui, sci-fi-interface), Typography (swiss-design, brutalist-typography), and Data & Product (dashboard-design, command-center-ui).

Does this work with React Native, Flutter, and SwiftUI?▼

Yes. Each style guide includes implementation examples for CSS, SwiftUI, Flutter, React Native, and Jetpack Compose, with notes on platform constraints such as tinted shadows on Android or gradient text requiring masked views in React Native.

What happens if I don't specify colors for my UI design?▼

The Skill requires choosing one of 10 predefined universal palettes with exact hex codes, applied using the 60-30-10 rule for backgrounds, primary text, and highlights. If you provide your own colors, those are used instead.

Can I mix multiple design styles in one interface?▼

No. The instructions explicitly say not to blend styles unless the user requests it. Each interface should follow the principles of a single chosen style to keep the aesthetic coherent.

Related Skills

Explore More Design & Creative Skills→
isacfgisacfg

i-teach-impeccable

Explore project files and ask UX questions to create a Design Context section.

Community
Intermediate
zulumonkeymetalliczulumonkeymetallic

neuroskill-bci

Integrate Hermes with NeuroSkill to stream live brain and biometric metrics.

Community
Advanced
automata-networkautomata-network

ui-screenshot-review

Analyze UI screenshots for typography, contrast, spacing, layout, and accessibility.

Official
Advanced
tiantangcao1980-webtiantangcao1980-web
4

bootstrap

Create responsive interfaces with Bootstrap 5 components and Sass theming.

Community
Intermediate