skills.rest
OiAnthony
OiAnthonyCOMMUNITY
Explore all skills by this author →
GitHub

design

Refine frontend pages and components from screenshots into polished UI.

8|Updated Jan 19, 2026
Search Tags:#typography#frontend#design system#ui design#responsive layout#visual polish#screenshot iteration
One-click install
npx skills add https://github.com/OiAnthony/.agents --skill design-oianthony
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design
Source: https://github.com/OiAnthony/.agents/tree/main/skills/design
Command: npx skills add https://github.com/OiAnthony/.agents --skill design-oianthony

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill fixes weak, generic, or visually inconsistent user interfaces by turning rough screens, components, and screenshots into polished product surfaces with a clear design direction.

Core Features & Use Cases

  • Production-grade UI design: Builds pages, components, and interface surfaces that feel intentional instead of template-like.
  • Screenshot-driven polish: Repairs spacing, typography, alignment, contrast, hierarchy, and responsive breakage when a rendered screen looks wrong.
  • Design system aware: Works with tokens, references, and existing visual vocabulary so new UI matches the product instead of drifting from it.
  • Use Case: A dashboard card overflows on mobile, a button label wraps awkwardly, or a whole page feels bland and unfinished, this Skill refines the real surface until it is visually coherent.

Quick Start

Use the design skill to refine the attached UI or screenshot into a production-ready interface with a specific visual direction and the smallest effective visual fix.

Frequently Asked Questions about design

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

FAQPage Schema
How do I fix responsive layout breakage and visual hierarchy in an existing UI?▼

Fix responsive layout breakage and visual hierarchy by using screenshot-driven iteration to repair spacing, typography, and alignment. This Skill refines rendered frontend surfaces into production-grade interfaces while preserving accessibility and design consistency.

What is the best way to polish a bland or template-like frontend component into a finished product surface?▼

Polish a bland frontend component by applying targeted visual fixes to typography, contrast, and spacing. It transforms rough screens into intentional UI with a clear design direction, ensuring the result matches existing visual vocabulary.

How do I ensure new UI components match my existing design tokens and visual vocabulary?▼

Ensure new UI matches existing design tokens by iteratively verifying source components and references against rendered output. This design system aware approach prevents visual drift, keeping new pages consistent with your product.

Can I use screenshot evidence to repair mobile overflow and awkward text wrapping in my interface?▼

You can use screenshot evidence to repair mobile overflow and awkward text wrapping. The Skill requires viewport verification and screenshot iteration to diagnose and correct specific aesthetic complaints like overflowing dashboard cards.

Why does my frontend page look visually inconsistent despite using a component library?▼

A frontend page looks visually inconsistent when spacing, hierarchy, and alignment drift from design tokens. This Skill diagnoses the source components and applies the smallest effective visual fix to achieve a coherent, polished interface.

What is screenshot-driven UI polish and when do I need it for frontend surfaces?▼

Screenshot-driven UI polish is the process of iterating on rendered output to fix visual defects like unclear hierarchy or misaligned elements. You need it when a screen looks wrong, bland, or breaks across different viewport sizes.

Related Skills

Explore More Design & Creative Skills→
easingthemeseasingthemes
6

dx-figma-extract

Extract design context, tokens, and screenshots from a Figma URL.

Community
Advanced
mashharukimashharuki
1

frontend-design

Design refined frontend interfaces and UI components with CSS best practices.

Community
Basic
bohewubohewu
1

frontend-aesthetic-director

Guide frontend UI implementation and review for polish, responsiveness, and accessibility.

Community
Intermediate
AlenryuichiAlenryuichi
20

visual-testing-loop

Automate the visual regression testing loop for frontend interfaces with Playwright.

Community
Advanced