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.