Works with the AI tools you already use
Claude Code
Cursor
Codex CLI
GitHub Copilot
Gemini CLI+20 moreClaude CodeCursorCodex CLIGitHub CopilotGemini CLI
OpenClaw
Manus
Grok+17 agentsai website design director
Directs high-fidelity, strategy-led website design with buildable specs, visual tokens, and IA.
$7.99
ai website design director
Example session with this skill installed
Design a high-conversion landing page for a developer-focused error monitoring tool that emphasizes speed and low overhead. Our stack is Next.js and Tailwind CSS.
- Read your context and instructions
- Compiled the ai website design
- Generated the UI component
I have developed a comprehensive design direction for your error monitoring tool, focusing on high-performance aesthetics and developer utility.
Design System & Information Architecture
1. Design Thesis
"Precision over Performance." The interface must mirror the tool's core value: extreme efficiency. This means zero unnecessary gradients, high-density information displays, and a visual language borrowed from IDEs rather than marketing brochures to build immediate trust with a technical audience.
2. Visual System (Tailwind Tokens)
| Category | Token / Role | Specification |
|---|---|---|
| Typography | Brand Heading | JetBrains Mono, 700 weight, tight tracking |
| Typography | Body / UI | Inter, 400/500 weight, optimized for legibility |
| Palette | Surface-Base | #0B0E14 (Deep Charcoal) |
| Palette | Action-Primary | #38BDF8 (Sky 400) - AA Compliant on Dark |
| Palette | Status-Error | #F87171 (Red 400) |
| Spacing | Grid System | 12-column fluid, 24px gutters, 64px section padding |
| Radius | Component | 4px (Sharp, professional edges) |
3. Page Blueprint
Hero: Split-pane layout. Left: H1 with "0.1ms overhead" proof point. Right: Fenced code block showing a 3-line integration.
2. Real-time Feed: A high-density data table showing incoming errors with micro-sparklines.
3. The "Why": Three columns focusing on "Zero-Dependency," "Global Edge Network," and "P99 Latency."
4. Implementation: Tabbed interface showing installation steps for Next.js, Remix, and SvelteKit.
5. CTA: Single primary button "Start Free Debugging" with a secondary "View Documentation" link.
4. Interaction & Motion
- Entry: Terminal-style typing effect for the code snippet in the hero.
- Hover: Subtle 1px border glow on feature cards using the Primary-Action color.
- Feedback: Toast notifications for copy-to-clipboard actions use reduced-motion slide-ins.
5. Accessibility & Responsive
- Contrast: All text meets WCAG 2.1 Level AA standards against the dark background.
- Mobile: The data table in section 2 collapses into summary cards with horizontal scrolling for raw logs.
- Touch: All interactive elements maintain a minimum 44px hit target.
Next steps
- Review the Tailwind token mapping to ensure it aligns with your existing global CSS.
- Provide the specific 3-line integration code to replace the placeholder in the Hero section.
- Confirm if you require a specific dark/light mode toggle behavior for the documentation section.
ai-website-design-director.tsx
TSX · React component
Example file from a real run - the skill writes it into your workspace.
Connects securely to your tools. The creator never sees your data.
What you get
About this skill
The problem
Generic AI-generated landing pages often lack strategic depth, resulting in sites that look like templates rather than functional business tools. Developers and designers struggle to translate vague "modern" requests into specific, buildable design systems that actually convert.
What it does
- Analyzes business goals and audience needs to establish a clear design thesis before any layout starts.
- Defines a complete information architecture including entry points, proof points, and secondary conversion paths.
- Generates a comprehensive visual system with typography roles, spacing rhythms, and semantic color tokens.
- Specifies responsive behavior and accessibility requirements to ensure the site works across all viewports and for all users.
- Produces technical handoff documentation, including component maps and implementation-ready acceptance criteria.
Why this beats prompting it yourself
Most LLMs produce generic "lorem ipsum" layouts based on common patterns. This skill enforces a "strategy first" workflow that connects business objectives to technical execution, ensuring every design choice is justified and buildable without guessing hex codes or spacing.
Use cases
- Creating a distinctive visual identity for a new SaaS landing page.
- Redesigning an existing site to improve accessibility and mobile performance.
- Establishing a design system and component map for a custom React or Tailwind build.
- Mapping out the information architecture for a complex multi-page product site.
Known limitations
Does not generate actual image assets or logo files. Requires external research tools for real-time category analysis.
How to install
Works the same in every agent - Claude, Cursor, Codex, Copilot and 20+ more.
- 1
Download the ZIP
Free skills download straight away. Paid skills unlock right after purchase.
- 2
Unzip into your skills folder
Every agent reads skills from one folder on your machine. Drop the unzipped folder in there.
- 3
Ask your agent to use it
Restart the agent if it was already running. It picks the skill up automatically - no config needed.
Skills folder by agent
Click the path to copy it. Create the folder if it does not exist yet.
Reviews
No reviews yet
Be one of the first to try it. Every listed skill passes our trust checks below.
Security scanned
Passed our 8-point scan before listing
Fresh listing
Recently published to Agensi
30-day refund
Not a fit? Get your money back
Trust & safety
Security scanned
Verified clean today
- Passed all security checks, Safe to install