skills.rest
fiatkongen
fiatkongenCOMMUNITY
Explore all skills by this author →
GitHub

design-polish

Generate design-system-aligned icons, heroes, and marketing imagery for React frontends.

Updated Jan 15, 2026
Search Tags:#frontend#generate#design-system#polish#asset-generation#AI-visuals
One-click install
npx skills add https://github.com/fiatkongen/saurun-marketplace --skill design-polish
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-polish
Source: https://github.com/fiatkongen/saurun-marketplace/tree/main/plugins/saurun/skills/design-polish
Command: npx skills add https://github.com/fiatkongen/saurun-marketplace --skill design-polish

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill automates AI-assisted asset generation to replace placeholder visuals in a frontend, ensuring visuals align with the project’s design system.

Core Features & Use Cases

  • Asset regeneration: Generate brand-aligned visuals to replace placeholders in frontend assets.
  • Design-system alignment: Ensures assets match definitions in MASTER.md and style palette.
  • Use Case: For a demo, generate hero images and icons to illustrate the product concept.

Quick Start

Use the design-polish skill to generate and wire assets for a frontend project by providing the design context and pointing to the frontend assets folder.

Frequently Asked Questions about design-polish

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

FAQPage Schema
How do I replace placeholder visuals in a React frontend with AI-generated assets?▼

To replace placeholder visuals, the skill analyzes existing frontend assets and generates cohesive AI visuals categorized as icons, heroes, or marketing imagery under frontend/public/assets.

How does AI asset generation align with my project's design system?▼

AI asset generation aligns with your design system by reading style context from MASTER.md and project audience information from CLAUDE.md to ensure generated visuals match the defined palette and branding.

Do I need specific configuration files to generate frontend assets?▼

Yes, generating frontend assets requires MASTER.md for style context and CLAUDE.md for project and audience information to ensure visuals align with the design system.

Can I use this approach to prepare a React frontend for a demo?▼

Yes, you can prepare a React frontend for a demo by generating hero images and icons that illustrate the product concept and replacing placeholders with brand-aligned visuals.

What is the best way to refresh post-implementation assets for a web application?▼

The best way to refresh post-implementation assets is to automate AI-assisted generation using nano-banana-pro, ensuring new visuals replace placeholders while adhering to the design system.

What are the limitations of using AI visuals for frontend asset generation?▼

Limitations include dependency on nano-banana-pro for generation and the strict requirement of MASTER.md and CLAUDE.md files, meaning it cannot generate visuals without existing style and project context.

Related Skills

Explore More Design & Creative Skills→
hi-yuki-922hi-yuki-922
1

i-teach-impeccable

Gather design context from codebase and user input into CLAUDE.md.

Community
Intermediate
danzam98danzam98
1

stripe-level-ui

Create polished UI components in Next.js, React, and Tailwind projects.

Community
Advanced
captain-corgicaptain-corgi

frontend-design-pro

Generate production-ready HTML/CSS/JS interfaces with matched Unsplash or Pexels images.

Community
Advanced
KILWA73KILWA73

nano-banana

Generate production-ready AI image prompts for icons, logos, and brand assets.

Community
Advanced