| name | styleai-landing-builder |
| description | Design and build premium landing-page concepts for StyleAI, especially dark luxury, Huly-inspired, interaction-led pages that showcase outfit visualization and closet intelligence. Use when creating hero sections, motion concepts, design systems, interaction specs, layout direction, or implementation plans for StyleAI marketing pages. |
StyleAI Landing Builder
Use this skill to turn StyleAI ideas into a premium landing-page system.
Workflow
- Lock the goal.
- Pick one: hero concept, interaction spec, section architecture, visual system, or implementation plan.
- Preserve the brand position.
- StyleAI should feel premium, intelligent, minimal, and visually expensive.
- Avoid generic SaaS gradients and AI slop.
- Build around product reveal.
- The motion should reveal outfit intelligence, closet visualization, or personal styling outcomes.
- Animation must serve comprehension.
- Specify before building.
- Hero copy
- Section order
- Motion logic
- Visual references
- Tech implementation notes
- Output both design and dev language.
- A creative director should understand it.
- A frontend engineer should be able to build it.
Huly-Inspired Rules
- Use dark, high-contrast surfaces.
- Let cursor/scroll interactions reveal the product.
- Prefer clean typography and confident spacing.
- Make mockups do explanatory work.
- Keep the page feeling expensive, not busy.
Output Format
Goal
What this page or section needs to achieve.
Concept
1 short paragraph.
Section Architecture
Ordered list.
Motion / Interaction Notes
Bullet list.
Visual System
Color, type, spacing, mockup treatment.
Build Notes
GSAP / Framer Motion / Next.js implementation notes.
Use With Other Skills
- Use after
research-brief-action-engine when a design reference needs to become an implementation brief.
References
- Read
references/huly-notes.md for the design cues we want to borrow.
- Read
references/evals.md before finalizing a landing-page concept.
