premium-ui-revamp-skill

어떤 스킬인가요?

Audit and revamp existing web interfaces into polished, professional, product-specific experiences while preserving behavior and working within the current frontend stack. Use for requests to improve a vibe-coded, generic, template-like, inconsistent, dated, amateur, or visibly AI-generated UI; redesign an existing page, app, dashboard, landing page, or component; establish stronger art direction, hierarchy, typography, spacing, color, responsiveness, accessibility, interaction states, or visual coherence; or perform a premium UI polish pass on HTML, CSS, JavaScript, React, Vue, Svelte, Next.js, and similar frontend codebases.

설치 방법

프로젝트 폴더에서 아래 명령어를 실행하고, 설치할 에이전트를 선택하세요.

설치 명령을 직접 실행해야 적용됩니다. 지원 에이전트와 필요한 권한·라이선스는 제작자의 안내를 확인하세요.

스킬 원문 파일

interface:
  display_name: "Premium UI Revamp"
  short_description: "Turn generic interfaces into polished products"
  default_prompt: "Use $premium-ui-revamp-skill to audit and professionally redesign this existing interface."

<div align="center">

# Premium UI Revamp

**Turn a generic or visibly AI-generated interface into a deliberate product while preserving its behavior and stack.**

[Why it exists](#why-this-exists) · [What changes](#what-changes) · [Use it](#use-it) · [Browse all skills](../README.md)

<br>

<code>npx skills add buildfastwithai/buildfast-skills --skill premium-ui-revamp-skill</code>

</div>

![Editorial visual of a generic interface becoming a coherent premium UI](assets/readme/revamp-direction.webp)

<p align="center"><sub>Editorial transformation visual—not a screenshot of a bundled app. The skill audits and edits the real interface you provide.</sub></p>

---

## Why this exists

Generic interfaces rarely fail because they need more gradients. They fail because hierarchy, density, typography, spacing, components, and interaction states do not agree. This skill diagnoses those systems in the rendered product, fixes the highest-leverage problems first, and verifies that the redesign did not break the application underneath it.

## What changes

| Pass | The work |
|:--|:--|
| **1 · Structure** | Hierarchy, content order, information architecture, density, and responsive composition |
| **2 · System** | Typography, spacing, color, radii, elevation, shared components, and interaction states |
| **3 · Finish** | Optical alignment, icons, borders, microcopy, transitions, and final visual detail |

You receive implemented changes in the existing stack, a compact design brief, the rationale behind the decisions, validation results, and any limitation that still needs product or brand input.

## Use it

```bash
npx skills add buildfastwithai/buildfast-skills --skill premium-ui-revamp-skill
```

Then name the surface, desired character, and workflows that must remain intact:

> “Use premium-ui-revamp-skill to make this dashboard feel precise and trustworthy. Preserve every workflow.”

> “Audit this marketing page at desktop and mobile sizes, then implement the highest-impact fixes.”

> “Remove the generic AI design tells from this React app without turning it into another bland minimal site.”

## Recipe

1. **Inspect the product.** Read the frontend, run it, and review the real route at representative desktop and mobile widths.
2. **Write a compact brief.** Name the product character, strongest problems, preserved behaviors, and intended design system.
3. **Fix in leverage order.** Structure first, system second, polish last.
4. **Work inside the stack.** Reuse existing components, dependencies, data flow, and routes wherever they remain sound.
5. **Verify the rendered result.** Run the production build, inspect responsive states, and test keyboard, focus, and reduced motion.

## Done means

| Surface | Required proof |
|:--|:--|
| **Behavior** | Existing routes, controls, content, and data flow still work |
| **Access** | Keyboard, focus-visible, reduced-motion, and responsive states remain usable |
| **System** | Shared tokens and repeated components stay coherent |
| **Build** | The production build succeeds |
| **Finish** | The rendered result passes the included quality rubric |

## Bring

- An existing frontend and the route or screen to improve.
- Product, audience, brand, or visual constraints.
- The project's normal build tools and permission to edit the in-scope interface.

The workflow supports HTML/CSS/JavaScript, React, Vue, Svelte, Next.js, and similar frontend projects.

## What it will not do

- Replace the framework just to make redesign easier.
- Rewrite unrelated components or backend behavior.
- Hide structural problems under surface decoration.
- Call a redesign complete without inspecting the rendered product.

## Inside the skill

```text
premium-ui-revamp-skill/
├── SKILL.md
├── agents/openai.yaml
└── references/
    ├── premium-patterns.md
    └── quality-rubric.md
```

---

[← Browse BuildFast Skills](../README.md) · [MIT licensed](../LICENSE) · [View the repository](https://github.com/buildfastwithai/buildfast-skills)

# Premium Patterns and Anti-Patterns

Use this reference to replace generic visual decisions with product-specific ones. Select a coherent subset; do not combine all patterns.

## Choose a direction from context

### Precision tool

Fit analytics, developer, finance, operations, and productivity products.

- Use a disciplined grid, compact rhythm, clear data alignment, and restrained color.
- Emphasize state, comparison, keyboard access, and information density.
- Create character through typography, dividers, data visualization, or a distinctive navigation model rather than decoration.

### Editorial clarity

Fit publishing, research, education, portfolios, and content-rich products.

- Use strong type hierarchy, generous but purposeful margins, readable measures, and image pacing.
- Let content create the rhythm.
- Create character through scale contrast, captions, rules, and art direction.

### Quiet confidence

Fit professional services, premium commerce, health, finance, and high-trust products.

- Use controlled neutrals, precise spacing, concise copy, and excellent photography or product detail when available.
- Favor subtle surface changes over obvious gradients and shadows.
- Create character through proportion, material cues, and restraint.

### Warm utility

Fit community, wellness, education, consumer productivity, and human-centered services.

- Use approachable type, softer geometry, comfortable rhythm, and a warm accent.
- Keep controls direct and useful; avoid turning friendliness into cartoon decoration.
- Create character through language, illustration, and tactile interaction details.

### Expressive brand

Fit culture, entertainment, creative tools, launches, and campaigns.

- Use a bold composition, distinctive type or imagery, and deliberate motion.
- Keep utility areas calmer so expressive moments retain impact.
- Create character through one memorable motif rather than a pile of effects.

## Replace common generic choices

### Card grids everywhere

Problem: every idea becomes a rounded rectangle, flattening hierarchy and wasting space.

Replace with section rhythm, dividers, aligned lists, split layouts, tables, or a single dominant panel. Use a card only when the item is independently selectable, movable, or meaningfully self-contained.

### Gradient headline plus vague subtitle

Problem: visual drama substitutes for a concrete promise.

Replace with specific copy, decisive type, product evidence, and a composition tied to the actual task. Keep a gradient only when it belongs to the brand system and remains readable.

### Decorative dashboard chrome

Problem: glowing charts, glass surfaces, and saturated indicators compete with the data.

Replace with strong number formatting, comparison context, aligned scales, useful annotations, and color reserved for meaning.

### Excessive rounding

Problem: pills and large radii make unrelated controls look identical and reduce visual precision.

Replace with a radius scale tied to component size and role. Reserve pills for tags, filters, compact status, or genuinely capsule-shaped controls.

### Too many floating surfaces

Problem: shadows and elevation appear without a spatial model.

Replace with borders, background shifts, spacing, or containment. Use elevation for overlays, menus, dragged objects, or a genuinely raised focal element.

### Arbitrary accent color

Problem: default blue or purple appears on headings, icons, buttons, and backgrounds without semantics.

Replace with a restrained accent policy. Define where accent color means action, selection, status, or brand expression, and keep neutrals responsible for most hierarchy.

### Icon-in-a-circle repetition

Problem: repeated medallions add noise and make every item equally important.

Replace with well-aligned standalone icons, typographic markers, numbers, illustrations, or no icon. Add a container only when it communicates state or interaction.

### Empty luxury

Problem: extreme whitespace and tiny copy imitate luxury while weakening usability.

Replace with confident proportions, high-quality type, concise content, and intentional negative space around genuinely important material.

### Animation as decoration

Problem: every element fades, floats, or staggers on entry, delaying access and making utility screens feel theatrical.

Replace with motion that explains navigation, state change, hierarchy, or direct manipulation. Keep the rest immediate.

## Add distinction without clutter

Choose at most one or two techniques that fit the product:

- a recognizable grid or asymmetric composition;
- a distinctive but readable display type treatment;
- a branded rule, corner, underline, or crop behavior;
- a consistent image aspect ratio and art direction;
- a purposeful data-visualization language;
- a subtle material treatment tied to the product domain;
- concise, unmistakably product-specific copy;
- one meaningful transition used at a key moment.

Repeat the chosen idea consistently enough to feel intentional. Stop before it becomes a theme effect.

## Preserve credibility

- Prefer real product screenshots, data, and states over abstract mockups.
- Keep marketing claims concrete and support them with evidence.
- Use familiar interaction patterns for high-stakes actions.
- Avoid adding testimonials, metrics, customer logos, security badges, or guarantees that the product does not actually have.
- Keep implementation quality aligned with the visual promise: responsive behavior, loading states, focus states, and error handling are part of the premium finish.

# UI Quality Rubric

Use this rubric to audit an existing interface and choose the smallest set of changes that produces a meaningful improvement. Score only when comparison helps; the observations matter more than the number.

## Priority test

For each problem, ask:

1. Does it prevent the user from understanding what matters?
2. Does it slow or confuse the primary task?
3. Does it recur across the interface?
4. Does it break at common widths or interaction states?
5. Does it make the product feel untrustworthy or unfinished?

Prioritize issues with multiple yes answers.

## 1. Product clarity

Check whether a new user can understand the page's purpose, current state, and next action within a few seconds.

- Make the primary action visually and verbally specific.
- Keep secondary actions available without letting them compete.
- Use headings that describe content rather than generic labels.
- Expose system status, selected state, progress, and consequences.
- Remove sections that repeat the same claim without adding evidence.

Strong result: the composition explains the product before decoration does.

## 2. Information hierarchy

Check reading order, grouping, contrast, and visual weight.

- Give each region a clear role.
- Group related information through proximity before adding containers.
- Limit the number of simultaneous emphasis levels.
- Keep headings, labels, values, and metadata visually distinct.
- Align controls with the content they affect.

Strong result: users can scan the page and predict where to look next.

## 3. Layout and density

Check whether the layout supports the task rather than mirroring a generic template.

- Set a content width appropriate to the material: narrower for reading, wider for dense tools.
- Use a consistent grid and intentional alignment lines.
- Balance whitespace with information value.
- Avoid nested containers when spacing alone can express grouping.
- Let mobile layouts recompose instead of merely shrinking.

Strong result: the page feels composed at both sparse and dense moments.

## 4. Typography

Check roles, legibility, rhythm, and tone.

- Use a compact, intentional type scale.
- Set comfortable line lengths and line heights for reading.
- Use weight and size before color to establish hierarchy.
- Avoid very light weights and low-contrast text for essential content.
- Use specialized display type sparingly; keep interface text highly readable.
- Apply numeric alignment or tabular figures when data comparison benefits.

Strong result: the interface would still have hierarchy if color and effects disappeared.

## 5. Color and surfaces

Check semantic purpose and contrast.

- Build from a controlled neutral range and a purposeful accent.
- Reserve saturated color for actions, status, selection, or brand moments.
- Distinguish adjacent surfaces only as much as necessary.
- Keep borders and shadows consistent in role and strength.
- Verify text, controls, and focus indicators against their real backgrounds.

Strong result: color guides attention without becoming the product's only personality.

## 6. Components and states

Check consistency without forcing every element into the same shape.

- Normalize repeated buttons, fields, navigation items, tables, and cards.
- Distinguish hierarchy through variants, not arbitrary styling.
- Include hover, focus-visible, active, selected, disabled, loading, empty, error, and success states where relevant.
- Keep icon size, stroke weight, alignment, and label spacing consistent.
- Make destructive actions visually and procedurally distinct.

Strong result: components feel related, and every interactive element communicates its state.

## 7. Responsiveness

Check actual content at widths around each transition.

- Prevent horizontal overflow and accidental clipping.
- Preserve action priority when controls wrap or collapse.
- Reorder content only when the reading sequence remains logical.
- Use scroll regions intentionally for tables, timelines, and dense tools.
- Maintain usable target sizes and spacing on touch devices.

Strong result: each viewport feels designed, not tolerated.

## 8. Accessibility and trust

Check practical usability before claiming compliance.

- Use semantic landmarks, headings, labels, and button/link elements.
- Preserve a visible keyboard focus state.
- Avoid conveying state through color alone.
- Provide meaningful alternative text where imagery carries information.
- Respect reduced-motion preferences.
- Keep error messages specific and associated with the affected control.
- Avoid misleading urgency, hidden consequences, or ambiguous actions.

Strong result: the interface remains understandable with keyboard navigation, zoom, and non-ideal conditions.

## 9. Motion and feedback

Check whether motion explains change.

- Animate state transitions, spatial relationships, and direct manipulation.
- Keep routine interface transitions brief and interruptible.
- Prefer transform and opacity when appropriate.
- Avoid staggered entrance animations for frequently visited utility screens.
- Provide immediate feedback for user actions.

Strong result: motion makes the interface easier to follow and is otherwise quiet.

## 10. Craft and distinctiveness

Check whether details support a coherent product character.

- Repeat one or two signature ideas with restraint.
- Use optical alignment where mathematical alignment looks wrong.
- Refine copy, truncation, empty states, and awkward data combinations.
- Remove effects that do not reinforce the visual thesis.
- Maintain consistency across nearby screens, not only the hero view.

Strong result: the interface feels deliberate without feeling decorated for its own sake.

---
name: premium-ui-revamp-skill
description: Audit and revamp existing web interfaces into polished, professional, product-specific experiences while preserving behavior and working within the current frontend stack. Use for requests to improve a vibe-coded, generic, template-like, inconsistent, dated, amateur, or visibly AI-generated UI; redesign an existing page, app, dashboard, landing page, or component; establish stronger art direction, hierarchy, typography, spacing, color, responsiveness, accessibility, interaction states, or visual coherence; or perform a premium UI polish pass on HTML, CSS, JavaScript, React, Vue, Svelte, Next.js, and similar frontend codebases.
---

# Premium UI Revamp

Turn an existing interface into a credible, intentional product. Preserve what works, derive the design from the product's context, implement the improvements in the existing stack, and verify the rendered result rather than stopping at recommendations.

## Operating principles

- Treat "premium" as clarity, restraint, coherence, craft, and fit for purpose—not a fixed visual style.
- Derive the direction from the product, audience, content, brand cues, and usage context. Avoid imposing the same dark gradient, glassmorphism, rounded-card aesthetic on every project.
- Preserve functionality, routes, data flow, copy, and existing design-system conventions unless the user requests broader changes.
- Prefer a few high-impact structural decisions over many decorative effects.
- Make the interface feel authored. Establish one clear visual idea and carry it through typography, composition, color, imagery, and interaction.
- Work in the current framework and styling system. Add dependencies only when the benefit is clear and the project does not already solve the need.
- Use real content and realistic states. Do not hide weak structure behind placeholder copy, oversized empty areas, or ornamental graphics.

## Workflow

### 1. Establish the actual surface

Inspect the repository before editing. Identify:

- the app framework, entry point, target route, and component tree;
- global styles, tokens, themes, component libraries, icons, fonts, and brand assets;
- existing responsive behavior and important interaction states;
- build, lint, test, and preview commands;
- nearby screens whose conventions should remain consistent.

Run the interface when possible. Capture or inspect a baseline at representative desktop and mobile sizes. If the user requested analysis only, stop after the audit and recommendations; otherwise continue through implementation and verification.

Do not replace the stack, rewrite unrelated components, invent a new brand, or change product behavior merely to make the redesign easier.

### 2. Write a compact design brief

Before changing styles, state the direction in a few lines:

- **Product and user:** what this interface helps whom accomplish.
- **Desired character:** choose two or three useful attributes such as precise, calm, editorial, technical, warm, understated, or energetic.
- **Visual thesis:** identify the single compositional or aesthetic idea that will make the product recognizable.
- **Hierarchy:** name the primary action, primary information, and supporting content.
- **Constraints:** record existing brand, accessibility, content, and framework requirements.

Infer these from the code and product context when the user has not supplied them. Ask only when a missing choice would materially change the result.

### 3. Audit before decorating

Read [references/quality-rubric.md](references/quality-rubric.md) when evaluating the current interface or prioritizing changes.

Classify findings into three tiers:

1. **Structural:** broken hierarchy, confused information architecture, poor content order, unsuitable density, weak responsive composition.
2. **Systemic:** inconsistent type, spacing, color, radii, shadows, component variants, or states.
3. **Polish:** optical alignment, icon treatment, borders, microcopy, transitions, and small finishing details.

Fix them in that order. Decoration cannot rescue unclear structure.

### 4. Choose an intentional direction

Read [references/premium-patterns.md](references/premium-patterns.md) when the UI feels generic, template-driven, or visibly AI-generated.

Select a direction that fits the product rather than combining every fashionable treatment. Decide explicitly:

- content width and grid behavior;
- information density and vertical rhythm;
- type roles, scale, weight, and line length;
- neutral palette, accent usage, and contrast hierarchy;
- border, radius, elevation, and surface rules;
- image or illustration treatment when assets exist;
- one restrained signature motif, if the product benefits from one;
- motion purpose, duration, and reduced-motion behavior.

Reuse existing brand assets and strong components. Remove decorative choices that lack a product rationale.

### 5. Implement from foundations outward

Apply changes in this sequence:

1. Correct semantic structure and content order.
2. Establish tokens or shared variables for type, spacing, color, radii, elevation, and motion.
3. Repair the page grid, containers, major regions, and responsive breakpoints.
4. Refine typography and controls.
5. Normalize repeated components and interaction states.
6. Add only the imagery, detail, and motion that support the visual thesis.

Prefer fluid sizing, resilient grids, and content-driven breakpoints over fixed mockup coordinates. Use semantic HTML and preserve keyboard behavior. Include hover, focus-visible, active, selected, disabled, loading, empty, error, and success states where the product surface requires them.

Keep abstractions proportional to the codebase. Reuse repeated values and patterns, but do not create a large design-system layer for a one-page polish pass.

### 6. Remove generic UI tells

Actively check for:

- oversized gradient headlines with vague marketing copy;
- glowing blobs, decorative grid backgrounds, and glass panels without product relevance;
- excessive pills, rounded rectangles, nested cards, and shadows on every surface;
- a large centered hero followed by interchangeable feature cards;
- arbitrary purple or blue accents, uniform icon circles, and gradient-filled primary buttons;
- weak typography hidden behind effects;
- excessive whitespace that lowers information value rather than improving focus;
- tiny gray text, low-contrast borders, and placeholder-style metadata;
- motion applied everywhere instead of at meaningful state changes;
- inconsistent spacing or dozens of one-off values.

Do not remove a treatment solely because it appears on this list. Keep it when it expresses the brand or serves the interaction; make it deliberate and consistent.

### 7. Verify the rendered result

Use the best available browser or screenshot workflow. Validate at minimum:

- a representative desktop width;
- a narrow mobile width;
- any breakpoint where the layout changes materially;
- long content, empty content, and error/loading states when available;
- keyboard focus, labels, hit targets, readable contrast, and reduced motion;
- overflow, clipping, unexpected wrapping, and layout shift.

Run the relevant build, typecheck, lint, and targeted tests. Do not claim accessibility compliance unless it was actually measured; report what was checked.

Compare the final render with the baseline. Iterate when hierarchy, density, alignment, contrast, or responsiveness still feels unresolved. A successful revamp should be visibly better at a glance and more coherent under close inspection.

## Completion standard

Deliver a working implementation, not only a mood board or list of CSS suggestions, unless the user requested analysis only. Summarize:

- the design direction and why it fits the product;
- the most important structural and visual changes;
- verification performed and any remaining constraints.

Avoid presenting every minor CSS adjustment. Lead with the product-level improvement.