Prettify
Iteratively improves the visual design of an existing page, making it more...
Install
npx skills add yournextstore/yournextstore --skill prettify -g -a claude-code -y- Repository
- yournextstore/yournextstore5.5k
- Category
- Design
- Updated
- 4d ago
- License
- MIT
- Context cost
- Mediumabout 2,018 tokens
- Runs scripts
- No, instructions only
What it does
Iteratively improves the visual design of an existing page, making it more sophisticated, richer, and prettier, without redesigning from scratch. Works on any page or UI surface: landing pages, marketing pages, pricing, docs, dashboards, admin views, settings, modals, empty states, etc. Use when the user says "prettify", or that a page/screen/component "looks flat", "feels generic", "needs more polish", "make it prettier", "more sophisticated", "richer", or asks to improve, refine, or enhance an existing UI surface. Loops screenshot → critique → targeted edit → re-screenshot until it meets a higher visual bar.
Prettify
Improve the visual quality of an existing UI surface through small, targeted iterations. Works on any page or component: landing/marketing, pricing, docs, dashboards, admin tables, settings panels, modals, empty states, etc. Preserve the existing structure, copy, and brand. Do not redesign.
Inputs
The user gives you a target, a route (e.g. /, /pricing, /admin/products), a component file, a running URL, or a specific section/modal/state of a page. If unclear, ask once:
- Which surface? (route, file path, or component)
- For component-level targets: what state/route exposes it? (e.g. "the empty state on
/admin/orderswhen there are no orders") - What feels off? (optional, gives you a starting hypothesis)
- How many iterations? (default 5; user can request more)
If the dev server isn't running, start it (bun dev) before iterating. For authed surfaces (admin, settings), make sure you're signed in before screenshotting.
The Loop
Run this loop N times. Each pass should make one focused improvement, not a sweeping rewrite.
1. Screenshot the current state
Use Chrome DevTools MCP. Capture at all three required widths (mobile-first is mandatory for YNS):
- 320px (mobile)
- 768px (tablet)
- 1280px (desktop)
Save screenshots so you can compare before/after across iterations.
2. Critique against the rubric
Score the current state across these dimensions. Focus the next change on the lowest-scoring one, don't try to fix everything at once.
