AGENT SKILL

designs

Show 4 better, new design options as separate real image renders of the actual app UI. Use for "designs" or when the user asks for new design ideas.

License 许可
MIT
所属仓库
davidondrej/skills
最近更新
2026-11-14
Stars
★ 4.3k
Forks
626

01 前言 Front Matter

name
designs
description
Show 4 better, new design options as separate real image renders of the actual app UI. Use for "designs" or when the user asks for new design ideas.

03 SKILL.md 正文

Give me 4 better, new designs of what this could look like. Each one is a separate real image render.

Always the actual app UI

  • Render the app's own components.
  • Use its real icons, fonts, colors, and spacing.
  • Never draw a mockup from scratch.
  • Never invent icons or UI elements the app doesn't have.
  • Change only what the design is about.
  • The rest of the page looks exactly like the app today.
  • Show the whole page, in 16:9.

If unsure, look first

  • Unsure how a page looks? Take a screenshot of that page in the real app before designing.
  • Check every render against it.
  • A render that doesn't look like the same app is not ready to show.

How

  • If the project has a skill for rendering the real app, follow it. In Cloudroom that is ui-change-preview.
  • Otherwise run the app or its component stories, and screenshot the real page.
  • Revert temporary code when done.
  • Clean screenshots only: no red boxes, numbers, or notes on the images.

04 同仓库更多 Skills