axi-front-design

Create high-fidelity HTML design artifacts through a structured designer-led workflow.

82|10|Updated May 19, 2026
One-click install
npx skills add https://github.com/Diddysister/axi-front-design --skill axi-front-design
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: axi-front-design
Source: https://github.com/Diddysister/axi-front-design/tree/main
Command: npx skills add https://github.com/Diddysister/axi-front-design --skill axi-front-design

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill solves the problem of producing generic AI-looking frontend outputs by guiding AI to act as a senior designer and create context-aware, high-fidelity HTML design artifacts.

Core Features & Use Cases

  • Design Workflow Guidance: Enforces a professional design process with discovery questions, design context analysis, system definition, early drafts, and iterative refinement.
  • High-Fidelity HTML Creation: Supports landing pages, pitch decks, interactive prototypes, animations, infographics, mobile mockups, and design systems through HTML-based outputs.
  • Design Quality Controls: Prevents common AI design clichés, encourages real design tokens and assets, and promotes multiple visual directions for comparison.
  • Use Case: A product team can use this Skill to create a SaaS landing page prototype from an existing codebase while preserving brand tokens and exploring multiple design directions.

Quick Start

Use the axi-front-design skill to create a high-fidelity HTML landing page for my SaaS product with multiple design directions.

Frequently Asked Questions about axi-front-design

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create high-fidelity HTML landing pages that don't look AI-generated?

To create high-fidelity HTML landing pages without generic AI patterns, use a structured designer-led workflow that enforces design-context discovery, token-based styling decisions, and multi-variant visual exploration for professional outputs.

What is the design workflow for generating interactive prototypes and mobile mockups in HTML?

The design workflow for interactive prototypes and mobile mockups transforms generic frontend generation into a structured process: discovery questions, design context analysis, system definition, early drafts, and iterative refinement to produce high-fidelity HTML artifacts.

Can I use my existing design tokens and brand assets when building a SaaS landing page prototype?

Yes, building a SaaS landing page prototype supports existing design tokens and brand assets. The workflow enforces token-based styling decisions to preserve brand identity while exploring multiple visual directions for comparison.

Does this approach support creating a complete design system or just individual page layouts?

This approach supports both. It handles complete design system creation alongside individual landing pages, slide decks, interactive prototypes, animations, infographics, and mobile mockups through structured HTML-based outputs.

Why does my AI-generated frontend design look generic and how do I avoid common design clichés?

AI-generated frontend design looks generic when it skips context-aware styling. Avoiding common design clichés requires applying design quality controls that enforce professional discovery, token-based decisions, and multi-variant exploration before HTML implementation.