World-Class Site & App Design
by Aman Garg
Every AI-built UI looks generic and templated. This skill teaches your agent to actually match the design to the project, the industry, and the audience.
- Transform generic SaaS dashboards into high-fidelity, data-rich interfaces.
- Implement complex scroll-driven storytelling and pinned animations.
- Create domain-specific visual identities for portfolios, fintech, or education.
$5
One-time purchase · Own forever
Included in download
- Transform generic SaaS dashboards into high-fidelity, data-rich interfaces.
- Implement complex scroll-driven storytelling and pinned animations.
- Includes example output and usage patterns
See it in action
[Before] A standard 3-column feature grid. [After] A color-blocked bento grid with asymmetric layouts, hand-drawn SVG annotations over Space Grotesk headlines, and 2026-style scroll-triggered assembly where elements slide into place with staggered CSS view-timeline animations.
World-Class Site & App Design
by Aman Garg
Every AI-built UI looks generic and templated. This skill teaches your agent to actually match the design to the project, the industry, and the audience.
$5
One-time purchase · Own forever
⚡ Also available via Agensi MCP — your AI agent can load this skill on demand via MCP. Learn more →
Included in download
- Transform generic SaaS dashboards into high-fidelity, data-rich interfaces.
- Implement complex scroll-driven storytelling and pinned animations.
- Includes example output and usage patterns
- Instant install
- One-time purchase
See it in action
[Before] A standard 3-column feature grid. [After] A color-blocked bento grid with asymmetric layouts, hand-drawn SVG annotations over Space Grotesk headlines, and 2026-style scroll-triggered assembly where elements slide into place with staggered CSS view-timeline animations.
About This Skill
You've seen it a hundred times. AI generates a UI and it comes out looking like every other site on the internet. Same generic layout, same boring structure, zero personality. Doesn't matter if it's a photography portfolio or a fintech app. It all looks the same. Design Philosophy fixes that by teaching your agent to think like a senior designer before writing any code. It runs through a 60-second "derive the vibe" ritual that figures out the emotional register of the project, the visual language of the industry, and what the audience actually expects. That means domain-specific design. A crypto trading platform looks and feels completely different from a children's education app or an editorial magazine site. The skill includes worked examples across 8+ industries so your agent understands what "good" means in each context. It covers the full craft stack: typography hierarchy with proper scale ratios, icon systems that match the tone, layout rhythm and whitespace, color palettes derived from the project's mood, scroll-driven animations, and the micro-interactions that separate amateur builds from professional ones. Built around current 2026 interaction patterns like scroll-triggered element assembly, view-timeline animations, and progressive content reveal so the output feels modern, not templated. Works with Claude Code, Cursor, Codex CLI, VS Code Copilot, and any agent that supports the SKILL.md standard.
📖 Learn more: Best Frontend & Design Skills for Claude Code →
Use Cases
- Transform generic SaaS dashboards into high-fidelity, data-rich interfaces.
- Implement complex scroll-driven storytelling and pinned animations.
- Create domain-specific visual identities for portfolios, fintech, or education.
- Build sophisticated typography systems and custom SVG micro-interactions.
How to Install
unzip design-philosophy.zip -d ~/.claude/skills/Reviews
No reviews yet — be the first to share your experience.
Only users who have downloaded or purchased this skill can leave a review.
Early access skill
Be the first to review this skill.
Only users who have downloaded or purchased this skill can leave a review.
Security Scanned
Passed automated security review
Permissions
Allowed Hosts
Frequently Asked Questions
Learn More About AI Agent Skills
Similar Skills
code-reviewer
Reviews your code for bugs, security vulnerabilities, logic errors, performance issues, and style violations. Organizes findings by severity and suggests fixes with code examples.
git-commit-writer
Writes conventional commit messages by analyzing your staged git changes. Detects commit type, scope, and breaking changes automatically.
readme-generator
Generates a complete, polished README.md by scanning your actual project structure, dependencies, and code.
pr-description-writer
Writes clear pull request descriptions by analyzing your branch diff. Covers what changed, why, how, and what to test. Works with GitHub, GitLab, and Bitbucket.