Does it require a browser to work?

Yes, it utilizes browser automation to take focused screenshots and visually analyze the component's state before making any code changes.

How many iterations does the Design Iterator perform?

By default, the skill suggests or performs up to 10 iterations, but you can specify a custom number based on the complexity of the design task.

Can it research other websites for inspiration?

Yes, it can navigate to specified competitor sites, extract their design techniques (like gradients or shadows), and apply those insights to your project.

Will it stop if the design is already finished?

Yes, the skill is programmed to stop iterating immediately if it cannot identify a clear, impactful improvement to make, preventing over-engineering.

Design Iterator

Name: Design Iterator
Author: gvkhosla

bygvkhosla

•

设计工具

Refines UI components systematically through iterative screenshot analysis and targeted visual improvements.

The design-iterator skill transforms basic web interfaces into polished, professional-grade designs by performing a sequence of screenshot-analyze-improve cycles. It leverages browser automation to visually inspect specific UI elements, identifies precise enhancements in typography, spacing, and hierarchy, and applies incremental code changes. This proactive tool is ideal for complex frontend tasks where initial attempts lack polish, allowing the agent to research competitors and build visual quality progressively while avoiding generic AI aesthetics.

主要功能

01Competitor design research and pattern extraction

02Systematic refinement of typography, spacing, and visual hierarchy

03Progressive implementation of small, high-impact CSS and layout changes

04Focused element-level visual analysis using browser automation

05Automated screenshot-analyze-improve iteration cycles

0635 GitHub stars

使用场景

01Harmonizing colors and layout across a complex UI after initial development passes

02Matching a website's design language to premium patterns like Stripe or Linear

03Polishing a rough hero section or landing page component to a professional standard

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add gvkhosla/compound-engineering-pi design-iterator

For use in Claude.ai and ChatGPT

Download Skill