skills.rest
nperepichka
nperepichkaCOMMUNITY
Explore all skills by this author →
GitHub

design-taste

Generates styled web interfaces, documents, and image prompts using pure Vanilla CSS design rules.

Updated Aug 19, 2026
Search Tags:#css#image generation#design tokens#web design#ui design#art direction#redesign audit
One-click install
npx skills add https://github.com/nperepichka/Antigravity --skill design-taste-nperepichka
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-taste
Source: https://github.com/nperepichka/Antigravity/tree/main/config/skills/design-taste
Command: npx skills add https://github.com/nperepichka/Antigravity --skill design-taste-nperepichka

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? AI-generated visual output often falls into generic, low-quality defaults like purple gradient glows, identical card columns, and poor contrast. This Skill enforces deliberate design decisions, calibrated styling parameters, and strict anti-slop rules so every UI, document, or image prompt meets professional visual standards. ## Core Features & Use Cases - Brief Inference & Calibration: Declares a one-line design read and tunes three dials (variance, motion, density) before generating any CSS, markup, or image prompt. - Pure Vanilla CSS Architecture: Provides token-based :root custom properties, double-bezel cards, island buttons, bento grids, and floating navigation with zero third-party CSS dependencies. - Multi-Modal Image Pipeline: Directs the native generate_image tool with structured prompt formulas for web sections (16:9), mobile screens (9:16), and brand boards (1:1), then deconstructs results into production CSS. - Use Case: Ask the agent to redesign a dated landing page. It scans the existing code, diagnoses typography and color defects against the audit matrix, and applies a surgical modern CSS uplift without breaking form fields or JavaScript bindings. ## Quick Start Use the design-taste skill to build a dark-themed SaaS landing page hero section with a single accent color and pure Vanilla CSS.

Frequently Asked Questions about design-taste

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

FAQPage Schema
How do I create a modern landing page with pure Vanilla CSS?▼

Define design tokens in :root custom properties for typography, color, radii, and motion, then compose layouts with native CSS Grid and Flexbox. Use patterns like double-bezel cards, island buttons, and asymmetric bento grids without any third-party CSS frameworks.

How to write better prompts for AI image generation of UI mockups?▼

Structure prompts with subject, composition, palette, lighting, and surface texture, plus explicit negative directives banning purple glows and floating blobs. Generate one 16:9 image per web section, 9:16 for mobile screens, and 1:1 for brand boards.

Does this approach work with existing legacy CSS codebases?▼

Yes, the redesign audit workflow scans existing code, diagnoses typography, color, and layout defects, then applies surgical CSS overrides. It preserves form field names, API routes, and JavaScript bindings so functionality stays intact.

What CSS is required for printable PDF reports and documents?▼

Use @page rules for A4 margins and @media print blocks that force white backgrounds, hide interactive elements, and control page breaks. Add summary metric strips with tabular numerals and fine 1px section dividers for clean document hierarchy.

Why should hero sections use min-height 100dvh instead of 100vh?▼

The 100vh unit causes layout jumps on mobile browsers because it ignores dynamic toolbars. Using min-height: 100dvh adapts to the actual visible viewport, keeping hero sections stable on mobile Safari and Chrome.

What are the limitations of AI-generated UI design by default?▼

Models default to centered dark heroes with purple mesh gradients, three identical feature cards, and generic Inter typography. Countering this requires explicit brief inference, locked single accent colors, calibrated variance and density dials, and anti-slop checklists.

Related Skills

Explore More Design & Creative Skills→
aymenhamoudiiaymenhamoudii

teach-impeccable

Extract design tokens and brand assets into .impeccable.md.

Community
Intermediate
joe-watkinsjoe-watkins
1

web-standards

Analyze HTML, CSS, and ARIA code for static accessibility issues.

Community
Basic
TrainLCDTrainLCD
71

argent-screenshot-diff

Compare baseline and current screenshots to generate visual regression diff reports.

Official
Intermediate
suwandresuwandre

code-architecture-tailwind-v4-best-practices

Guide Tailwind CSS v4 component development with CSS-first tokens and variant strategies.

Community
Intermediate