design-taste-frontend

Transform frontend briefs into distinctive landing pages and portfolio interfaces.

Updated Jun 20, 2025
One-click install
npx skills add https://github.com/SaltFishGC/SaltFishGC.github.io --skill design-taste-frontend-saltfishgc
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: design-taste-frontend
Source: https://github.com/SaltFishGC/SaltFishGC.github.io/tree/main/.trae/skills/design-taste-frontend
Command: npx skills add https://github.com/SaltFishGC/SaltFishGC.github.io --skill design-taste-frontend-saltfishgc

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps create frontend pages that feel intentional, brand-aware, and visually distinctive instead of templated or generic. It is designed for briefs where layout, tone, typography, and motion need to match the audience rather than defaulting to common AI aesthetics.

Core Features & Use Cases

  • Brief Inference: Reads the page type, audience, vibe, references, and constraints before proposing a direction.
  • Design System Selection: Chooses an appropriate foundation when a real system fits, or builds an honest aesthetic implementation with native CSS and modern tooling.
  • Anti-Template Guardrails: Enforces strong rules for typography, color calibration, layout diversity, motion, responsiveness, and accessibility.
  • Use Cases: Landing pages, personal portfolios, redesigns, editorial homepages, and other frontend experiences where visual taste matters as much as functionality.

Quick Start

Apply this skill to the brief and generate a distinctive, production-ready frontend concept with a clear design read.

Frequently Asked Questions about design-taste-frontend

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

FAQPage Schema
How do I design a landing page that doesn't look like generic AI slop?

To design distinctive landing pages without generic slop, you need an explicit design read that matches typography, color, layout, and motion to your specific audience and brand nuance. This ensures the frontend feels intentional rather than templated.

What's the best way to create a non-templated portfolio interface?

Creating a non-templated portfolio interface requires inferring the audience and vibe from your brief, then applying anti-template guardrails for typography, layout diversity, and motion. This approach builds an honest aesthetic implementation instead of defaulting to common AI aesthetics.

Can I build a responsive layout with native CSS for a distinctive frontend?

Yes, you can build a responsive layout with native CSS and modern tooling. The system selects an appropriate design foundation or builds an honest aesthetic implementation, enforcing pre-flight checks for responsive behavior, contrast, and accessibility.

How do I redesign an editorial blog to improve UI aesthetics?

Redesigning an editorial blog to improve UI aesthetics involves applying strong rules for color calibration and typography. This process reads the page type and constraints to propose a visual direction that matches the audience rather than using default layouts.

Does this frontend design approach work for marketing sites and personal portfolios?

Yes, this frontend design approach works for marketing sites, personal portfolios, editorial homepages, and redesigns. It transforms bland briefs into production-ready concepts where visual taste matters as much as functionality.

What pre-flight checks are needed for frontend design typography and contrast?

Pre-flight checks for frontend design typography and contrast enforce strong rules for accessibility, color calibration, and motion. These anti-template guardrails ensure your landing page or portfolio interface remains visually distinctive and responsive.