design

Overview of design skill

The design skill helps you turn vague UI requests into production-grade visual output with a clear point of view, especially when the problem is “make this page/component look better” rather than “add new logic.” It is built for UI Design work, screenshot-driven polish, typography cleanup, and fixing visual complaints like ugly, inconsistent, unclear, or awkward layouts.

When design skill fits best

Use design when the task is front-end presentation, not backend behavior: pages, components, dashboards, marketing sections, empty states, and visual refreshes. It is a good fit when the user gives a screenshot, a rough screen description, or a complaint that the interface feels off.

What makes it different

This design skill is not a generic style prompt. It pushes for a stronger aesthetic decision, asks for consistency in layout and tokens, and avoids default-looking UI. The repo also includes practical guardrails for traps like mixed CSS systems, weak surface hierarchy, and overused visual patterns.

When not to use it

Do not use design as the main solution for data flow bugs, state management, API issues, or backend-only work. If the core problem is logic, routing, or schema work, the skill may improve presentation but will not solve the root issue.

How to Use design skill

Install and read order

Install with npx skills add tw93/Waza --skill design. Start with SKILL.md, then read the reference files in this order: references/design-traps.md, references/design-reference.md, references/design-aesthetic-quality.md, references/design-tokens.md, and references/design-data-viz.md when the screen is dashboard-like. That order helps you catch constraints before you generate visuals.

What input the skill needs

The best design usage starts with concrete input: screen type, audience, current pain point, brand direction, and any hard constraints. Strong inputs sound like, “Redesign this pricing page for enterprise buyers, keep the existing copy, use a calm premium tone, and avoid dark theme,” rather than “make it nicer.”

How to prompt for better output

For design for UI Design, tell the skill what must stay fixed and what can change. Include content, target device, existing design system, and the exact complaint. If you have a screenshot, say whether the issue is hierarchy, spacing, density, color, typography, or component consistency.

Practical workflow

First, lock the direction: decide whether the result should be safe, brand-aligned, or exploratory. Then ask for one clear UI direction, review the first pass against your constraints, and iterate on the weakest area only. If the result feels generic, ask for a stronger point of view instead of more visual noise.

design skill FAQ

Is design the same as a normal prompt?

No. A normal prompt can describe a style, but the design skill adds reusable guidance, anti-pattern checks, and output discipline for UI work. That usually reduces “default prompt” results and helps the model make harder aesthetic choices.

Is the design skill beginner-friendly?

Yes, if you can describe the screen and the problem. You do not need deep design vocabulary, but you do need to state the context clearly. Beginners get better results when they provide screenshots, product goals, and examples of what feels wrong.

Does it work for dashboards and charts?

Yes, but use the dashboard-focused reference only when the interface is number-heavy or chart-heavy. For UI Design work like app shells or cards, the dashboard rules may be too restrictive and can overfit the layout.

When should I skip design?

Skip it when the task is mainly backend logic, data transformation, or infrastructure. Also skip it if you only want a quick cosmetic tweak and do not need a more deliberate design decision.

How to Improve design skill

Give better design constraints

The biggest quality jump comes from better constraints, not more adjectives. Say what the interface is for, who uses it, what must remain, and what should change. “Make it premium” is weaker than “make it feel calm, trusted, and efficient for finance users.”

Use stronger visual feedback

If the first result misses, name the failure precisely: hierarchy too flat, spacing too loose, typography too playful, or surfaces too noisy. The design skill improves faster when you correct one dimension at a time instead of asking for a full redraw.

Watch for common failure modes

The most common mistakes are template-like layouts, overdecorated sections, inconsistent radii, and generic accent treatment. The repo’s references are useful because they warn against these patterns before they show up in the output.

Iterate with screenshots and examples

For design usage, compare the output against a screenshot or a known-good reference and ask for a targeted revision. If the page needs stronger UI Design quality, request one change at a time, such as tighter hierarchy, a different type scale, or a more distinctive surface system.