git404hub

what is axi-front-design fr?

diddysister/axi-front-design — explained in plain English

Analysis updated 2026-05-18

12Audience · designerComplexity · 1/5LicenseSetup · easy

tl;dr

Claude Code Skill that makes the assistant behave like a senior frontend designer, producing high-fidelity HTML landing pages, decks, and UI prototypes with strict anti-cliche design constraints.

vibe map

mindmap
  root((axi-front-design))
    Inputs
      Design brief
      Existing design tokens
      Trigger phrases
    Outputs
      Landing pages
      Slide decks
      UI prototypes
      Mobile mockups
    Use Cases
      Marketing pages
      Pitch decks
      Interactive prototypes
    Tech Stack
      Claude Code
      HTML
      CSS
      JavaScript

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

what do people make with this?

VIBE 1

Generate a high-fidelity HTML landing page in Claude Code with one prompt

VIBE 2

Build slide decks or product motion demos as static HTML inside a project

VIBE 3

Force Claude to pull design tokens from the existing codebase instead of inventing colors

VIBE 4

Get three design variants of a UI prototype in one pass

what's the stack?

Claude CodeHTMLCSSJavaScriptMarkdown

how it stacks up fr

diddysister/axi-front-design0xhossam/uncanny89171/web3-101
Stars121212
LanguageC
Setup difficultyeasyhardeasy
Complexity1/55/51/5
Audiencedesignerresearchergeneral

Figures from each repo's GitHub metadata at analysis time.

how do i run it?

Difficulty · easy time til it works · 5min

Just drop SKILL.md into skills/axi-front-design/ and register the path in .claude/settings.json.

MIT license, do almost anything with the code as long as you keep the copyright notice.

in plain english

axi-front-design is a Claude Code Skill, meaning a small instruction file you drop into Claude Code so that it changes how the assistant behaves on certain prompts. The author's goal is to make Claude act like a senior designer rather than a generic frontend engineer, and the output is always high-fidelity HTML rather than design files in PPTX or Figma format. The README is written in both Chinese and English and lists the kinds of things the skill is meant to produce: landing pages and marketing pages, slide decks, interactive UI prototypes, short product motion demos, infographics or posters, and mobile mockups or UI kits. Specific trigger phrases in either language, such as 'design a landing page', 'make a deck', or 'prototype this UI', cause the skill to activate. Installation is plain. You place SKILL.md inside a skills/axi-front-design/ folder in your project, then register the path in .claude/settings.json under a 'skills' list. After that, you either invoke it directly with /axi-front-design followed by a brief, or you just describe what you want and one of the trigger phrases switches the skill on. The workflow the author wants Claude to follow is: ask clarifying questions first through a popup, read design tokens like colors, fonts, and spacing from the existing codebase rather than inventing them, write those decisions at the top of the file before writing components, ship a rough skeleton early so the user can open it in a browser, and finish by offering at least three variants. The README also lists hard constraints meant to fight common AI design habits: no purple-pink-blue gradient backgrounds, no decorative emoji, no overused fonts like Inter or Roboto or Arial, no SVG hand-drawn illustrations, no filler statistics or icons, and no padding sections just to fill space. It also names cases the skill is not for, including pure text replies, real image generation, and exporting to PPTX or Figma. The license is MIT.

prompts (copy fr)

prompt 1
Install axi-front-design into my project by adding skills/axi-front-design/SKILL.md and registering it in .claude/settings.json.
prompt 2
Trigger axi-front-design with the prompt design a landing page for a developer tool and show three variant skeletons.
prompt 3
Make Claude follow the axi-front-design clarifying-questions popup before generating a slide deck for a Series A pitch.
prompt 4
Use axi-front-design to convert my Figma-style brief into a single HTML file that respects my existing CSS variables.
prompt 5
Audit a page I built so it follows the axi-front-design hard constraints (no purple-pink gradients, no Inter font, no decorative emoji).

Frequently asked questions

what is axi-front-design fr?

Claude Code Skill that makes the assistant behave like a senior frontend designer, producing high-fidelity HTML landing pages, decks, and UI prototypes with strict anti-cliche design constraints.

What license does axi-front-design use?

MIT license, do almost anything with the code as long as you keep the copyright notice.

How hard is axi-front-design to set up?

Setup difficulty is rated easy, with roughly 5min to a first successful run.

Who is axi-front-design for?

Mainly designer.

peek the repo → explain another one

This repo across BitVibe Labs

double-check against the repo, no cap.