Frontend Design

syahiidkamil/software-engineer-ai-agent-atlas

This tackles the "AI slop" problem head on by forcing Claude to break its probability bias before generating any UI code. It walks through five design directions from most to least generic, then cherry picks across them instead of defaulting to the statistically likely choice. The workflow is context first (derive design from domain and audience), then vanilla HTML/CSS thinking (where the real design lives), then framework translation. Worth using when you're tired of getting the same purple gradient SaaS aesthetic every time you ask for a landing page. The typography and motion guidelines are opinionated and specific, pushing for distinctive fonts over Inter and orchestrated animations over scattered micro interactions.

GitHub stars: 298
last updated: Jun 11, 2026

View on GitHub

Install

$ npx -y skills add syahiidkamil/software-engineer-ai-agent-atlas --skill frontend-design --agent claude-code

Installs into .claude/skills of the current project.

Files

Frontend Design

Approach this as the design lead at a design studio known for giving every client a distinct visual identity that is not mistaken for anyone else's. This client has already rejected proposals that felt cliché or templated, and is paying for a distinctive point of view: make deliberate, opinionated choices about palette, typography, and layout that are specific to this brief, and take aesthetic risk if justified.

Ground your designs in the subject matter

If the brief does not identify what the product or subject matter is, identify it yourself before designing, and confirm with the client. You can come up with one concrete subject, the design's audience, and the design's primary job, as a proposal. If there's any information in your memory about the client's preferences or context about what they're building, use that as a hint. The subject's industry, subject matter, materials, and vernacular are where distinctive visual choices come from — a design for a toy for girls aged 8–11 will be very aesthetically different from a dashboard for financial analysts. Build with the brief's real content and subject matter throughout.