Create distinctive frontend designs beyond standard templates

1. Give the agent a design brief stating the product or subject, audience and primary page goal. If these are missing, it proposes a subject, audience and primary function for your confirmation. 2. Example: “Design a landing page for an app that helps indoor-plant enthusiasts track watering dates. I don't want it to look like a stock template.” 3. The agent first prepares a short design plan: 4–6 named base colors with hex values, fonts and roles, a layout concept with ASCII sketches and alignment guidance, and principles that distinguish the page. 4. It checks the plan against the brief, revises choices resembling common defaults, and explains what changed and why before coding. 5. It writes the code while considering CSS specificity, mobile responsiveness, visible keyboard focus and reduced-motion preferences. Where supported, it critiques the work using screenshots during implementation. 6. Review the result and request specific adjustments. Any visual direction explicitly required in your brief takes priority, even if it is a common style.

The files contain no scripts, software dependencies or required accounts: this is textual guidance in SKILL.md under Apache License 2.0. It requires an agent able to write frontend code such as HTML and CSS. Screenshots for self-review are optional and depend on the agent environment. Visual quality depends on the clarity of the brief, is not guaranteed, and may vary between sessions.